New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

babel-plugin-transform-import-css

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-transform-import-css

Injects imported styles (css-modules) into js


Version published
Weekly downloads
482
increased by5.7%
Maintainers
1
Weekly downloads
 
Created

Injects class map imported from css-modules into js.

Plugin respects webpack css-modules API and postcss config.

Requirements

babel == 6, node >= 8

babel and postcss configs for best results

Installation & configuration

npm add -SD babel-plugin-transform-import-css
npm add load-styles # puts styles into the head

.babelrc example:

{
  "sourceMaps": "inline",
  "presets": [
    ["env", {
      "targets": { "browsers": ["last 2 Chrome versions", "last 1 Safari version"] },
      "useBuiltIns": false, "modules": false
    }],
    "stage-1", "react"
  ],
  "plugins": [
    ["transform-import-css", {
      "generateScopedName": "lib-[folder]-[name]-[local]-[hash:base64:4]"
    }]
  ]
}

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-css

Every js file that has a statement such as:

import classes from './Component.css'

will be roughly translated to:

var classes = {
    root: 'lib-foo-root-SFs0',
    // ...
}
require('load-styles')('.root{color:red}') // puts styles into the head

Api

  • generateScopedName optional css-modules scope template

Use Cases

Bundling the css with js/react components. It is good for portability.

Alternatives


Sponsored with ❤️ by RocketBank

Russian Fintech startup

FAQs

Package last updated on 23 May 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts