fix: workaround for css-loader path issue

packages/postcss/mixin.core.js

@@ -1,3 +1,6 @@
+// XXX: This file creates multiple side-effects
+require('./patch-postcss-modules-extract-imports');
+
 const postcssImportPlugin = require('postcss-import');
 const postcssImportResolver = require('postcss-import/lib/resolve-id');
 const postcssPresetEnv = require('postcss-preset-env');

packages/postcss/package.json

@@ -19,12 +19,14 @@
   },
   "dependencies": {
     "css-loader": "^3.2.0",
+    "enhanced-resolve": "^4.1.1",
     "hops-mixin": "^12.0.0-rc.0",
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "pathifist": "^1.0.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
+    "postcss-modules-extract-imports": "^2.0.0",
     "postcss-preset-env": "^6.7.0",
     "style-loader": "^1.0.0",
     "webpack": "^4.41.0",

packages/postcss/patch-postcss-modules-extract-imports.js

@@ -0,0 +1,62 @@
+const { dirname } = require('path');
+const { create } = require('enhanced-resolve');
+const postcssModulesExtractImports = require('postcss-modules-extract-imports');
+
+const resolve = create.sync({
+  extensions: ['.css'],
+  mainFields: ['style'],
+  symlinks: false,
+});
+const matchImports = /^(.+?)\s+from\s+(?:"([^"]+)"|'([^']+)'|(global))$/;
+
+const plugin = postcssModulesExtractImports();
+
+(function patchModules() {
+  module.children
+    .filter(mod => mod.id.includes('postcss-modules-extract-imports'))
+    .forEach(mod => {
+      // XXX: The following line mutates exports of a CommonJS module
+      mod.exports = postcssModulesExtractImportsPatched;
+    });
+})();
+
+function postcssModulesExtractImportsPatched() {
+  return css => {
+    const inputPath = dirname(css.source.input.file);
+    // XXX: The "patchDeclarationValue" mutates the CSS AST
+    findComposesDeclarations(css).forEach(patchDeclarationValue(inputPath));
+    return plugin(css);
+  };
+}
+
+function findComposesDeclarations(css) {
+  return css.nodes
+    .filter(node => node.type === 'rule')
+    .map(rule => rule.nodes)
+    .flat()
+    .filter(node => node.type === 'decl' && node.prop === 'composes');
+}
+
+const patchDeclarationValue = inputPath => declaration => {
+  const matches = declaration.value.match(matchImports);
+  if (matches) {
+    const [, symbols, doubleQuotePath, singleQuotePath, global] = matches;
+
+    if (!global) {
+      const importPath = doubleQuotePath || singleQuotePath;
+
+      if (!isRelative(inputPath, importPath)) {
+        declaration.value = `${symbols} from '~${importPath}'`;
+      }
+    }
+  }
+};
+
+function isRelative(inputPath, importPath) {
+  try {
+    resolve(inputPath, `./${importPath}`);
+    return true;
+  } catch {
+    return false;
+  }
+}

packages/spec/integration/postcss/__tests__/build-static.js

@@ -16,23 +16,32 @@ describe('postcss production static build', () => {
       textAlign,
       paddingTop,
       paddingLeft,
+      borderRadius,
     } = await page.evaluate(() => {
       const {
         position,
         fontFamily,
         textAlign,
         paddingTop,
         paddingLeft,
+        borderRadius,
       } = window.getComputedStyle(document.querySelector('h1'));
-      return { position, fontFamily, textAlign, paddingTop, paddingLeft };
+      return {
+        position,
+        fontFamily,
+        textAlign,
+        paddingTop,
+        paddingLeft,
+        borderRadius,
+      };
     });
 
     expect(position).toBe('sticky');
     expect(fontFamily).toContain('-apple-system');
     expect(textAlign).toBe('center');
     expect(paddingTop).toBe('50px');
-    expect(paddingLeft).toBe('27.4285px');
-    // todo: add expectation for c-arrow class
+    expect(paddingLeft).toBe('38px');
+    expect(borderRadius).toBe('100px');
 
     // there should be 2 stylesheets
     // the global animate.css and the css-modules import

packages/spec/integration/postcss/styles.css

@@ -1,10 +1,10 @@
 @import url(imported-from-css.css);
-@import '@zendeskgarden/css-arrows';
+@import '@zendeskgarden/css-buttons';
 
 .headline {
   composes: compose from './for-composing.css';
-  composes: c-arrow from '~@zendeskgarden/css-arrows/src/index.css';
-  padding-left: var(--zd-arrow-size);
+  composes: c-btn--pill from '@zendeskgarden/css-buttons';
+  padding-left: var(--zd-btn-line-height);
   color: aqua;
   position: sticky;
   font-family: system-ui;

packages/spec/package.json

@@ -36,7 +36,7 @@
     "url-join": "^4.0.1"
   },
   "dependencies": {
-    "@zendeskgarden/css-arrows": "^3.1.1",
+    "@zendeskgarden/css-buttons": "^7.0.17",
     "animate.css": "^3.7.2"
   }
 }

yarn.lock

@@ -2755,10 +2755,17 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@zendeskgarden/css-arrows@^3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@zendeskgarden/css-arrows/-/css-arrows-3.1.1.tgz#dce2103b8e30c289df99894721713726853010fd"
-  integrity sha512-CM0H4fCdKUCZHZEpFuIGkaoK7TSh29FrMV0ejst1wlv9aQG90IlFYmv7/JRovtYCb8aSkrJUBlkvENO7hSsDnQ==
+"@zendeskgarden/css-buttons@^7.0.17":
+  version "7.0.17"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/css-buttons/-/css-buttons-7.0.17.tgz#08f5618ee009acbbeb0cc29bafe4c8e994adc357"
+  integrity sha512-D++24dzYmFNc8PvczuakUh+mx2umIoBeAKNPIri9EpyTo2ntJ61OWAez1ZidVFMMvlurK07vl34cSilTR2WtAw==
+  dependencies:
+    "@zendeskgarden/css-variables" "^6.4.3"
+
+"@zendeskgarden/css-variables@^6.4.3":
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/@zendeskgarden/css-variables/-/css-variables-6.4.3.tgz#9cdfb0a0d97dc9a92e108b625d29ecc7330627ee"
+  integrity sha512-YKxw63ErJKzKmpCcHSqgABuFCakpU3DQFsR1fKm3rLcHVEeXPvjEPLIp73lzG2/YY24psv0/eiSq1VJDEoeReg==
 
 "@zkochan/cmd-shim@^3.1.0":
   version "3.1.0"