🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

babel-plugin-transform-import-css

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

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

1.0.0-alpha.11
latest
Source
npm
Version published
Weekly downloads
625
-9.42%
Maintainers
1
Weekly downloads
 
Created
Source

Injects class map imported from css-modules into js.

Plugin respects webpack css-modules API and postcss config.

Requirements

  • babel == 7, node >= 8.
    Note. For babel@6 use previous version of plugin: 0.x.x
  • babel and postcss configs for best results

Installation & configuration

npm add -SD babel-plugin-transform-import-css

.babelrc example:

{
  "sourceMaps": "inline",
  "presets": [
    "@babel/env",
    "react"
  ],
  "plugins": [
    ["transform-import-css", {
      "generateScopedName": "lib-[name]-[local]-[hash:base64:4]"
    }]
  ]
}

Every js file that has a statement such as:

import classes from './Component.css'
// ... some code

will be transpiled to:

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

Api

  • generateScopedName — css-modules scope template. Default: [name]__[local]___[hash:base64:5]
  • configPath — postcss config path. Default: auto detect
  • ext — postcss files' extension. Typical use: ext: '.pcss'. Default: '.css'

Note. Plugin rely on some @babel/ peerDependencies, that are typically included in your project by @babel/core self.

Use Cases

Bundling the css with npm packed library of js/react components. It is good for portability.

TODO

  • babel@7
  • configPath and ext options
  • Compatibility with mini-css-extract-plugin and extract-text-webpack-plugin. babel-plugin-transform-import-css should skip require('load-styles')(css) inserting in that cases.
  • Support postcss configs in package.json
  • More flexible postcss config loader. (asynchronous postcss-load-config lib can't be used due to synchronous nature of the babel).

Alternatives

Sponsored with ❤️ by RocketBank

Russian Fintech startup

Keywords

babel

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