Product
Socket Now Supports uv.lock Files
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
rollup-plugin-postcss
Advanced tools
rollup-plugin-postcss is a Rollup plugin that allows you to import and process CSS files with PostCSS. It supports various PostCSS plugins, CSS modules, and can even extract CSS into separate files.
Importing CSS
This feature allows you to import CSS files directly into your JavaScript or TypeScript files. The imported styles can then be used within your components.
import styles from './styles.css';
Using PostCSS Plugins
This feature allows you to use PostCSS plugins like autoprefixer to process your CSS. The example demonstrates how to configure the plugin to use autoprefixer.
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
postcss({
plugins: [
autoprefixer()
]
})
]
};
Extracting CSS
This feature allows you to extract CSS into a separate file instead of including it in the JavaScript bundle. The example shows how to configure the plugin to extract CSS.
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
postcss({
extract: true
})
]
};
CSS Modules
This feature allows you to use CSS Modules, which scope CSS by automatically creating unique class names. The example demonstrates how to enable CSS Modules in the plugin configuration.
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
postcss({
modules: true
})
]
};
rollup-plugin-css-only is a Rollup plugin that allows you to import CSS files and extract them into a separate file. Unlike rollup-plugin-postcss, it does not support PostCSS plugins or CSS Modules.
rollup-plugin-sass is a Rollup plugin that allows you to import and compile Sass/SCSS files. It supports extracting CSS into separate files and can be used in conjunction with PostCSS plugins. However, it is specifically designed for Sass/SCSS rather than general CSS processing.
rollup-plugin-styles is a versatile Rollup plugin that supports importing and processing CSS, Sass, Less, and Stylus files. It also supports PostCSS plugins and CSS Modules, making it a more comprehensive solution compared to rollup-plugin-postcss.
Seamless integration between Rollup and PostCSS.
yarn add rollup-plugin-postcss --dev
You are viewing the docs for v1.0
, for v0.5
please see here.
// rollup.config.js
import postcss from 'rollup-plugin-postcss'
export default {
plugins: [
postcss({
plugins: []
})
]
}
Then you can use CSS files:
import './style.css'
Note that the generated CSS will be injected to <head>
by default, and the CSS string is also available as default export unless extract: true
:
// Inject to `<head>` and also available as `style`
import style from './style.css'
It will also automatically use local PostCSS config files.
postcss({
extract: true
})
postcss({
modules: true,
// Or with custom options for `postcss-modules`
modules: {}
})
Install corresponding dependency:
Sass
install node-sass
: yarn add node-sass --dev
Stylus
Install stylus
: yarn add stylus --dev
Less
Install less
: yarn add less --dev
That's it, you can now import .styl
.scss
.sass
.less
files in your library.
Type: Array
PostCSS Plugins.
Type: boolean
object
Default: true
Inject CSS into <head>
, it's always false
when extract: true
.
You can also use it as options for style-inject
.
Type: boolean
string
Default: false
Extract CSS to the same location where JS file is generated but with .css
extension.
You can also set it to an absolute path.
Type: boolean
object
Default: false
Enable CSS modules or set options for postcss-modules
.
Type: boolean
Default: false
Use named exports alongside default export.
When importing specific classNames, the following will happen:
$
sign wrapped underlines, eg. --
=> $__$
$
signs, eg. switch
=> $switch$
All transformed names will be logged in your terminal like:
Exported "new" as "$new$" in test/fixtures/named-exports/style.css
The original will not be removed, it's still available on default
export:
import style, { class$_$name, class$__$name, $switch$ } from './style.css';
console.log(style['class-name'] === class$_$name) // true
console.log(style['class--name'] === class$__$name) // true
console.log(style['switch'] === $switch$) // true
Type: boolean
object
Default: false
Minimize CSS, boolean
or options for cssnano
.
Type: boolean
"inline"
Enable sourceMap.
Type: string
function
PostCSS parser, like sugarss
.
Type: string
function
PostCSS Stringifier.
Type: string
function
PostCSS Syntax.
Type: boolean
Enable PostCSS Parser support in CSS-in-JS
.
Type: boolean
object
Default: true
Load PostCSS config file.
Type: string
The path to config file, so that we can skip searching.
Type: object
ctx
argument for PostCSS config file.
Type: name[]
[name, options][]
Default: ['sass', 'stylus', 'less']
Use a loader, currently built-in loaders are:
sass
(Support .scss
and .sass
)stylus
(Support .styl
and .stylus
)less
(Support .less
)They are executed from right to left.
Type: Loader[]
An array of custom loaders, check out our sass-loader as example.
interface Loader {
name: string,
test: RegExp,
process: (this: Context, input: Payload) => Promise<Payload> | Payload
}
interface Context {
/** Loader options */
options: any
/** Sourcemap */
sourceMap: any
/** Resource path */
id: string
}
interface Payload {
/** File content */
code: string
/** Sourcemap */
map?: string | SourceMap
}
Type: id => void
A function to be invoked when an import for CSS file is detected.
MIT © EGOIST
FAQs
Seamless integration between Rollup and PostCSS
The npm package rollup-plugin-postcss receives a total of 259,165 weekly downloads. As such, rollup-plugin-postcss popularity was classified as popular.
We found that rollup-plugin-postcss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers 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
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.