babel-plugin-transform-import-styles

    0.0.11 • Public • Published

    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

    Keywords

    Install

    npm i babel-plugin-transform-import-styles

    DownloadsWeekly Downloads

    84

    Version

    0.0.11

    License

    MIT

    Unpacked Size

    7.59 kB

    Total Files

    7

    Last publish

    Collaborators

    • egor.stambakio