Created
October 11, 2019 23:40
-
-
Save tyler-dot-earth/1a430fdbac19e8125b8a7a1593698e54 to your computer and use it in GitHub Desktop.
Rollup + rollup-plugin-postcss + babel-plugin-react-css-modules. I wanted to use `styleName` in a library that was using CSS modules but was encountering issues of generated scoped names being mismatched. This got babel and the css loader in-sync.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
``` | |
import postcss from 'rollup-plugin-postcss'; | |
import genericNames from 'generic-names'; | |
// ... | |
postcss({ | |
extract: true, | |
modules: { | |
// Special scoped name generation function used to sync | |
// babel-plugin-postcss-modules with rollup-plugin-postcss. | |
generateScopedName: (cssname, filepath) => { | |
// Generation logic basically adapted from here: | |
// https://github.com/gajus/babel-plugin-react-css-modules/blob/9fcb91f5c3d3b181d0087ab7de999ac2c9c1dd11/src/requireCssModule.js#L103-L109 | |
const generate = genericNames('[local]__[hash:base64:5]', { | |
context: 'src', | |
}); | |
return generate(cssname, filepath); | |
}, | |
}, | |
sourceMap: true, | |
}), |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment