Create-react-app: [Probably concerning upstream, but need reference where to create this report] SCSS Module color format gets changed during processing

[9SMTM6]

Describe 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

1. npx create-react-app scss-module-error --template typescript
2. yarn add node-sass
3. 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')
);

1. Execute yarn run start and yarn run build && npx serve build

2. 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.

[robv8r]

At the end of index.tsx, did you remove serviceWorker.unregister();

Edit

_Mea culpa_

I should have done the following before asking the above question.

I've tried both omitting and including serviceWorker.unregister(); from index.tsx. In both cases, my observations mirror those posted by @9SMTM6.

[9SMTM6]

Not really, it was distracting me on here and I did not believe that it was of significance. My tests were made with that in place. Maybe I was wrong about it being insignificant to this demonstration? But AFAIK these are mostly for PWA features, and shouldnt really matter on first execution.

Did you try this example yourself, and did it work as described or not?

[robv8r]

...AFAIK these are mostly for PWA features, and shouldn't really matter on first execution.

That's my understanding as well. I'm glad that it's an opt-in feature now.

Did you try this example yourself, and did it work as described or not?

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.

[robv8r]

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

[9SMTM6]

Well, it was more than fair to point out, I should've mentioned it or not omitted it just because.

Thank you very much for confirming my observations, testing for typescript influence and providing the repos, I've added the information to my opening post.

[9SMTM6]

Goddamnnit.... Too damn easy to misclick on the "comment and close" button IMAO.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.