fix css modules (#1743)

packages/xarc-app-dev/src/config/babel/babelrc.ts

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires, no-console, @typescript-eslint/ban-ts-ignore */
-export {};
 
 /*
  * A single babel RC for all transpiling, including client and server code.
  * When transpiling for node.js, env XARC_BABEL_TARGET should be set to "node"
  * and this file will set preset-env targets accordingly.
  */
+const requireAt = require("require-at");
 const ck = require("chalker");
 const archetype = require("@xarc/app-dev/config/archetype")();
 const optionalRequire = require("optional-require")(require);
@@ -48,6 +48,54 @@ const isProduction = (BABEL_ENV || NODE_ENV) === "production";
 const isTest = (BABEL_ENV || NODE_ENV) === "test";
 const isNodeTarget = XARC_BABEL_TARGET === "node";
 
+/**
+ * https://www.npmjs.com/package/babel-plugin-react-css-modules
+ *
+ * This plugin enhances the CSS module support from css-loader.  It adds a new
+ * prop styleName in addition to the className prop.  This also automatically
+ * make it work for SSR.
+ *
+ * Currently, looks like the author has been inactive on maintaining this plugin
+ * and there's some compatibility issue with css-loader 4.x.
+ * https://github.com/gajus/babel-plugin-react-css-modules/issues/291
+ *
+ * Resolution: TBD
+ */
+const getReactCssModulePlugin = () => {
+  if (!enableCssModule) {
+    return null;
+  }
+
+  const postCssPath = optionalRequire.resolve("@xarc/opt-postcss/package.json");
+
+  if (!postCssPath) {
+    return null;
+  }
+
+  const babelReactCssModulePlugin = requireAt(postCssPath)("babel-plugin-react-css-modules");
+
+  return [
+    [
+      babelReactCssModulePlugin,
+      {
+        generateScopedName: `${isProduction ? "" : "[name]__[local]___"}[hash:base64:5]`,
+        filetypes: {
+          ".scss": {
+            syntax: "postcss-scss",
+            plugins: ["postcss-nested"]
+          },
+          ".styl": {
+            syntax: "sugarss"
+          },
+          ".less": {
+            syntax: "postcss-less"
+          }
+        }
+      }
+    ]
+  ];
+};
+
 const basePlugins = [
   !isNodeTarget && enableDynamicImport && "@babel/plugin-syntax-dynamic-import",
   // add plugin for loadable component
@@ -111,27 +159,7 @@ const plugins = basePlugins.concat(
     ],
   // css module support
   // Note: this is needed for server side (node.js) also.
-  enableCssModule && [
-    [
-      "babel-plugin-react-css-modules",
-      {
-        context: "./src",
-        generateScopedName: `${isProduction ? "" : "[name]__[local]___"}[hash:base64:5]`,
-        filetypes: {
-          ".scss": {
-            syntax: "postcss-scss",
-            plugins: ["postcss-nested"]
-          },
-          ".styl": {
-            syntax: "sugarss"
-          },
-          ".less": {
-            syntax: "postcss-less"
-          }
-        }
-      }
-    ]
-  ],
+  getReactCssModulePlugin(),
   !isNodeTarget &&
     enableKarmaCov && [
       getPluginFrom(["@xarc/opt-karma", "electrode-archetype-opt-karma"], "babel-plugin-istanbul")

packages/xarc-app/src/index.ts

@@ -155,7 +155,7 @@ export function load(
    * https://github.com/webpack/css-loader#local-scope
    * https://github.com/css-modules/postcss-modules-scope
    */
-  if (options.cssModuleHook === true) {
+  if (options.cssModuleHook !== false) {
     const opts = Object.assign(
       {
         generateScopedName: "[name]__[local]___[hash:base64:5]",

packages/xarc-webpack/src/partials/extract-style.ts

@@ -1,7 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-/* eslint-disable max-statements, complexity */
-
+/* eslint-disable @typescript-eslint/no-var-requires, max-statements */
 import * as Path from "path";
 
 const archetypeConfig = require("@xarc/app-dev/config/archetype");
@@ -74,9 +71,9 @@ module.exports = function() {
   const isDevelopment = !isProduction;
   const archetype = archetypeConfig();
 
-  const { hasPostCss, atImport, postcssPresetEnv, postcssLoader } = loadPostCss();
+  const cssModuleSupport = detectCssModule();
 
-  const cssModuleSupport = hasPostCss && detectCssModule();
+  const { hasPostCss, atImport, postcssPresetEnv, postcssLoader } = loadPostCss();
 
   const rules = [];
 
@@ -140,7 +137,13 @@ module.exports = function() {
     use: [
       {
         loader: MiniCssExtractPlugin.loader,
-        options: { hmr: isDevelopment, reload: isDevelopment, publicPath: "" }
+        options: {
+          hmr: isDevelopment,
+          reload: isDevelopment,
+          publicPath: "",
+          esModule: true,
+          modules: Boolean(cssModuleSupport)
+        }
       },
       ...getCssQueryUse()
     ]
@@ -157,7 +160,13 @@ module.exports = function() {
       use: [
         {
           loader: MiniCssExtractPlugin.loader,
-          options: { hmr: isDevelopment, reload: isDevelopment, publicPath: "" }
+          options: {
+            hmr: isDevelopment,
+            reload: isDevelopment,
+            publicPath: "",
+            esModule: true,
+            modules: Boolean(cssModuleSupport)
+          }
         },
         ...getCssQueryUse().concat({ loader: sassLoader } as any)
       ]

packages/xarc-webpack/src/util/detect-css-module.ts

@@ -8,14 +8,16 @@ const AppMode = archetype.AppMode;
 const getOptRequire = require("../util/get-opt-require");
 
 function detectCSSModule() {
-  if (getOptRequire(["@xarc/opt-postcss", "electrode-archetype-opt-postcss"]).invalid) {
-    return false;
-  }
-
+  // if user explicitly says they want CSS module support, then we enable it
   if (archetype.webpack.cssModuleSupport !== undefined) {
     return Boolean(archetype.webpack.cssModuleSupport);
   }
 
+  // without postcss we don't want to do CSS module by default
+  if (getOptRequire(["@xarc/opt-postcss", "electrode-archetype-opt-postcss"]).invalid) {
+    return false;
+  }
+
   const scanned = filterScanDir.sync({
     dir: Path.resolve(AppMode.src.client),
     grouping: true,

samples/hapi-app-css-modules/.browserslistrc

@@ -0,0 +1,4 @@
+# Browsers that we support
+last 2 versions
+ie >= 11
+> 5%

samples/hapi-app-css-modules/.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

samples/hapi-app-css-modules/.eslintrc.js

@@ -0,0 +1,11 @@
+var path = require("path");
+var archetype = require("@xarc/app/config/archetype")();
+var archetypeEslint = path.join(archetype.config.eslint, ".eslintrc-react");
+
+function dotify(p) {
+  return path.isAbsolute(p) ? p : "." + path.sep + p;
+}
+
+module.exports = {
+  extends: dotify(path.relative(__dirname, archetypeEslint))
+};

samples/hapi-app-css-modules/.gitattributes

@@ -0,0 +1 @@
+* text=auto

samples/hapi-app-css-modules/.gitignore

@@ -0,0 +1,158 @@
+
+
+# Created by https://www.gitignore.io/api/gitbook,node,webstorm,bower,osx
+
+### GitBook ###
+# Node rules:
+## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+## Dependency directory
+## Commenting this out is preferred by some people, see
+## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Book build output
+_book
+
+# eBook build output
+*.epub
+*.mobi
+*.pdf
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+
+### WebStorm ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
+
+*.iml
+
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+# .idea/shelf
+
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+
+## File-based project format:
+*.ipr
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+
+### Bower ###
+bower_components
+.bower-cache
+.bower-registry
+.bower-tmp
+
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# others
+.hg
+.project
+.tmp
+
+# Build
+dist
+Procfile
+config/assets.json
+npm-shrinkwrap.json
+
+.isomorphic-loader-config.json
+

samples/hapi-app-css-modules/.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - 7
+  - 6
+  - 4

samples/hapi-app-css-modules/.yo-rc.json

@@ -0,0 +1,5 @@
+{
+  "generator-electrode": {
+    "serverType": "HapiJS"
+  }
+}

samples/hapi-app-css-modules/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 hapi-app <[email protected]>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.