From fb07c20d2b7e04703f47da01510c392bd3f0b1a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 16:25:10 +0300 Subject: [PATCH 1/4] docs: example of icss only and mixed see https://github.com/webpack-contrib/css-loader/issues/1161 added two examples for * only icss, no modules * both only icss, no modules and modules, sharing variables with both modules as well as JavaScript --- README.md | 211 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) diff --git a/README.md b/README.md index 4f549e94..0a8e0ef4 100644 --- a/README.md +++ b/README.md @@ -1243,6 +1243,217 @@ module.exports = { }; ``` +### Using `Interoperable CSS` features only + +The following setup is an example of allowing `Interoperable CSS` features such as `:import` and `:export` without using modules by setting `compileType` option. + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + // ... + // -------- + // SCSS + { + test: /\.scss$/, + exclude: /\.module\.scss$/, + use: [ + { + loader: 'style-loader', + options: {} + }, + { + loader: 'css-loader', + options: { + importLoaders: 3, + sourceMap: true, + modules: { + compileType: 'icss' + } + } + }, + { + loader: 'postcss-loader', + options: { + sourceMap: true + } + }, + { + loader: 'resolve-url-loader', + options: { + sourceMap: true + } + }, + { + loader: 'sass-loader', + options: { + sourceMap: true + } + }, + ], + }, + // -------- + // ... + }, +}; +``` + +Using SCSS variables in JavaScript + +**variables.scss** + +```scss +:export { + colorBackgroundCanvas: red; +} +``` + +**app.js** + +```js +import svars from 'variables.scss'; +ctx.fillStyle = `${svars.colorBackgroundCanvas}`; +``` + +### Using SCSS variables for both CSS modules and JavaScript if variables are defined in non-module files + +The following setup is an example of allowing `Interoperable CSS` features such as `:import` and `:export` without using modules (by setting `compileType` option) together with synchronizing variable values between CSS and Javascript. + +Assume case where one wants some canvas drawing to be the same color (set by color name) as HTML background (set by class name). + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + // ... + // -------- + // SCSS GENERAL + { + test: /\.scss$/, + exclude: /\.module\.scss$/, + use: [ + { + loader: 'style-loader', + options: {} + }, + { + loader: 'css-loader', + options: { + importLoaders: 3, + sourceMap: true, + modules: { + compileType: 'icss' + } + } + }, + { + loader: 'postcss-loader', + options: { + sourceMap: true + } + }, + { + loader: 'resolve-url-loader', + options: { + sourceMap: true + } + }, + { + loader: 'sass-loader', + options: { + sourceMap: true + } + }, + ], + }, + // -------- + // SCSS MODULES + { + test: /\.module\.scss$/, + use: [ + { + loader: 'style-loader', + options: {} + }, + { + loader: 'css-loader', + options: { + importLoaders: 3, + sourceMap: true, + modules: { + compileType: 'module', + mode: 'local', + exportGlobals: false, + namedExport: false, + exportLocalsConvention: 'asIs', + exportOnlyLocals: false + } + } + }, + { + loader: 'postcss-loader', + options: { + sourceMap: true + } + }, + { + loader: 'resolve-url-loader', + options: { + sourceMap: true + } + }, + { + loader: 'sass-loader', + options: { + sourceMap: true + } + }, + ], + }, + // -------- + // ... + }, +}; +``` + +**variables.scss** + +```scss +$colorBackground: red; +:export { + colorBackgroundCanvas: $colorBackground; +} +``` + +**Component.module.scss** + +```scss +@import 'variables.scss'; +.componentClass { + background-color: $colorBackground; +} +``` + +**Component.jsx** + +```jsx +import svars from 'variables.scss'; +import styles from 'Component.module.scss'; + +// render DOM with CSS modules class name +//
+// +//
+ +// somewhere in JavaScript canvas drawing code use the variable directly +// const ctx = mountsCanvas.current.getContext('2d',{alpha: false}); +ctx.fillStyle = `${svars.colorBackgroundCanvas}`; +``` + ## Contributing Please take a moment to read our contributing guidelines if you haven't yet done so. From 7423936b9527ab9fb74210d4eabe2de1712195a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 19:10:32 +0300 Subject: [PATCH 2/4] docs: simplified icss only and mixed examples --- README.md | 40 ++++------------------------------------ 1 file changed, 4 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 0a8e0ef4..431a0299 100644 --- a/README.md +++ b/README.md @@ -1261,8 +1261,7 @@ module.exports = { exclude: /\.module\.scss$/, use: [ { - loader: 'style-loader', - options: {} + loader: 'style-loader' }, { loader: 'css-loader', @@ -1337,8 +1336,7 @@ module.exports = { exclude: /\.module\.scss$/, use: [ { - loader: 'style-loader', - options: {} + loader: 'style-loader' }, { loader: 'css-loader', @@ -1350,18 +1348,6 @@ module.exports = { } } }, - { - loader: 'postcss-loader', - options: { - sourceMap: true - } - }, - { - loader: 'resolve-url-loader', - options: { - sourceMap: true - } - }, { loader: 'sass-loader', options: { @@ -1376,8 +1362,7 @@ module.exports = { test: /\.module\.scss$/, use: [ { - loader: 'style-loader', - options: {} + loader: 'style-loader' }, { loader: 'css-loader', @@ -1385,27 +1370,10 @@ module.exports = { importLoaders: 3, sourceMap: true, modules: { - compileType: 'module', - mode: 'local', - exportGlobals: false, - namedExport: false, - exportLocalsConvention: 'asIs', - exportOnlyLocals: false + compileType: 'module' } } }, - { - loader: 'postcss-loader', - options: { - sourceMap: true - } - }, - { - loader: 'resolve-url-loader', - options: { - sourceMap: true - } - }, { loader: 'sass-loader', options: { From 71424dfd0b634d7cc4d2ef302cd493a194e8bafc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 19:27:31 +0300 Subject: [PATCH 3/4] docs: simplified icss only and mixed examples fixed also `importLoaders` count --- README.md | 36 ++++++------------------------------ 1 file changed, 6 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 431a0299..5815f60d 100644 --- a/README.md +++ b/README.md @@ -1266,30 +1266,14 @@ module.exports = { { loader: 'css-loader', options: { - importLoaders: 3, - sourceMap: true, + importLoaders: 1, modules: { compileType: 'icss' } } }, { - loader: 'postcss-loader', - options: { - sourceMap: true - } - }, - { - loader: 'resolve-url-loader', - options: { - sourceMap: true - } - }, - { - loader: 'sass-loader', - options: { - sourceMap: true - } + loader: 'sass-loader' }, ], }, @@ -1341,18 +1325,14 @@ module.exports = { { loader: 'css-loader', options: { - importLoaders: 3, - sourceMap: true, + importLoaders: 1, modules: { compileType: 'icss' } } }, { - loader: 'sass-loader', - options: { - sourceMap: true - } + loader: 'sass-loader' }, ], }, @@ -1367,18 +1347,14 @@ module.exports = { { loader: 'css-loader', options: { - importLoaders: 3, - sourceMap: true, + importLoaders: 1, modules: { compileType: 'module' } } }, { - loader: 'sass-loader', - options: { - sourceMap: true - } + loader: 'sass-loader' }, ], }, From 769005973739f38b041b16704cef25fce2673860 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Thu, 13 Aug 2020 16:34:55 +0300 Subject: [PATCH 4/4] docs: merged icss only and mixed examples --- README.md | 76 ++++++++++--------------------------------------------- 1 file changed, 13 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index 5815f60d..a3c9133d 100644 --- a/README.md +++ b/README.md @@ -1243,68 +1243,12 @@ module.exports = { }; ``` -### Using `Interoperable CSS` features only +### Separating `Interoperable CSS`-only and `CSS Module` features -The following setup is an example of allowing `Interoperable CSS` features such as `:import` and `:export` without using modules by setting `compileType` option. +The following setup is an example of allowing `Interoperable CSS` features only (such as `:import` and `:export`) without using further `CSS Module` functionality by setting `compileType` option for all files that do not match `*.module.scss` naming convention. This is for reference as having `ICSS` features applied to all files was default `css-loader` behavior before v4. +Meanwhile all files matching `*.module.scss` are treated as `CSS Modules` in this example. -**webpack.config.js** - -```js -module.exports = { - module: { - rules: [ - // ... - // -------- - // SCSS - { - test: /\.scss$/, - exclude: /\.module\.scss$/, - use: [ - { - loader: 'style-loader' - }, - { - loader: 'css-loader', - options: { - importLoaders: 1, - modules: { - compileType: 'icss' - } - } - }, - { - loader: 'sass-loader' - }, - ], - }, - // -------- - // ... - }, -}; -``` - -Using SCSS variables in JavaScript - -**variables.scss** - -```scss -:export { - colorBackgroundCanvas: red; -} -``` - -**app.js** - -```js -import svars from 'variables.scss'; -ctx.fillStyle = `${svars.colorBackgroundCanvas}`; -``` - -### Using SCSS variables for both CSS modules and JavaScript if variables are defined in non-module files - -The following setup is an example of allowing `Interoperable CSS` features such as `:import` and `:export` without using modules (by setting `compileType` option) together with synchronizing variable values between CSS and Javascript. - -Assume case where one wants some canvas drawing to be the same color (set by color name) as HTML background (set by class name). +An example case is assumed where a project requires canvas drawing variables to be synchronized with CSS - canvas drawing uses the same color (set by color name in JavaScript) as HTML background (set by class name in CSS). **webpack.config.js** @@ -1314,7 +1258,7 @@ module.exports = { rules: [ // ... // -------- - // SCSS GENERAL + // SCSS ALL EXCEPT MODULES { test: /\.scss$/, exclude: /\.module\.scss$/, @@ -1366,6 +1310,8 @@ module.exports = { **variables.scss** +File treated as `ICSS`-only. + ```scss $colorBackground: red; :export { @@ -1375,6 +1321,8 @@ $colorBackground: red; **Component.module.scss** +File treated as `CSS Module`. + ```scss @import 'variables.scss'; .componentClass { @@ -1384,16 +1332,18 @@ $colorBackground: red; **Component.jsx** +Using both `CSS Module` functionality as well as SCSS variables directly in JavaScript. + ```jsx import svars from 'variables.scss'; import styles from 'Component.module.scss'; -// render DOM with CSS modules class name +// Render DOM with CSS modules class name //
// //
-// somewhere in JavaScript canvas drawing code use the variable directly +// Somewhere in JavaScript canvas drawing code use the variable directly // const ctx = mountsCanvas.current.getContext('2d',{alpha: false}); ctx.fillStyle = `${svars.colorBackgroundCanvas}`; ```