From 2416db2b64a53f6062b6afcabbe4a4b53df9c16c Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Tue, 5 Jan 2021 15:45:54 -0800 Subject: [PATCH] [fix] CSS module support options and make it work for hapi-app sample (#1775) --- .../src/config/opt2/webpack-options.ts | 17 +++-- .../src/util/detect-css-module.ts | 68 +++++++++---------- samples/hapi-app/fyn-lock.yaml | 20 +++--- samples/hapi-app/xclap.js | 8 ++- 4 files changed, 63 insertions(+), 50 deletions(-) diff --git a/packages/xarc-app-dev/src/config/opt2/webpack-options.ts b/packages/xarc-app-dev/src/config/opt2/webpack-options.ts index bb12f5768..9d0ff5bab 100644 --- a/packages/xarc-app-dev/src/config/opt2/webpack-options.ts +++ b/packages/xarc-app-dev/src/config/opt2/webpack-options.ts @@ -55,11 +55,20 @@ export type WebpackOptions = { devArtifactsPath?: string; /** - * Set to true to explicitly enable CSS module support for all style files - * - **Default: `undefined` (auto detect)** - * - If not set, then check env `CSS_MODULE_SUPPORT` + * Configure CSS module support. + * + * Settings: + * 1. `true` or "cssOnly" (**default**): CSS module for any file with `.css` extension + * 2. RegExp: CSS module for any file that matches the custom RegExp + * 3. `"all"`: CSS module for all style files (`css`, `styl`, `sass`, `scss`) + * 4. `"byModExt"`: Use the preset RegExp that matches any file ending with `.mod.{ext}` or `.module.{ext}` + * ie: `/\.(mod|module)\.(css|styl|sass|scss)$/i` + * 5. `false`: Disable CSS module completely + * + * - Legacy: You can also set this option with env `CSS_MODULE_SUPPORT`. + * */ - cssModuleSupport?: boolean | RegExp; + cssModuleSupport?: boolean | RegExp | "all" | "byModExt" | "cssOnly"; /** * Enable loading `@babel/polyfill` for application diff --git a/packages/xarc-webpack/src/util/detect-css-module.ts b/packages/xarc-webpack/src/util/detect-css-module.ts index f870bf7d5..d3ccc189c 100644 --- a/packages/xarc-webpack/src/util/detect-css-module.ts +++ b/packages/xarc-webpack/src/util/detect-css-module.ts @@ -4,51 +4,51 @@ import * as _ from "lodash"; const logger = require("@xarc/app-dev/lib/logger"); function detectCSSModule(archetype) { - const cssModuleSupport = _.get(archetype, "webpack.cssModuleSupport", undefined); - const defaultRegExp = /\.(mod|module)\.(css|styl|sass|scss)/i; - - /* - * cssModuleSupport default to undefined - * Default RexExp used - /\.(mod|module)\.(css|styl|sass|scss)/i - * - * cssModuleSupport:false => no CSS module support at all - * cssModuleSupport:true|undefined => enable CSS module support for any file that match the default RegExp - * cssModuleSupport:RegExp => enable CSS module support for any file that match the user provided RegExp - */ + const cssModuleSupport = _.get(archetype, "webpack.cssModuleSupport", true); + const presetRegExp = { + cssOnly: /\.css$/i, + all: /\.(css|styl|sass|scss)$/i, + byModExt: /\.(mod|module)\.(css|styl|sass|scss)$/i + }; if (cssModuleSupport === null) { - throw new Error( - `null is not a supported value for cssModuleSupport flag. Supported types are boolean or RexExp.` - ); + throw new Error(`null is not a supported value for cssModuleSupport flag.`); } - if (cssModuleSupport === undefined) { - return { enableCssModule: true, cssModuleRegExp: defaultRegExp }; - } else if (cssModuleSupport.constructor.name === "Boolean") { - return { enableCssModule: cssModuleSupport, cssModuleRegExp: defaultRegExp }; + + let cssModuleRegExp: RegExp | null = null; + + if (cssModuleSupport === false) { + // turn off + } else if (cssModuleSupport === true) { + cssModuleRegExp = presetRegExp.cssOnly; } else if (cssModuleSupport.constructor.name === "String") { - let moduleExp; - try { - const lastSlash = cssModuleSupport.lastIndexOf("/"); - moduleExp = new RegExp( - cssModuleSupport.slice(1, lastSlash), - cssModuleSupport.slice(lastSlash + 1) - ); - } catch (err) { - logger.error( - `Could not parse user provided value "${cssModuleSupport}" for cssModuleSupport flag. Enabling CSS Module support for ${defaultRegExp}.` - ); - - moduleExp = defaultRegExp; - } finally { - return { enableCssModule: true, cssModuleRegExp: moduleExp }; + cssModuleRegExp = presetRegExp[cssModuleSupport]; + if (!cssModuleRegExp) { + try { + // in case we load the options from serialized xarc-options.json, where + // regexp are serialized to be a string + const lastSlash = cssModuleSupport.lastIndexOf("/"); + cssModuleRegExp = new RegExp( + cssModuleSupport.substring(1, lastSlash), + cssModuleSupport.substring(lastSlash + 1) + ); + } catch (err) { + logger.error( + `Could not parse cssModuleSupport RegExp string "${cssModuleSupport}". Enabling CSS Module support for all ".css" files.` + ); + + cssModuleRegExp = presetRegExp.cssOnly; + } } } else if (cssModuleSupport.constructor.name === "RegExp") { - return { enableCssModule: true, cssModuleRegExp: cssModuleSupport }; + cssModuleRegExp = cssModuleSupport; } else { throw new Error( `Type ${typeof cssModuleSupport} is not supported for cssModuleSupport flag. Supported types are boolean or RexExp.` ); } + + return { enableCssModule: Boolean(cssModuleRegExp), cssModuleRegExp }; } module.exports = detectCSSModule; diff --git a/samples/hapi-app/fyn-lock.yaml b/samples/hapi-app/fyn-lock.yaml index ca6affab4..f1f029a1f 100644 --- a/samples/hapi-app/fyn-lock.yaml +++ b/samples/hapi-app/fyn-lock.yaml @@ -2232,7 +2232,7 @@ $pkg: babel-plugin-react-css-modules: ^5.2.6 css-modules-require-hook: ^4.0.2 ignore-styles: ^5.0.1 - isomorphic-loader: ^4.2.1 + isomorphic-loader: ^4.2.2 optional-require: ^1.0.0 subapp-util: ^1.1.2 '@xarc/app-dev': @@ -2451,8 +2451,8 @@ $pkg: '@xarc/render-context': ^1.0.3 '@xarc/subapp': ^0.0.3 '@xarc/tag-renderer': ^1.0.3 - react: ^16.13.1 - react-dom: ^16.13.1 + react: '>= 16' + react-dom: '>= 16' peerDependencies: tslib: ^2.0.3 '@xarc/render-context': @@ -7460,12 +7460,12 @@ isobject: dependencies: isarray: 1.0.0 isomorphic-loader: - _latest: 4.2.1 + _latest: 4.2.2 _: - ^4.2.1: 4.2.1 - 4.2.1: - $: sha512-k6/lRYHit1MAiwZ2eWKL3ZMZl8XEhGSxQz30UhvIWqj7b2boFC5cVVv4UGEGW3YoIK84+eHacbNqEGBDKtsIOA== - _: 'https://registry.npmjs.org/isomorphic-loader/-/isomorphic-loader-4.2.1.tgz' + ^4.2.2: 4.2.2 + 4.2.2: + $: sha512-wBUDq1UgXcQZWYZPo767izp5c+srE0aK2b/jCVguVmTQLnh+kIx8UGE/X/aEFJnR5n3WzBl9yHDUKvrzmSHUVQ== + _: 'https://registry.npmjs.org/isomorphic-loader/-/isomorphic-loader-4.2.2.tgz' isstream: _latest: 0.1.2 _: @@ -10816,7 +10816,7 @@ raw-body: react: _latest: 17.0.1 _: - '^16.0.0,^16.13.1': 16.14.0 + '>= 16,^16.0.0': 16.14.0 16.14.0: $: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== _: 'https://registry.npmjs.org/react/-/react-16.14.0.tgz' @@ -10827,7 +10827,7 @@ react: react-dom: _latest: 17.0.1 _: - '^16.0.0,^16.13.1': 16.14.0 + '>= 16,^16.0.0': 16.14.0 16.14.0: $: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== _: 'https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz' diff --git a/samples/hapi-app/xclap.js b/samples/hapi-app/xclap.js index be270138c..e1dc813e7 100644 --- a/samples/hapi-app/xclap.js +++ b/samples/hapi-app/xclap.js @@ -46,13 +46,17 @@ process.env.ENABLE_SHORTEN_CSS_NAMES = true; // process.env.KARMA_BROWSER = "phantomjs"; -const { getDevTaskRunner, loadXarcDevTasks } = require("@xarc/app-dev/lib/dev-tasks"); +const { getDevTaskRunner, loadXarcDevTasks, xclap } = require("@xarc/app-dev/lib/dev-tasks"); const runner = getDevTaskRunner(); runner.load({ foo: runner.exec("echo hello from foo task") }); -loadXarcDevTasks(); +loadXarcDevTasks(xclap, { + webpackOptions: { + cssModuleSupport: "all" + } +}); //