https://github.com/csstools/babel-plugin-import-postcss
Import processed CSS files in JS
https://github.com/csstools/babel-plugin-import-postcss
Last synced: 11 months ago
JSON representation
Import processed CSS files in JS
- Host: GitHub
- URL: https://github.com/csstools/babel-plugin-import-postcss
- Owner: csstools
- License: cc0-1.0
- Archived: true
- Created: 2019-03-07T14:32:19.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-10T11:39:15.000Z (almost 7 years ago)
- Last Synced: 2025-04-19T11:04:43.231Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 9
- Watchers: 5
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# babel-plugin-import-postcss [
][postcss]
[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]
[babel-plugin-import-postcss] is a [Babel] plugin that lets you import
[PostCSS] processed CSS in JS.
```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:
```bash
npm install babel-plugin-import-postcss --save-dev
```
Add [babel-plugin-import-postcss] to your Babel configuration:
```js
// babel.config.js
module.exports = {
plugins: [
'import-postcss'
]
}
```
It uses your existing PostCSS configuration:
```js
// 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:
```js
// 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.
```js
// 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.
```json
{
"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.
```js
// 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.
```js
// 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.
```js
// babel.config.js
module.exports = {
plugins: [
['import-postcss', {
map: {
inline: true
}
}]
]
}
```
[cli-img]: https://img.shields.io/travis/csstools/babel-plugin-import-postcss/master.svg
[cli-url]: https://travis-ci.org/csstools/babel-plugin-import-postcss
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/babel-plugin-import-postcss.svg
[npm-url]: https://www.npmjs.com/package/babel-plugin-import-postcss
[Babel]: https://babeljs.io/
[PostCSS]: https://github.com/postcss/postcss
[Process Options]: http://api.postcss.org/global.html#processOptions
[babel-plugin-import-postcss]: https://github.com/csstools/babel-plugin-import-postcss