rollup-plugin-inline-postcss
Rollup plugin that transforms inline styling with PostCSS
Last updated 8 months ago by steveblue .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rollup-plugin-inline-postcss 
SYNC missed versions from official npm registry.

rollup-plugin-inline-postcss

Rollup plugin that transforms inline styling with PostCSS

Install

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

Usage

import resolve from 'rollup-plugin-node-resolve';
import inlinePostCSS from 'rollup-plugin-inline-postcss';

export default {
        input: 'src/main.js',
        plugins: [
            resolve(),
            inlinePostCSS()
        ]
    }

Options

Property Description
include Files to include
exclude Files to exclude
styleRegex Regex for selecting CSS in file

Template Literals in JavaScript

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 this template literal is:

/css\`((?:\\.|[^"\\])*)\`/g

Config

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

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

Current Tags

  • 1.0.1                                ...           latest (8 months ago)

2 Versions

  • 1.0.1                                ...           8 months ago
  • 1.0.0                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (5)
Dev Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |