babel-plugin-transform-inline-localize-css-import

babel-plugin-transform-inline-localize-css-import-import

Inline and localize import theme from './Component.css' to {classNames, code}.

This is similar to css modules localize as it will allow you to localize class names and animations.

Combining with substack/insert-css provides a simple solution component based website or libraries styling.

• Quickstart
• Configuration
• Test
• Dev
• Release

Quickstart

npm install babel-plugin-transform-inline-localize-css-import --save-dev

.babelrc

{
  "plugins": [
    ["babel-plugin-transform-inline-localize-css-import", {
      "localFormat": "$cssFilename__$token"
    }]
  ]
}

Component.js

import theme from './Component.css';

Component.css

.item {
  color: blue;
}

.itemSelected {
  color: yellow;
  animation-name: hide;
}

@keyframes hide {0%{opacity:0}}

babel Component.js

# var theme = {
#   classNames: {
#     item: 'Component__item',
#     itemSelected: 'Component__itemSelected'
#   },
#   code: 'Component__item \n{  color: blue}\n\nComponent__itemSelected \n{  color: yellow;\nanimation-name: Component__hide }\n\n@keyframes Component__hide {0%{opacity: 0}}'
# }

Configuration

• localFormat (string): How to localize tokens. Available variables:
  • $cssFilename: Filename, without extension, of the imported CSS file.
  • $jsFilename: Filename, without extension of the module JavaScript file.
  • $token: Current class name or animation-name to replace.

Test

Runs tests and lint.

npm test

Dev

Runs tests in watch mode.

npm run dev

Release

npm run release