- Notifications
You must be signed in to change notification settings - Fork54
Extract css class names from required css module files, so we can render it on server.
License
michalkvasnicak/babel-plugin-css-modules-transform
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🎉 Babel 6 and Babel 7 compatible
This Babel plugin finds allrequires for css module files and replace them with a hash where keys are class names and values are generated css class names.
This plugin is based on the fantasticcss-modules-require-hook.
This plugin is experimental, pull requests are welcome.
Do not run this plugin as part of webpack frontend configuration. This plugin is intended only for backend compilation.
/* test.css */.someClass {color: red;}
// component.jsconststyles=require('./test.css');console.log(styles.someClass);// transformed fileconststyles={'someClass':'Test__someClass___2Frqu'}console.log(styles.someClass);// prints Test__someClass___2Frqu
npm install --save-dev babel-plugin-css-modules-transformInclude plugin in.babelrc
{"plugins": ["css-modules-transform"]}With custom optionscss-modules-require-hook options
{"plugins":[["css-modules-transform",{"append":["npm-module-name","./path/to/module-exporting-a-function.js"],"camelCase":false,"createImportedName":"npm-module-name","createImportedName":"./path/to/module-exporting-a-function.js","devMode":false,"extensions":[".css",".scss",".less"],// list extensions to process; defaults to .css"generateScopedName":"[name]__[local]___[hash:base64:5]",// in case you don't want to use a function"generateScopedName":"./path/to/module-exporting-a-function.js",// in case you want to use a function"generateScopedName":"npm-module-name","hashPrefix":"string","ignore":"*css","ignore":"./path/to/module-exporting-a-function-or-regexp.js","preprocessCss":"./path/to/module-exporting-a-function.js","preprocessCss":"npm-module-name","processCss":"./path/to/module-exporting-a-function.js","processCss":"npm-module-name","processorOpts":"npm-module-name","processorOpts":"./path/to/module/exporting-a-plain-object.js","mode":"string","prepend":["npm-module-name","./path/to/module-exporting-a-function.js"],"extractCss":"./dist/stylesheets/combined.css"}]]}
When using this plugin with a preprocessor, you'll need to configure it as such:
// ./path/to/module-exporting-a-function.jsvarsass=require('node-sass');varpath=require('path');module.exports=functionprocessSass(data,filename){varresult;result=sass.renderSync({data:data,file:filename}).css;returnresult.toString('utf8');};
and then add any relevant extensions to your plugin config:
{"plugins":[["css-modules-transform",{"preprocessCss":"./path/to/module-exporting-a-function.js","extensions":[".css",".scss"]}]]}
When you publish a library, you might want to ship compiled css files as well tohelp integration in other projects.
An more complete alternative is to usebabel-plugin-webpack-loadersbut be aware that a new webpack instance is run for each css file, this has ahuge overhead. If you do not use fancy stuff, you might consider usingbabel-plugin-css-modules-transforminstead.
To combine all css files in a single file, give its name:
{"plugins":[["css-modules-transform",{"extractCss":"./dist/stylesheets/combined.css"}]]}
To extract all files in a single directory, give an object:
{"plugins":[["css-modules-transform",{"extractCss":{"dir":"./dist/stylesheets/","relativeRoot":"./src/","filename":"[path]/[name].css"}}]]}
Note thatrelativeRoot is used to resolve relative directory names, availableas[path] infilename pattern.
To keep import statements you should set optionkeepImport totrue. In this way, simultaneously with the converted values, the import will be described as unassigned call expression.
// beforeconststyles=require('./test.css');
// afterrequire('./test.css');conststyles={'someClass':'Test__someClass___2Frqu'}
- babel-plugin-transform-postcss - which supports async plugins and does not depend on
css-modules-require-hook.
MIT
About
Extract css class names from required css module files, so we can render it on server.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Contributors11
Uh oh!
There was an error while loading.Please reload this page.