@benjamin-vanryseghem/rollup-plugin-postcss
Advanced tools
Readme
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 --devStylus Install stylus: yarn add stylus --devLess Install less: yarn add less --devThat's it, you can now import .styl .scss .sass .less files in your library.
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";
Type: string[]
Default: ['.css', '.sss', '.pcss']
This plugin will process files ending with these extensions and the extensions supported by custom loaders.
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: true
Automatically enable CSS modules for .module.css .module.sss .module.scss .module.sass .module.styl .module.stylus .module.less files.
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:
$ 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.
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 {}
}
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 @benjamin-vanryseghem/rollup-plugin-postcss receives a total of 1 weekly downloads. As such, @benjamin-vanryseghem/rollup-plugin-postcss popularity was classified as not popular.
We found that @benjamin-vanryseghem/rollup-plugin-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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.