Css modules improved support (#2284)

* Add CSSModules tests, fix configuration

* Add test cases

packages/crafty-preset-postcss/src/webpack-utils.js

@@ -70,22 +70,20 @@ function getCssModuleLocalIdent(context, _, exportName, options) {
   );
 }
 
-function extractCss(bundle, chain, styleRule) {
-  // Add this only once per bundle
-  if (bundle.extractCSSConfigured) {
-    return;
-  }
-  bundle.extractCSSConfigured = true;
-
+function configureMiniCssExtractPlugin(bundle, chain) {
   // Initialize extraction plugin
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-  // Create a list of loaders that also contains the extraction loader
-  styleRule.use("style-loader").loader(MiniCssExtractPlugin.loader);
+  // Add plugin only once per bundle
+  if (!bundle.extractCSSConfigured) {
+    chain
+      .plugin("extractCSS")
+      .use(MiniCssExtractPlugin, [getExtractConfig(bundle)]);
 
-  chain
-    .plugin("extractCSS")
-    .use(MiniCssExtractPlugin, [getExtractConfig(bundle)]);
+    bundle.extractCSSConfigured = true;
+  }
+
+  return MiniCssExtractPlugin.loader;
 }
 
 function createRule(crafty, bundle, chain, styleRule, options) {
@@ -96,14 +94,15 @@ function createRule(crafty, bundle, chain, styleRule, options) {
   // "style" loader turns CSS into JS modules that inject <style> tags.
   // The "style" loader enables hot editing of CSS.
 
+  let styleLoader;
   if (crafty.getEnvironment() === "production" && bundle.extractCSS) {
-    extractCss(bundle, chain, styleRule);
+    styleLoader = configureMiniCssExtractPlugin(bundle, chain);
   } else {
-    styleRule
-      .use("style-loader")
-      .loader(require.resolve("../packages/style-loader.js"));
+    styleLoader = require.resolve("../packages/style-loader.js");
   }
 
+  styleRule.use("style-loader").loader(styleLoader);
+
   styleRule
     .use("css-loader")
     .loader(require.resolve("../packages/css-loader.js"))

packages/integration/__tests__/crafty-preset-postcss-webpack.js

@@ -52,7 +52,6 @@ test.serial(
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-default.min.css"));
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-default.min.css.map"));
     t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
-    t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(
       testUtils.readForSnapshot(cwd, "dist/js/myBundle-default.min.css")
     );
@@ -76,7 +75,6 @@ test.serial(
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-string.min.css"));
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-string.min.css.map"));
 
-    t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(
       testUtils.readForSnapshot(cwd, "dist/js/myBundle-string.min.css")
@@ -101,10 +99,75 @@ test.serial(
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-object.min.css"));
     t.truthy(testUtils.exists(cwd, "dist/js/myBundle-object.min.css.map"));
 
-    t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(testUtils.readForSnapshot(cwd, BUNDLE));
     t.snapshot(
       testUtils.readForSnapshot(cwd, "dist/js/myBundle-object.min.css")
     );
   }
 );
+
+test.serial("Compiles CSS within webpack, CSS Modules, inline", async t => {
+  const cwd = await testUtils.getCleanFixtures(
+    "crafty-preset-postcss-webpack/modules-inline"
+  );
+
+  const result = await testUtils.run(["run", "default"], cwd);
+
+  t.snapshot(result);
+  t.is(result.status, 0);
+
+  t.truthy(testUtils.exists(cwd, BUNDLE));
+  t.truthy(testUtils.exists(cwd, BUNDLE_MAP));
+
+  const content = testUtils.readForSnapshot(cwd, BUNDLE);
+  t.snapshot(content);
+
+  t.truthy(content.indexOf(".Button{color") > -1);
+  t.truthy(content.indexOf(".t-global .app_app__") > -1);
+  t.truthy(content.indexOf(".t-global .app_app2__") > -1);
+
+  const subappContent = testUtils.readForSnapshot(
+    cwd,
+    "dist/js/subapp.myBundle.min.js"
+  );
+  t.snapshot(subappContent);
+
+  t.truthy(subappContent.indexOf("{color:orange}") > -1);
+  t.truthy(subappContent.indexOf(".subapp_") > -1);
+});
+
+test.serial(
+  "Compiles CSS within webpack, CSS Modules, extracts CSS",
+  async t => {
+    const cwd = await testUtils.getCleanFixtures(
+      "crafty-preset-postcss-webpack/modules-extract"
+    );
+
+    const result = await testUtils.run(["run", "default"], cwd);
+
+    t.snapshot(result);
+    t.is(result.status, 0);
+
+    t.truthy(testUtils.exists(cwd, BUNDLE));
+    t.truthy(testUtils.exists(cwd, BUNDLE_MAP));
+    t.truthy(testUtils.exists(cwd, "dist/js/default.myBundle.min.css"));
+    t.truthy(testUtils.exists(cwd, "dist/js/subapp.myBundle.min.css"));
+
+    const content = testUtils.readForSnapshot(
+      cwd,
+      "dist/js/default.myBundle.min.css"
+    );
+    t.snapshot(content);
+    t.truthy(content.indexOf(".Button{color") > -1);
+    t.truthy(content.indexOf(".t-global .app_app__") > -1);
+    t.truthy(content.indexOf(".t-global .app_app2__") > -1);
+
+    const subappContent = testUtils.readForSnapshot(
+      cwd,
+      "dist/js/subapp.myBundle.min.css"
+    );
+    t.snapshot(subappContent);
+    t.truthy(subappContent.indexOf("{color:orange}") > -1);
+    t.truthy(subappContent.indexOf(".subapp_") > -1);
+  }
+);

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/crafty.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    "@swissquote/crafty-preset-postcss",
+    "@swissquote/crafty-runner-webpack"
+  ],
+  js: {
+    myBundle: {
+      source: "js/app.js",
+      extractCSS: "[name].[bundle].min.css"
+    }
+  }
+};

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/app.module.css

@@ -0,0 +1,9 @@
+:global .t-global {
+    :local .app {
+        color:red;
+    }
+}
+
+:global(.t-global) .app2 {
+    color: green;
+}

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/style.scss

@@ -0,0 +1,3 @@
+.Button {
+    color: orange;
+}

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/css/subapp.module.css

@@ -0,0 +1,3 @@
+.subapp {
+    color:orange;
+}

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/js/app.js

@@ -0,0 +1,8 @@
+import "../css/style";
+import style from "../css/app.module.css";
+
+export default function app() {
+    console.log(style.app);
+
+    import(/* webpackChunkName: "subapp" */ "./subapp");
+}

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-extract/js/subapp.js

@@ -0,0 +1,5 @@
+import style from "../css/subapp.module.css";
+
+export default function subapp() {
+    console.log(style.subapp)
+}

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/crafty.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    "@swissquote/crafty-preset-postcss",
+    "@swissquote/crafty-runner-webpack"
+  ],
+  js: {
+    myBundle: {
+      source: "js/app.js",
+      //extractCSS: "[name].[bundle].min.css"
+    }
+  }
+};

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/app.module.css

@@ -0,0 +1,9 @@
+:global .t-global {
+    :local .app {
+        color:red;
+    }
+}
+
+:global(.t-global) .app2 {
+    color: green;
+}

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/style.scss

@@ -0,0 +1,3 @@
+.Button {
+    color: orange;
+}

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/css/subapp.module.css

@@ -0,0 +1,4 @@
+.subapp {
+    color:orange;
+}
+

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/js/app.js

@@ -0,0 +1,8 @@
+import "../css/style";
+import style from "../css/app.module.css";
+
+export default function app() {
+    console.log(style.app);
+
+    import(/* webpackChunkName: "subapp" */ "./subapp");
+}

packages/integration/fixtures/crafty-preset-postcss-webpack/modules-inline/js/subapp.js

@@ -0,0 +1,5 @@
+import style from "../css/subapp.module.css";
+
+export default function subapp() {
+    console.log(style.subapp)
+}

packages/stylelint-config-swissquote/common.js

@@ -56,7 +56,7 @@ module.exports = {
     "property-no-unknown": true,
     "selector-pseudo-class-no-unknown": [
       true,
-      { ignorePseudoClasses: ["global"] }
+      { ignorePseudoClasses: ["global", "local"] }
     ],
     "selector-pseudo-element-no-unknown": true,
     "selector-pseudo-element-colon-notation": "single",

packages/stylelint-config-swissquote/recommended.js

@@ -67,8 +67,9 @@ module.exports = {
       rules: {
         // In css-modules, naming isn't as important,
         // but as it's going to be used in JS, camelCase is best
+        // But in some cases, you might want to wrap a part in ":global" and this needs to support non-module patterns as well
         "selector-class-pattern": [
-          /^[a-z][a-zA-Z0-9]+$/,
+          /^(_)?(?:(?:u|t|(?:i|ha)?s)+-[a-z$]+[a-zA-Z0-9$()]*|(?:[a-z$][a-zA-Z0-9$()]+-)?[A-Z$][a-zA-Z0-9$()]*(__[a-z0-9$][a-zA-Z0-9$()]*)*(--[a-z0-9$][a-zA-Z0-9$()]*)*)$|^[a-z][a-zA-Z0-9]+$/,
           {
             resolveNestedSelectors: true
           }

packages/stylelint-config-swissquote/src/__tests__/recommended.js

@@ -411,3 +411,27 @@ test("flags warnings when using ids raised one 'selector-max-id' error", t => {
     ]);
   });
 });
+
+test("Works with CSS Modules", t => {
+  const result = stylelint.lint({
+    code: `/** @define App */
+
+:global .t-global {
+    :local .app {
+        color: red;
+    }
+}
+
+:global(.t-global) .app2 {
+    color: green;
+}
+`,
+    codeFilename: "app.module.css",
+    config
+  });
+
+  return result.then(data => {
+    t.falsy(data.errored);
+    t.is(data.results[0].warnings.length, 0);
+  });
+});