postcss-deep-scopable

unified deep style scoped postcss plugin for vue

Usage no npm install needed!

<script type="module">
  import postcssDeepScopable from 'https://cdn.skypack.dev/postcss-deep-scopable';
</script>

README

postcss-deep-scopable

npm version Build Status

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