fix(core-styles): css import paths

TACC · Jul 20, 2022 · 7f37f9e · 7f37f9e
1 parent 70be7a6
commit 7f37f9e
Show file tree

Hide file tree

Showing 20 changed files with 62 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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");