Non module css doesn't work with :local() in CRA 3.0
See original GitHub issueIs this a bug report?
Yes
Did you try recovering your dependencies?
Yes
Environment
Environment Info:
System:
OS: Linux 4.14 Manjaro Linux
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Binaries:
Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
Yarn: 1.15.2 - /usr/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-scripts: 3.0.0 => 3.0.0
npmGlobalPackages:
create-react-app: Not Found
Steps to Reproduce
(Write your steps here:)
- Have a non module css-file, e.g. MyStyle.css
- Have a class in said file as a
:local
scoped class, e.g.:local(.myClass) { ... }
- Import CSS file in a React-component, e.g.
import css from './MyStyle.css'
- Observe that the classname is not exported
Expected Behavior
That the css class has been given a random name and is available as a property on the css object, e.g. { myClass: "_2uhJkdnDbAceZ0gQC-r3vz" }
Actual Behavior
Object was empty: {}
Reproducible Demo
Source: https://github.com/almyy/local-classname-repro
Deployed example: https://almyy.github.io/local-classname-repro/
Issue Analytics
- State:
- Created 4 years ago
- Reactions:6
- Comments:15
Top Results From Across the Web
Can't import CSS/SCSS modules. TypeScript says "Cannot ...
In a webpack configuration that pipes *.scss files through sass-loader → css-loader → style-loader, there will be no content in the imported module, ......
Read more >Using CSS Modules in React - OpenReplay Blog
In React js, where classes function similarly to local variables in JavaScript, a CSS Module is just a .css file. It lessens React...
Read more >file-loader - webpack - JS.ORG
The file-loader resolves import / require() on a file into a url and emits the ... If false, the loader will return a...
Read more >Releases - styled-components
revert rollup upgrade to resolve issues with cjs<>es default import ... Fix usage of the "css" prop with the styled-components babel macro (relevant...
Read more >Component-Scoped Styles with CSS Modules - Gatsby
The CSS in a CSS module is no different than normal CSS, but the extension of the file is different to mark that...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@Maxou44 That is the approach they have recommended since CRA 2.0 but there is a very important distinction when using SCSS, it might not be applicable to you but to anyone else ending up here when googling. When you have a
module.scss
everythin is exported, even nested selectors.Consider this component:
With this SCSS (the old way):
With ``.module.scss` this would be identical to:
Which of course is pretty poor form, as you might have CSS leakage further down in your component tree if you ever use
.someSubClass
, but for us this is how most of the older CSS was written, making the migration a bit heavy.The “correct” way of doing the SCSS with sub-classes from the React component would look like this:
Which doesn’t look to bad, but if you use
classnames
you have to do this when working with conditional classes:Not stale.