Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@blendle/rollup-plugin-postcss
Advanced tools
rollup-plugin-postcss
⚠ This is a (hopefully temporary) fork of egoist/rollup-plugin-postcss with a patch by christophehurpeau. ⚠
Seamless integration between Rollup and PostCSS.
Install
yarn add rollup-plugin-postcss --dev
Usage
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.
Extract CSS
postcss({
extract: true
})
CSS modules
postcss({
modules: true,
// Or with custom options for `postcss-modules`
modules: {}
})
With Sass/Stylus/Less
Install corresponding dependency:
- For
Sassinstallnode-sass:yarn add node-sass --dev - For
StylusInstallstylus:yarn add stylus --dev - For
LessInstallless:yarn add less --dev
That's it, you can now import .styl .scss .sass .less files in your library.
imports
For Sass/Scss Only.
Similar to how webpack's sass-loader works, you can prepend the path with ~ to tell this plugin to resolve in node_modules:
@import "~bootstrap/dist/css/bootstrap";
Options
extensions
Type: string[]
Default: ['.css', '.sss', '.pcss']
This plugin will process files ending with these extensions and the extensions supported by custom loaders.
plugins
Type: Array
PostCSS Plugins.
inject
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.
extract
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.
modules
Type: boolean object
Default: false
Enable CSS modules or set options for postcss-modules.
autoModules
Type: boolean
Default: true
Automatically enable CSS modules for .module.css .module.sss .module.scss .module.sass .module.styl .module.stylus .module.less files.
namedExports
Type: boolean function
Default: false
Use named exports alongside default export.
You can supply a function to control how exported named is generated:
namedExports(name) {
// Maybe you simply want to convert dash to underscore
return name.replace(/-/g, '_')
}
If you set it to true, the following will happen when importing specific classNames:
- dashed class names will be transformed by replacing all the dashes to
$sign wrapped underlines, eg.--=>$__$ - js protected names used as your style class names, will be transformed by wrapping the names between
$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
minimize
Type: boolean object
Default: false
Minimize CSS, boolean or options for cssnano.
sourceMap
Type: boolean "inline"
Enable sourceMap.
parser
Type: string function
PostCSS parser, like sugarss.
stringifier
Type: string function
PostCSS Stringifier.
syntax
Type: string function
PostCSS Syntax.
exec
Type: boolean
Enable PostCSS Parser support in CSS-in-JS.
config
Type: boolean object
Default: true
Load PostCSS config file.
config.path
Type: string
The path to config file, so that we can skip searching.
config.ctx
Type: object
ctx argument for PostCSS config file.
Note: Every keys you pass to config.ctx will be available under options inside
the postcss config.
// rollup.config.js
postcss({
config: {
ctx: {
foo: 'bar'
}
}
})
// postcss.config.js
module.exports = context => {
console.log(context.options.foo) // 'bar'
return {}
}
use
Type: name[] [name, options][]
Default: ['sass', 'stylus', 'less']
Use a loader, currently built-in loaders are:
sass(Support.scssand.sass)stylus(Support.styland.stylus)less(Support.less)
They are executed from right to left.
loaders
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
}
onImport
Type: id => void
A function to be invoked when an import for CSS file is detected.
License
MIT © EGOIST
FAQs
Seamless integration between Rollup and PostCSS
The npm package @blendle/rollup-plugin-postcss receives a total of 0 weekly downloads. As such, @blendle/rollup-plugin-postcss popularity was classified as not popular.
We found that @blendle/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.
Package last updated on 15 Nov 2018
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.
Related posts
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
By Sarah Gooding - Feb 04, 2025
Research
Security News
Go Supply Chain Attack: Malicious Package Exploits Go Module Proxy Caching for Persistence
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
By Kirill Boychenko - Feb 04, 2025