From c83a17798b5a4b3f96459f4b84114aeb3a28c753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 14:54:26 +0300 Subject: [PATCH 1/6] examples of icss as well as syncing variables --- README.md | 231 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 231 insertions(+) diff --git a/README.md b/README.md index 4f549e94..996a077d 100644 --- a/README.md +++ b/README.md @@ -1243,6 +1243,237 @@ 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. + + +```javascript +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** + +```javascript +import svars from 'variables.scss'; + +ctx.fillStyle = `${svars.variableA}`; + +``` + +### 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** + +```javascript +'use strict'; + +import svars from 'variables.scss'; +import styles from 'Component.module.scss'; +import React, {useRef, useEffect} from 'react'; + +const Component = () => { + const mountsGlCanvas = useRef(); + useEffect(() => { + console.log('Hi there!'); + return () => { + console.log('Bye!'); + }; + }, []); + return ( +
+ +
+ ); +}; + +export default Component; + +// somewhere in canvas drawing code + +const ctx = mountsGlCanvas.current.getContext('2d', {alpha: false}); +ctx.fillStyle = `${svars.variableA}`; +``` + ## Contributing Please take a moment to read our contributing guidelines if you haven't yet done so. From f5639f9e361a26bd8a8a37a5fd918a0493987d82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 15:02:14 +0300 Subject: [PATCH 2/6] typo in variable name --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 996a077d..1ba88fbe 100644 --- a/README.md +++ b/README.md @@ -1316,7 +1316,7 @@ Using SCSS variables in JavaScript ```javascript import svars from 'variables.scss'; -ctx.fillStyle = `${svars.variableA}`; +ctx.fillStyle = `${svars.colorBackgroundCanvas}`; ``` @@ -1471,7 +1471,7 @@ export default Component; // somewhere in canvas drawing code const ctx = mountsGlCanvas.current.getContext('2d', {alpha: false}); -ctx.fillStyle = `${svars.variableA}`; +ctx.fillStyle = `${svars.colorBackgroundCanvas}`; ``` ## Contributing From 953f9404b3951d7dab8a4abbec381d2fe1091b89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 15:13:08 +0300 Subject: [PATCH 3/6] tab to space --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1ba88fbe..ce16b5b1 100644 --- a/README.md +++ b/README.md @@ -1438,7 +1438,7 @@ $colorBackground: red; ```scss @import "variables.scss"; .componentClass { - background-color: $colorBackground; + background-color: $colorBackground; } ``` From 7bfad028648116bf32e000fda327abb308719a09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 15:38:51 +0300 Subject: [PATCH 4/6] pass linting except for jsx --- README.md | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index ce16b5b1..bf0b989c 100644 --- a/README.md +++ b/README.md @@ -1244,12 +1244,13 @@ module.exports = { ``` -### Using `Interoperable CSS` features only +### 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** -```javascript +```js module.exports = { module: { rules: [ @@ -1291,13 +1292,12 @@ module.exports = { options: { sourceMap: true } - } - ] + }, + ], }, // -------- // ... - ] - } + }, }; ``` @@ -1313,11 +1313,9 @@ Using SCSS variables in JavaScript **app.js** -```javascript +```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 @@ -1337,7 +1335,7 @@ module.exports = { // SCSS GENERAL { test: /\.scss$/, - exclude: /\.module\.(scss)$/, + exclude: /\.module\.scss$/, use: [ { loader: 'style-loader', @@ -1370,8 +1368,8 @@ module.exports = { options: { sourceMap: true } - } - ] + }, + ], }, // -------- // SCSS MODULES @@ -1414,13 +1412,12 @@ module.exports = { options: { sourceMap: true } - } - ] + }, + ], }, // -------- // ... - ] - } + }, }; ``` @@ -1436,7 +1433,7 @@ $colorBackground: red; **Component.module.scss** ```scss -@import "variables.scss"; +@import 'variables.scss'; .componentClass { background-color: $colorBackground; } From 714b6dda2ee4b5bb7ff3b3bb255e36b13f75edbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 15:56:26 +0300 Subject: [PATCH 5/6] strip jsx to pass linting --- README.md | 30 +++++++----------------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index bf0b989c..98edbd8f 100644 --- a/README.md +++ b/README.md @@ -1441,33 +1441,17 @@ $colorBackground: red; **Component.jsx** -```javascript -'use strict'; - +```jsx import svars from 'variables.scss'; import styles from 'Component.module.scss'; -import React, {useRef, useEffect} from 'react'; - -const Component = () => { - const mountsGlCanvas = useRef(); - useEffect(() => { - console.log('Hi there!'); - return () => { - console.log('Bye!'); - }; - }, []); - return ( -
- -
- ); -}; - -export default Component; -// somewhere in canvas drawing code +// render DOM with CSS modules class name +//
+// +//
-const ctx = mountsGlCanvas.current.getContext('2d', {alpha: false}); +// somewhere in JavaScript canvas drawing code use the variable directly +// const ctx = mountsCanvas.current.getContext('2d',{alpha: false}); ctx.fillStyle = `${svars.colorBackgroundCanvas}`; ``` From 14e0c1edd53b5783b5f2caad6f88c49f413b8bb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinis=20Adovi=C4=8Ds=20/=20kroko?= Date: Wed, 12 Aug 2020 16:02:35 +0300 Subject: [PATCH 6/6] redundant newline --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 98edbd8f..0a8e0ef4 100644 --- a/README.md +++ b/README.md @@ -1243,7 +1243,6 @@ 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.