Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

:global() css stopped working in CRA v3.

See original GitHub issue

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.

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:9 (4 by maintainers)

Top GitHub Comments

3reactions

mrmckebcommented, Aug 5, 2019

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

2reactions

MartijnHolscommented, Jul 27, 2019

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.