Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
babel-plugin-import-postcss
Advanced tools
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; }';
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 }
}]
]
}
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 }]
]
}]
]
}
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'
}]
]
}
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 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
}
}]
]
}
2.0.0 (May 24, 2019)
cosmiconfig
to 5.2.1 (patch)deasync
to 0.1.15 (patch)postcss
to 7.0.16 (patch)FAQs
Import processed CSS files in JS
The npm package babel-plugin-import-postcss receives a total of 15 weekly downloads. As such, babel-plugin-import-postcss popularity was classified as not popular.
We found that babel-plugin-import-postcss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.