Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
rollup-plugin-postcss
Advanced tools
Readme
Seamless integration between Rollup and PostCSS.
yarn add postcss rollup-plugin-postcss --dev
v2.0
support rollup v1 or above, but it prints deprecated warning from rollup v2.
Breaking change: v3.0
only support rollup v2, and the extract path based on bundle root
the location of the generated file outside the bundle directory not allowed in rollup v2.
// 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.
// for v2
postcss({
extract: true,
// Or with custom file name, it will generate file relative to bundle.js in v3
extract: 'dist/my-custom-file-name.css'
})
// for v3
import path from 'path'
postcss({
extract: true,
// Or with custom file name
extract: path.resolve('dist/my-custom-file-name.css')
})
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.
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
function(cssVariableName, fileId): string
Default: true
Inject CSS into <head>
, it's always false
when extract: true
.
You can also use it as options for style-inject
.
It can also be a function
, returning a string
which is js code.
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 key 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: string
Destination CSS filename hint that could be used by PostCSS plugins, for example, to properly resolve path, rebase and copy assets.
Type: name[]
[name, options][]
{ sass: options, stylus: options, less: 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.
If you pass the object
, then its property sass
, stylus
and less
will
be pass in the corresponding loader.
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
/** Files to watch */
dependencies: Set<string>
/** Emit a waring */
warn: PluginContext.warn
/** https://rollupjs.org/guide/en#plugin-context */
plugin: PluginContext
}
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
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.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).