[Probably concerning upstream, but need reference where to create this report] SCSS Module color format gets changed during processing
See original GitHub issueDescribe the bug
Colors imported from SCSS Modules to JS code (and maybe also when used in SCSS, that would need further testing) behave erratically. They behave different during any of these combinations: During (react-scripts
) build
and production (start
), depending on the color (at least black compared to other primary colors, and primary colors when compared to non-primary), depending on the original color format (seems mostly hex-based colors vs others like hsl, rgb or rgba), depending on if they come from an scss-variable or are directly used.
Potentially also influenced by whether Typescript is used or not, didnt test that, I use typescript. Edit: Test by robv8r show that the usage of typescript or not has no significance
This problem probably doesnt concern you directly, but I’m not completely aware of what will get processed how, and as the end-user facing project I’d like you to at least forward me to the correct projects, as finding out the concerned projects isnt trivial and I might miss some, and/or annoy projects that dont have issues at all.
Did you try recovering your dependencies?
This behavior can be reproduced in a fresh setup, as will be shown below.
Which terms did you search for in User Guide?
None. I followed the official guides regarding scss usage and css modules to get here tho.
Environment
Executing this lead to errors. The one line without errors:
current version of create-react-app: 3.4.1
.
Elsewhise I use Manjaro Linux, x64, running these commands from a zsh, with yarn 1.x. The build errors were originally observed from the build generated by the docker-container node:lts-alpine (using already present yarn) that was later served by an nginx container. I looked at the pages with Firefox, Chrome and IE11.
Steps to reproduce
npx create-react-app scss-module-error --template typescript
yarn add node-sass
- create these files/ replace the original ones with them:
# ./test.module.css
:export {
simple-hash: #f00;
extended-hash: #ff0000;
extended_hash_black: #000000;
extended_hash_blue: #0000ff;
extended_hash_green: #008000;
hsl_green: hsl(120, 100%, 25%);
hsl: hsl(0, 100%, 50%);
rgb: rgb(255, 0, 0);
rgba: rgba(255, 0, 0, 1);
};
# ./test.module.scss
:export {
simple-hash: #f00;
extended-hash: #ff0000;
extended_hash_black: #000000;
extended_hash_blue: #0000ff;
extended_hash_green: #008000;
hsl_green: hsl(120, 100%, 25%);
hsl: hsl(0, 100%, 50%);
rgb: rgb(255, 0, 0);
rgba: rgba(255, 0, 0, 1);
};
# ./test_with_vars.module.scss
$simple_hash:#f00;
$extended_hash: #ff0000;
$extended_hash_black: #000000;
$extended_hash_blue: #0000ff;
$extended_hash_green: #008000;
$hsl_green: hsl(120, 100%, 25%);
:export {
simple-hash: $simple_hash;
extended-hash: $extended_hash;
extended_hash_black:$extended_hash_black;
extended_hash_blue:$extended_hash_blue;
extended_hash_green:$extended_hash_green;
hsl_green: $hsl_green;
hsl: hsl(0, 100%, 50%);
rgb: rgb(255, 0, 0);
rgba: rgba(255, 0, 0, 1);
};
# ./index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import * as css_imp from "./test.module.css";
import * as scss_imp from "./test.module.scss";
import * as scss_var_imp from "./test_with_vars.module.scss";
console.log("pure css:\n", css_imp, "\nscss:\n", scss_imp, "\nscss from vars:\n", scss_var_imp);
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
-
Execute
yarn run start
andyarn run build && npx serve build
-
Open the respective pages (localhost:3000 and :5000) in a browser and look at the log output.
Expected behavior
Colors preferably dont get processed, or if they have to at least reproducible between developement and production, as well as between scss-variables and different color formats.
Actual behavior
Left side: start
, right side: react-scripts build && npx run serve build
Reproducible demo
Edit:
Github repos provided by robv8r below:
(TS) https://github.com/robv8r/scss-module-error
(JS based) https://github.com/robv8r/scss-module-error-js
I think above steps should suffice, though if neccessary I can still do this later.
Issue Analytics
- State:
- Created 3 years ago
- Comments:8
Top GitHub Comments
Just for fun, I’ve created a repo that reproduces the error.
https://github.com/robv8r/scss-module-error
EDIT
I agree with you about this (most likely) being an upstream issue. Given that CSS variables are slightly-new, it wouldn’t surprise me to learn that mixing CSS variables and SCSS stuff would make it go boom.
UPDATE
I’ve also created a JS version that reproduces the error.
https://github.com/robv8r/scss-module-error-js
That’s my understanding as well. I’m glad that it’s an opt-in feature now.
I followed your example and got the same result. I can confirm that you, sir, have found a bug.
EDIT: Markdown error on my part.