postcss-deep-scopable

unified deep scoped style postcss plugin for vue

Note: This is not only supports a limited list of scoped less/sass|scss selectors but also supports custom selectors.

• /deep/
• >>>
• > > >
• your custom deep selectors

Installation

npm install --save postcss-deep-scopable

Usage

const postcss = require('postcss');
const postcssDeepScopable = require('postcss-deep-scopable');

postcss([ postcssDeepScopable() ]).process(myCss).css

// or add a custom deep css selector or selectors
postcss([ postcssDeepScopable('&scoped&') ]).process(myCss).css
postcss([ postcssDeepScopable(['&scoped&', '%reveal%']) ]).process(myCss).css

input example: custom selectors

// input scss/less...
&scoped& .app, %reveal% .main {
  text-align: center;
  color: red;
}

output example

// output css

::v-deep .app, ::v-deep .main {
  text-align: center;
  color: red;
}

License

MIT