babel-plugin-transform-import-styles

Injects imported styles (.css or .less) into js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-transform-import-styles
110.0.115 years ago5 years agoMinified + gzip package size for babel-plugin-transform-import-styles in KB

Readme

Replaces import './styles.css' or import './styles.less' with a loader which injects styles to HTML head.
Currently works with .css and .less files (compiles .less to .css on the fly).
Afterwards all styles are processed by autoprefixer.
Requirements
babel 6, node >= 8
Installation & configuration
npm i --save-dev babel-plugin-transform-import-styles
npm i --save-dev load-styles # puts styles into the head
Usage
The following command will convert everything in the src folder to lib using babel and our plugin.
babel src/ -d lib/ --presets stage-0,env,react --plugins transform-import-styles
Every js file that has a statement such as:
import './Component.css'
where Component.css is
.root{color:red}

will be roughly translated to:
require('load-styles')(
`/* myCoolButtons */\n
.root{color:red}`
) // puts styles into the head
String myCoolButtons is taken from package.json -> name of current project.
In browser's HTML head there will be the following block:
<style>
/* myCoolButtons */
.root{color:red}
</style>

Example command to build a library using only babel:
babel src -s -D -d lib --presets es2015,stage-0,react --plugins transform-import-styles --ignore less,css,SCOPE.react.js,DOCUMENTATION.md --source-maps false
It will recursively transpile src directory and put all .css and .less files directly to .js files as descrived earlier. --ignore option is useful when you want to omit certain files in your production-ready build.
Use Cases
Bundling the css with js/react components. It is good for portability.
TODO
Support non-relative paths like import 'some-npm-package/whatever/path/style-name.css'.
Alternatives
- adds custom syntax - react specific - it isn't export { classes } friendly - breaks css-modules api (import jssObject from './style.css') - genarates classes hash-map too - cannot bundle css-modules in js