Comments (7)
@wallzero I had to also specify context for generic-names
like
createGenerator('[local]-[hash:base64:5]', { context: 'src/client' }),
// ^
// |
// |
// |
// Without { context } it didn't work correctly
So now my babel.config.js looks +/- like below
const createGenerator = require('generic-names');
// ... later in the code where plugins are defined
[
'react-css-modules',
{
context: 'src/client',
filetypes: {
'.scss': {
syntax: 'postcss-scss',
plugins: [
[
'postcss-nested',
{
bubble: ['@include'],
preserveEmpty: true,
},
],
],
},
},
generateScopedName: createGenerator('[local]-[hash:base64:5]', { context: 'src/client' }),
webpackHotModuleReloading: env === 'development',
exclude: 'node_modules',
handleMissingStyleName: 'throw',
},
]
Hopefully it will help somebody.
The context
options is also mentioned in #279 (comment)
from babel-plugin-react-css-modules.
But still, the best way to solve this is an update of this package. LOL 😂
from babel-plugin-react-css-modules.
I just gave this a try and the hash in the JSX still failed to match the hash in the generated CSS. I tried with latest generic-names
and css-loader
. Mind you I am using a custom localIdentName
which matches my generateScopedName
: [local]-[hash:6]
.
from babel-plugin-react-css-modules.
I just gave this a try and the hash in the JSX still failed to match the hash in the generated CSS. I tried with latest
generic-names
andcss-loader
. Mind you I am using a customlocalIdentName
which matches mygenerateScopedName
:[local]-[hash:6]
.
Sorry to hear that. Have you checkout the name-generator of css in your builder like webpack to see if its using the newest generic-names
?
from babel-plugin-react-css-modules.
I've found out an approach that is more decent with yarn
.
If you're using yarn
as your package manager, try resolutions
property in the package.json
like:
{
"resolutions": {
"generic-names": "^3.0.0"
},
}
This force all packages in node_modules to use generic-names
in version 3, which ensure that the babel-plugin are using the same name generator with the builder (css generator).
from babel-plugin-react-css-modules.
I am not using yarn
but instead I tried npm-force-resolutions
and confirmed generic-names@^3
with npm list generic-names
. Even forcing the latest version on all packages and ensuring the same generateScopedName
is used, the hashes still don't match. Furthermore, I am using a shared Webpack configuration and resolutions
would need to be added to every downstream project.
For now I am just sticking with css-loader@^3.6.0
.
from babel-plugin-react-css-modules.
@hinok Thanks! I hadn't mentioned I had used the context parameter and I still couldn't get it to work. Although maybe it will help someone else. Like I said, I am using a shared configuration between projects and requiring downstream projects to resolve generic-names
isn't an option. Perhaps the shared configuration may also be why setting context was not working?
For now I am using the fork @dr.pogodin/babel-plugin-react-css-modules
and it is working well.
from babel-plugin-react-css-modules.
Related Issues (20)
- Whenever I use babel-plugin-react-css-modules, I get errors from babel-loader
- in production after bundle ,class name in css file not equal to it in html tags,very confusing .when styleName = 'className' appear this error but write className = {style.className} is disappear
- handleMissingStyleName and Runtime styleName
- didn't generate classname HOT 1
- set skip true, and current sub component no stylesheet, stylesheet from parent of parent less and output fail
- styleName compiled to stylename (lowercase)
- Not compatible with css-loader v4 HOT 28
- Typescript: styleName usage with @types/react@^17 HOT 4
- Upgrade postcss to 8 HOT 3
- setting attributeNames to "className": "className" will not output any classnames HOT 1
- Can I use webpack resolve.extensions = [".css"] and use import './table' instead of './table.css' in js HOT 1
- Plugin does't work after updating react-scripts to version 4.3.0 HOT 1
- [contenthash] generated by this plugin does not match the hash generated by css-loader 5.2.0 HOT 3
- Current master branch does not pass all tests HOT 7
- How to pass styles from component to child and grandchild at the same time
- Passing multiple style props to a child component HOT 1
- doesn't work with windicss
- doesn't work with thread-loader
- babel-plugin-react-css-modules doesn't recognize the @ path
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-react-css-modules.