babel-plugin-import-postcss

babel-plugin-import-postcss

babel-plugin-import-postcss is a Babel plugin that lets you import PostCSS processed CSS in JS.

import styles from 'style.css'; // nav ul { list-style: none; padding-inline: 0; }

/* becomes (with postcss-preset-env) */

var styles = 'nav ul { list-style: none; padding-left: 0; padding-right: 0; }';

Usage

Add babel-plugin-import-postcss to your project:

npm install babel-plugin-import-postcss --save-dev

Add babel-plugin-import-postcss to your Babel configuration:

// babel.config.js
module.exports = {
  plugins: [
    'import-postcss'
  ]
}

It uses your existing PostCSS configuration:

// postcss.config.js
var postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv({ stage: 0 })
  ],
  map: { inline: true }
};

Alternatively, configure PostCSS directly within your Babel configuration:

// babel.config.js
var postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    ['import-postcss', {
      plugins: [
        postcssPresetEnv({ stage: 0 })
      ],
      map: { inline: true }
    }]
  ]
}

Options

plugins

The plugins option determines the PostCSS plugins used to process CSS.

// babel.config.js
var postcssImport = require('postcss-import');
var postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    ['import-postcss', {
      plugins: [
        postcssImport(),
        postcssPresetEnv({ stage: 0 })
      ],
      severity: 'ignore'
    }]
  ]
}

Plugins marked up as JSON are also supported.

{
  "plugins": [
    ["import-postcss", {
      "plugins": [
        "postcss-import",
        ["postcss-preset-env", { "stage": 0 }]
      ]
    }]
  ]
}

extensions

The extensions option determines which file extensions will be transformed by PostCSS. By default, any extension ending in css will be transformed.

// babel.config.js
module.exports = {
  plugins: [
    ['import-postcss', {
      extensions: 'scss',
      syntax: 'postcss-scss'
    }]
  ]
}

severity

The severity option determines how errors should be handled. By default errors are thrown. It is also possible to log errors as a warning, or to ignore all warnings.

// babel.config.js
module.exports = {
  plugins: [
    ['import-postcss', {
      severity: 'ignore'
    }]
  ]
}

Additional Options

Additional options as passed into PostCSS as Process Options. Some useful options include map for source map options and syntax for transforming Sass, Less, Stylus, etc.

// babel.config.js
module.exports = {
  plugins: [
    ['import-postcss', {
      map: {
        inline: true
      }
    }]
  ]
}