postcss-global-scope

PostCSS plugin that supports global scoping in nested rules.

Install

``bash
npm i -D postcss @cookie_gg/postcss-global-scope


or


yarn add -D postcss @cookie_gg/postcss-global-scope
`

Usage

You have to use this plugin with postcss-nested and set it after postcss-global-scope.

`js:postcss.config.js
module.exports = {
...
plugins: [
// other plugins...
['@cookie_gg/postcss-global-scope', {
skip: "-",
classes: ["dark", "light"]
}
]
]
...
}
`

`css:style.css
/ before /
main {
h1 {
:global(.dark) & {
color: blue;
}
}
}

/ after /
[class="dark"] main h1 {
color: blue;
}
`

Options

skip: String

> default: '-'

Define the skip syntax used to ignore portions of the shorthand.

classes: Array

> default: 'undefined'

You can use global scope on short type libe below.

`css:style.css
/ before /
main {
h1 {
color: white ^ black;
}
}

/ after /
[class*="dark"] main h1 {
color: dark;
}
[class*="light"] main h1 {
color: white;
}
`

cssModule: Boolean

> default: 'false'

If you use this plugin with css module, you don't need to use the function to parse :global(class).

strictScope: Boolean

> default: 'false'

If you set this option to true, global seclector will be strict like below.

`css:style.css
/ before /
main {
h1 {
color: white ^ black;
}
}

/ after /
[class="dark"] main h1 {
color: dark;
}
[class="light"] main h1 {
color: white;
}
``