Create-react-app: :global() css stopped working in CRA v3.

[raRaRa]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes.
yarn 1.15.2

Which terms did you search for in User Guide?

global css modules
global styles

Environment

Environment:
OS: Windows 10
Node: 8.11.1
Yarn: 1.15.2
npm: 6.4.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5314842

Packages: (wanted => installed)
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-scripts: 3.0.0 => 3.0.0

Expected Behavior

I expected the global styles to work like previously.

On (CRA v2) I was using :global(a) { ... } in my index.scss file to set global style for links. After upgrading to CRA v3 it stopped working.

Actual Behavior

Global styles are ignored.

Reproducible Demo

https://codesandbox.io/s/20w902rmk0

I tried to create another demo to show it working on the previous CRA version, but it didn't work. Strange. Perhaps I misunderstood global styles, but I have no clue why it's been working for me for over a year until now.

[heyimalex]

I think that global directives are css-modules specific. If you're not in a .modules.css or .modules.scss file, then you're already in global scope, so what's the point?

[raRaRa]

I believe this was just a misunderstanding, for some reason I thought the global syntax was required. I just removed it and everything works fine. Just a little strange that it stopped working after the upgrade.

[heyimalex]

Hm, that is interesting. It's really strange that we can't repro on codesandbox though. Do you know what version of react-scripts you were using before upgrading?

[stevenjlho]

I have same issue. I am using 2.1.8 before upgrading to 3.0

[ievovk]

Well, looks likes it's still reproduced.
We used "react-scripts": "2.1.3" and after update to 3.0.1 :global() stop work.
Looks like best solution is rollback to stable version :( Or we need some alternative to :global() and :local() modifiers.

[heyimalex]

@ievovk It’s true this is breaking, but only if you were using global and local in a weird way. Regular css files are in “global” scope, css modules files are in “local” scope and have :global as an escape hatch. You should still be able to do everything you did before.

[ievovk]

@heyimalex Hi, yeah I decide just use regular css classes inside __global.scss file. But would be good if we will have opportunity to use :global() and :local() tricks again (^_^)

[MartijnHols]

I think this is due to updating css-loader to 2.0. Changelog: https://github.com/webpack-contrib/css-loader/releases/tag/v2.0.0

I noticed the PR that bumped the version did not make the required configuration change to make css files local scoped to avoid changing the behavior from the previous version; https://github.com/facebook/create-react-app/pull/6614/files#diff-28dda38a2b752a205b23cc9333c0fe45L37 This makes it an additional breaking change from CRA 2.

It seems what this effectively changed is that :global no longer works in regular (non module) (s)css files. What that means is that putting CSS in a non-module CSS file in a :global block will break that CSS entirely. It will not be applied to your elements. The difference with the previous version seems to be that the old behaviour didn't care for the :global block and applied your CSS anyway.

So to fix your CSS in CRA 3 remove the :global tag from non-module (S)CSS files.

[mrmckeb]

As @MartijnHols points out, I think this could be resolved via documentation rather than a code fix - but I'm open to other thoughts?