Repository files navigation

Rollup plugin that transforms inline styling with PostCSS

npm i rollup-plugin-inline-postcss --save-devyarn add rollup-plugin-inline-postcss --dev

importresolvefrom'rollup-plugin-node-resolve';importinlinePostCSSfrom'rollup-plugin-inline-postcss';exportdefault{input:'src/main.js',plugins:[resolve(),inlinePostCSS()],};

This plugin by default looks for a template literal in JavaScript (or TypeScript) and will process CSS found inside of the string. This is particularly useful for Web Components or other CSS in JavaScript situations. The default pattern is below. The regex can be configured by passing the styleRegex property in the plugin options.

css`:host {display: block;background:rgba(24,24,24,1);width:200px;height:200px;color: white;padding:1em;border-radius:8px;  }`

The default regex for selecting template literals in a file is:

/(?:css`)((.|\n)+?)(?=(`(\n|;|,)))/gi;

The lookahead in the above RegExp statement allows for multiple matches of styles in the same file.

Customize the regex that is used to parse inline CSS with thestyleRegex andstyleDelimiter options.

For example, to parse inline<style> tags:

inlinePostCSS({styleRegex:/(?:<style>)((.|\n)+?)(?=(<\/style>))/gi,styleDelimiter:/<\/?style>/g,});

This plugin honorspostcss.config.js in the root directory and will look for environment variables based on the currentNODE_ENV. The example postcss.config.js below demonstrates minifying CSS with thepostcss-csso plugin only when the NODE_ENV is set toprod.

module.exports=(ctx)=>({plugins:{'postcss-csso':ctx.env==='prod' ?{} :false,},});

npm run build compiles the plugin.

npm run test runs the tests.

npm run version versions the package, run withSEMVER environment variable et to eitherpatch,minor, ormajor.