From 7f37f9e55d96509d63d6ae6741a0c4d19ef401e1 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 20 Jul 2022 18:41:48 -0500 Subject: [PATCH 1/3] fix(core-styles): css import paths --- libs/core-styles/src/.postcssrc.base.yml | 4 +- libs/core-styles/src/bin/config.js | 37 ++++++++++++++++++- .../components/bootstrap.container.css | 2 +- .../components/bootstrap.pagination.css | 2 +- .../src/lib/_imports/components/c-button.css | 2 +- .../src/lib/_imports/components/c-callout.css | 4 +- .../src/lib/_imports/components/c-card.css | 2 +- .../lib/_imports/components/c-data-list.css | 2 +- .../src/lib/_imports/components/c-nav.css | 2 +- .../_imports/components/c-see-all-link.css | 2 +- .../lib/_imports/components/c-show-more.css | 2 +- .../src/lib/_imports/objects/o-grid.css | 4 +- .../lib/_imports/objects/o-offset-content.css | 2 +- .../src/lib/_imports/objects/o-section.css | 6 +-- .../src/lib/_imports/tools/x-layout.css | 2 +- .../lib/_imports/trumps/s-article-list.css | 6 +-- .../lib/_imports/trumps/s-article-preview.css | 4 +- .../src/lib/_imports/trumps/s-breadcrumbs.css | 2 +- .../lib/_imports/trumps/s-system-specs.css | 2 +- libs/core-styles/src/lib/_tests.css | 4 +- 20 files changed, 62 insertions(+), 31 deletions(-) diff --git a/libs/core-styles/src/.postcssrc.base.yml b/libs/core-styles/src/.postcssrc.base.yml index c2473bbb3..0f7cf75d9 100644 --- a/libs/core-styles/src/.postcssrc.base.yml +++ b/libs/core-styles/src/.postcssrc.base.yml @@ -1,7 +1,5 @@ plugins: - postcss-import: - path: - - 'src/lib' + postcss-import: {} postcss-extend: {} diff --git a/libs/core-styles/src/bin/config.js b/libs/core-styles/src/bin/config.js index 3448f9afb..7f7640e6c 100755 --- a/libs/core-styles/src/bin/config.js +++ b/libs/core-styles/src/bin/config.js @@ -33,8 +33,9 @@ function config(customConfigFiles = [], cssVersion) { }); const mergedJson = merge(...configObjects); - // Update version property - const updatedJson = updateVersion(mergedJson, cssVersion); + // Update properties + let updatedJson = updateVersion(mergedJson, cssVersion); + updatedJson = resolveImportFromPaths(updatedJson); const configYaml = yaml.dump(updatedJson); // Write final config file @@ -55,6 +56,38 @@ function updateVersion(config, version) { return config; } +/** + * Update the value for the CSS version in given config data + * @param {object} config - The config data in which to update the version + * @return {object} - Updated config + */ +function resolveImportFromPaths(config) { + let paths = config['plugins']['postcss-env-function']['importFrom']; + paths = (typeof paths === 'string') ? [ paths ] : paths; + let newPaths = []; + + console.log(`Resolving 'importFrom' paths`); + + if (paths) { + paths.forEach(path => { + let newPath; + try { + newPath = require.resolve(path); + } catch { + newPath = path; + } finally { + newPaths.push( newPath ); + } + }); + } else { + newPaths = paths; + } + + config['plugins']['postcss-env-function']['importFrom'] = newPaths; + + return config; +} + /** * Get JSON from YAML config file * @param {string} filePath - YAML config file diff --git a/libs/core-styles/src/lib/_imports/components/bootstrap.container.css b/libs/core-styles/src/lib/_imports/components/bootstrap.container.css index 97a3a3bcb..f32c8024d 100644 --- a/libs/core-styles/src/lib/_imports/components/bootstrap.container.css +++ b/libs/core-styles/src/lib/_imports/components/bootstrap.container.css @@ -7,7 +7,7 @@ Add to Bootstrap styles. See: Styleguide Components.Bootstrap.Grid */ -@import url("_imports/tools/media-queries.css"); +@import url("../tools/media-queries.css"); @media (--x-wide-and-above) { .container { max-width: var(--global-max-width--x-wide); } diff --git a/libs/core-styles/src/lib/_imports/components/bootstrap.pagination.css b/libs/core-styles/src/lib/_imports/components/bootstrap.pagination.css index 788cbb635..69d583b0d 100644 --- a/libs/core-styles/src/lib/_imports/components/bootstrap.pagination.css +++ b/libs/core-styles/src/lib/_imports/components/bootstrap.pagination.css @@ -7,7 +7,7 @@ Style Bootstrap pagination. See: Styleguide Components.Bootstrap.Pagination */ -@import url("_imports/components/c-page.css"); +@import url("@tacc/core-styles/src/lib/_imports/components/c-page.css"); diff --git a/libs/core-styles/src/lib/_imports/components/c-button.css b/libs/core-styles/src/lib/_imports/components/c-button.css index 15599750f..3dc6ec178 100644 --- a/libs/core-styles/src/lib/_imports/components/c-button.css +++ b/libs/core-styles/src/lib/_imports/components/c-button.css @@ -1,4 +1,4 @@ -@import url("_imports/tools/x-truncate.css"); +@import url("../tools/x-truncate.css"); diff --git a/libs/core-styles/src/lib/_imports/components/c-callout.css b/libs/core-styles/src/lib/_imports/components/c-callout.css index a8654ae0e..fd5f3245f 100644 --- a/libs/core-styles/src/lib/_imports/components/c-callout.css +++ b/libs/core-styles/src/lib/_imports/components/c-callout.css @@ -7,8 +7,8 @@ Markup: c-callout.html Styleguide Components.Callout */ -@import url("_imports/tools/media-queries.css"); -@import url("_imports/tools/x-article-link.css"); +@import url("../tools/media-queries.css"); +@import url("../tools/x-article-link.css"); diff --git a/libs/core-styles/src/lib/_imports/components/c-card.css b/libs/core-styles/src/lib/_imports/components/c-card.css index 6b6d4228c..a0e64f951 100644 --- a/libs/core-styles/src/lib/_imports/components/c-card.css +++ b/libs/core-styles/src/lib/_imports/components/c-card.css @@ -11,7 +11,7 @@ Markup: c-card.html Styleguide Components.Card */ -@import url("_imports/tools/x-article-link.css"); +@import url("../tools/x-article-link.css"); /* Modifiers */ diff --git a/libs/core-styles/src/lib/_imports/components/c-data-list.css b/libs/core-styles/src/lib/_imports/components/c-data-list.css index 9a197d2d2..9e2c34055 100644 --- a/libs/core-styles/src/lib/_imports/components/c-data-list.css +++ b/libs/core-styles/src/lib/_imports/components/c-data-list.css @@ -29,7 +29,7 @@ Markup: c-data-list.html Styleguide Components.DataList */ -@import url("_imports/tools/x-truncate.css"); +@import url("../tools/x-truncate.css"); diff --git a/libs/core-styles/src/lib/_imports/components/c-nav.css b/libs/core-styles/src/lib/_imports/components/c-nav.css index 5e25ff030..f8a057157 100644 --- a/libs/core-styles/src/lib/_imports/components/c-nav.css +++ b/libs/core-styles/src/lib/_imports/components/c-nav.css @@ -17,7 +17,7 @@ Markup: c-nav.html Styleguide Components.Nav */ -@import url("_imports/tools/media-queries.css"); +@import url("../tools/media-queries.css"); diff --git a/libs/core-styles/src/lib/_imports/components/c-see-all-link.css b/libs/core-styles/src/lib/_imports/components/c-see-all-link.css index f6cec9d72..7710d0f7d 100644 --- a/libs/core-styles/src/lib/_imports/components/c-see-all-link.css +++ b/libs/core-styles/src/lib/_imports/components/c-see-all-link.css @@ -11,7 +11,7 @@ Markup: Styleguide Components.SeeAllLink */ -@import url("_imports/tools/x-truncate.css"); +@import url("../tools/x-truncate.css"); diff --git a/libs/core-styles/src/lib/_imports/components/c-show-more.css b/libs/core-styles/src/lib/_imports/components/c-show-more.css index 09a47df41..c28c1cb43 100644 --- a/libs/core-styles/src/lib/_imports/components/c-show-more.css +++ b/libs/core-styles/src/lib/_imports/components/c-show-more.css @@ -11,7 +11,7 @@ A CSS-only way to support a "Show More…" feature. It requires a container and Styleguide: Components.ShowMore */ -@import url("_imports/tools/x-truncate.css"); +@import url("../tools/x-truncate.css"); /* Truncation */ diff --git a/libs/core-styles/src/lib/_imports/objects/o-grid.css b/libs/core-styles/src/lib/_imports/objects/o-grid.css index e2139f904..be1629ec7 100644 --- a/libs/core-styles/src/lib/_imports/objects/o-grid.css +++ b/libs/core-styles/src/lib/_imports/objects/o-grid.css @@ -15,8 +15,8 @@ Markup: o-grid.html Styleguide Objects.Grid */ -@import url("_imports/tools/media-queries.css"); -@import url("_imports/tools/x-grid.css"); +@import url("../tools/media-queries.css"); +@import url("../tools/x-grid.css"); diff --git a/libs/core-styles/src/lib/_imports/objects/o-offset-content.css b/libs/core-styles/src/lib/_imports/objects/o-offset-content.css index f9ce110de..5efbe36d6 100644 --- a/libs/core-styles/src/lib/_imports/objects/o-offset-content.css +++ b/libs/core-styles/src/lib/_imports/objects/o-offset-content.css @@ -5,7 +5,7 @@ Content that should be offset from the flow of text within which it is placed. Styleguide Objects.OffsetContent */ -@import url("_imports/tools/media-queries.css"); +@import url("../tools/media-queries.css"); diff --git a/libs/core-styles/src/lib/_imports/objects/o-section.css b/libs/core-styles/src/lib/_imports/objects/o-section.css index 055e2603b..417788709 100644 --- a/libs/core-styles/src/lib/_imports/objects/o-section.css +++ b/libs/core-styles/src/lib/_imports/objects/o-section.css @@ -32,9 +32,9 @@ Markup: o-section.html Styleguide Objects.Section */ -@import url("_imports/tools/media-queries.css"); -@import url("_imports/tools/x-layout.css"); -@import url("_imports/tools/x-fake-border.css"); +@import url("../tools/media-queries.css"); +@import url("../tools/x-layout.css"); +@import url("../tools/x-fake-border.css"); diff --git a/libs/core-styles/src/lib/_imports/tools/x-layout.css b/libs/core-styles/src/lib/_imports/tools/x-layout.css index 58018f1ef..e6945cb4d 100644 --- a/libs/core-styles/src/lib/_imports/tools/x-layout.css +++ b/libs/core-styles/src/lib/_imports/tools/x-layout.css @@ -11,7 +11,7 @@ Styles that allow re-usable layouts. Styleguide Tools.ExtendsAndMixins.Layout */ -@import url("_imports/tools/media-queries.css"); +@import url("../tools/media-queries.css"); diff --git a/libs/core-styles/src/lib/_imports/trumps/s-article-list.css b/libs/core-styles/src/lib/_imports/trumps/s-article-list.css index b1237bc2e..b7140c3eb 100644 --- a/libs/core-styles/src/lib/_imports/trumps/s-article-list.css +++ b/libs/core-styles/src/lib/_imports/trumps/s-article-list.css @@ -7,9 +7,9 @@ Markup: s-article-list.html Styleguide Trumps.Scopes.ArticleList */ -@import url("_imports/tools/x-truncate.css"); -@import url("_imports/tools/x-layout.css"); -@import url("_imports/tools/x-article-link.css"); +@import url("../tools/x-truncate.css"); +@import url("../tools/x-layout.css"); +@import url("../tools/x-article-link.css"); diff --git a/libs/core-styles/src/lib/_imports/trumps/s-article-preview.css b/libs/core-styles/src/lib/_imports/trumps/s-article-preview.css index cbe36e415..544fe436c 100644 --- a/libs/core-styles/src/lib/_imports/trumps/s-article-preview.css +++ b/libs/core-styles/src/lib/_imports/trumps/s-article-preview.css @@ -7,8 +7,8 @@ Markup: s-article-preview.html Styleguide Trumps.Scopes.ArticlePreview */ -@import url("_imports/tools/x-truncate.css"); -@import url("_imports/tools/x-article-link.css"); +@import url("../tools/x-truncate.css"); +@import url("../tools/x-article-link.css"); diff --git a/libs/core-styles/src/lib/_imports/trumps/s-breadcrumbs.css b/libs/core-styles/src/lib/_imports/trumps/s-breadcrumbs.css index a85f0ac69..b388cd8c2 100644 --- a/libs/core-styles/src/lib/_imports/trumps/s-breadcrumbs.css +++ b/libs/core-styles/src/lib/_imports/trumps/s-breadcrumbs.css @@ -25,7 +25,7 @@ Markup: Styleguide Trumps.Scopes.Breadcrumbs */ -@import url("_imports/tools/x-truncate.css"); +@import url("../tools/x-truncate.css"); diff --git a/libs/core-styles/src/lib/_imports/trumps/s-system-specs.css b/libs/core-styles/src/lib/_imports/trumps/s-system-specs.css index 15b25cf1f..6d2a044ca 100644 --- a/libs/core-styles/src/lib/_imports/trumps/s-system-specs.css +++ b/libs/core-styles/src/lib/_imports/trumps/s-system-specs.css @@ -8,7 +8,7 @@ Styles for System Specifications content which assumes external code: Styleguide Trumps.Scopes.SystemSpecs */ -@import url("_imports/tools/media-queries.css"); +@import url("../tools/media-queries.css"); diff --git a/libs/core-styles/src/lib/_tests.css b/libs/core-styles/src/lib/_tests.css index 55537ebe7..32b44214e 100644 --- a/libs/core-styles/src/lib/_tests.css +++ b/libs/core-styles/src/lib/_tests.css @@ -8,5 +8,5 @@ 2. Review `taccsite_cms/static/site_cms/css/build/_test.css` */ /* NOTE: This file is not intended to be imported */ -@import url("_tests/postcss-extend.css"); -@import url("_tests/postcss-preset-env.css"); +@import url("./_tests/postcss-extend.css"); +@import url("./_tests/postcss-preset-env.css"); From e4e9da04efa8d11ea37c7c31854496d3a7bfc38d Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 25 Jul 2022 13:50:25 -0500 Subject: [PATCH 2/3] fix(core-styles): relative import bootstrap pagination --- .../src/lib/_imports/components/bootstrap.pagination.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/core-styles/src/lib/_imports/components/bootstrap.pagination.css b/libs/core-styles/src/lib/_imports/components/bootstrap.pagination.css index 69d583b0d..235d5955c 100644 --- a/libs/core-styles/src/lib/_imports/components/bootstrap.pagination.css +++ b/libs/core-styles/src/lib/_imports/components/bootstrap.pagination.css @@ -7,7 +7,7 @@ Style Bootstrap pagination. See: Styleguide Components.Bootstrap.Pagination */ -@import url("@tacc/core-styles/src/lib/_imports/components/c-page.css"); +@import url("../components/c-page.css"); From 22885ff66af357503d748d186abbcb33e379c58b Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 26 Jul 2022 11:03:33 -0500 Subject: [PATCH 3/3] chore(core-styles): nx format:write --- libs/core-styles/src/bin/config.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/core-styles/src/bin/config.js b/libs/core-styles/src/bin/config.js index 7f7640e6c..c56d6ea0c 100755 --- a/libs/core-styles/src/bin/config.js +++ b/libs/core-styles/src/bin/config.js @@ -35,7 +35,7 @@ function config(customConfigFiles = [], cssVersion) { // Update properties let updatedJson = updateVersion(mergedJson, cssVersion); - updatedJson = resolveImportFromPaths(updatedJson); + updatedJson = resolveImportFromPaths(updatedJson); const configYaml = yaml.dump(updatedJson); // Write final config file @@ -63,20 +63,20 @@ function updateVersion(config, version) { */ function resolveImportFromPaths(config) { let paths = config['plugins']['postcss-env-function']['importFrom']; - paths = (typeof paths === 'string') ? [ paths ] : paths; + paths = typeof paths === 'string' ? [paths] : paths; let newPaths = []; console.log(`Resolving 'importFrom' paths`); if (paths) { - paths.forEach(path => { + paths.forEach((path) => { let newPath; try { newPath = require.resolve(path); } catch { newPath = path; } finally { - newPaths.push( newPath ); + newPaths.push(newPath); } }); } else {