jcmellado/rollup-plugin-postcss-shadow

README

rollup-plugin-postcss-shadow

Inline CSS styles inside shadow DOM with Rollup and PostCSS.

Installation

npm install --save-dev rollup-plugin-postcss-shadow

Usage

import cssshadow from 'rollup-plugin-postcss-shadow';

export default {
  entry: 'src/index.js',
  plugins: [
    cssshadow(),
  ]
}

Example

styles.css

:root {
  --badge: {      /* Custom properties set */
    width: 50px;
    height: 50px;
  };
  --color-gold:	#D4AF37;   /* Custom property */
  --color-silver: #C0C0C0;
  --color-bronze: #cd7f32;
}

.badge-gold {
  @apply --badge;                 /* Custom properties set reference */
  background: var(--color-gold);  /* Custom property reference */
}
.badge-silver {
  @apply --badge;
  background: var(--color-silver);
}
.badge-bronze {
  @apply --badge;
  background: var(--color-bronze);
}

component.js

import style from './styles.css';  // CSS import

export default class MyComponent extends BaseComponent {

  render() {  // JSX expression renderer to shadow DOM
    return ([
      <style>{style}</style>,   // CSS reference
      <div>
        <div class='badge-gold'></div>
        <div class='badge-silver'></div>
        <div class='badge-bronze'></div>
      </div>,
    ]);
  }

Result (cssnext and cssnano are applied in order get custom properties and @apply working and compress):

var style = ".badge-gold,.badge-silver,.badge-bronze{width:50px;height:50px}.badge-gold{background:#d4af37}.badge-silver{background:#C0C0C0}{background:#cd7f32}";

...

  createClass(MyComponent, [{
    key: 'render',
    value: function render() {
      return [Dom.create( // JSX expression renderer to shadow DOM
        'style',
        null,
        style // CSS reference
      ), Dom.create(
        'div',
        null,
        Dom.create(Badge, { 'class': 'badge-gold' }),
        Dom.create(Badge, { 'class': 'badge-silver' }),
        Dom.create(Badge, { 'class': 'badge-bronze' })
      )];

Note that CSS is inlined and its classes can be referenced by its original name. This approach is a bit different from css-modules as far we are using shadow DOM and locally scoped styles are not really necessary.

Options

import cssnano from 'cssnano';
import cssnext from 'postcss-cssnext';
import cssshadow from 'rollup-plugin-postcss-shadow';

export default {
  entry: 'src/index.js',
  plugins: [
    cssshadow({

      // File extensions (default [.css])
      extensions: ['.css', '.scss'],

      // PostCSS plugins (default [])
      plugins: [
        cssnext(),
        cssnano({
          autoprefixer: false,
        }),
      ],

      // PostCSS options (default undefined)
      // syntax: ...,
      // parser: ...,
      // stringifier: ..,
    }),
  ],
};

Heavily inspired by rollup-plugin-postcss.