@csstools/postcss-scope-pseudo-class

What is @csstools/postcss-scope-pseudo-class?

@csstools/postcss-scope-pseudo-class is a PostCSS plugin that allows you to scope CSS pseudo-classes to specific elements. This can be particularly useful for ensuring that styles are applied only within certain contexts, avoiding unintended side effects.

What are @csstools/postcss-scope-pseudo-class's main functionalities?

Scoping :hover pseudo-class

This feature allows you to scope the :hover pseudo-class to a specific element. In the example, the :hover pseudo-class is scoped to the .scope element, ensuring that the styles are only applied when .scope is hovered.

/* Input CSS */
.scope:hover .element {
  color: red;
}

/* Output CSS */
.scope:hover .scope .element {
  color: red;
}

Scoping :focus pseudo-class

This feature allows you to scope the :focus pseudo-class to a specific element. In the example, the :focus pseudo-class is scoped to the .scope element, ensuring that the styles are only applied when .scope is focused.

/* Input CSS */
.scope:focus .element {
  color: blue;
}

/* Output CSS */
.scope:focus .scope .element {
  color: blue;
}

Scoping :active pseudo-class

This feature allows you to scope the :active pseudo-class to a specific element. In the example, the :active pseudo-class is scoped to the .scope element, ensuring that the styles are only applied when .scope is active.

/* Input CSS */
.scope:active .element {
  color: green;
}

/* Output CSS */
.scope:active .scope .element {
  color: green;
}

Other packages similar to @csstools/postcss-scope-pseudo-class

postcss-nested

postcss-nested is a PostCSS plugin that allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. While it doesn't specifically scope pseudo-classes, it helps in organizing and scoping styles in a nested manner, which can indirectly achieve similar results.

postcss-custom-selectors

postcss-custom-selectors is a PostCSS plugin that allows you to define custom selectors. This can be used to create more complex and reusable selectors, including those involving pseudo-classes. However, it requires more manual setup compared to @csstools/postcss-scope-pseudo-class.

postcss-preset-env

postcss-preset-env allows you to use future CSS features today, including custom properties and nesting. While it doesn't specifically focus on scoping pseudo-classes, it provides a wide range of modern CSS features that can help in managing styles more effectively.

README

PostCSS Scope Pseudo Class

npm install @csstools/postcss-scope-pseudo-class --save-dev

PostCSS Scope Pseudo Class lets you use the :scope Pseudo-class following the Selectors 4 specification.

:scope {
	color: green;
}

/* becomes */

:root {
	color: green;
}

Usage

Add PostCSS Scope Pseudo Class to your project:

npm install postcss @csstools/postcss-scope-pseudo-class --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssScopePseudoClass = require('@csstools/postcss-scope-pseudo-class');

postcss([
	postcssScopePseudoClass(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Scope Pseudo Class runs in all Node environments, with special instructions for:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

postcssScopePseudoClass({ preserve: true })

:scope {
	color: green;
}

/* becomes */

:root {
	color: green;
}
:scope {
	color: green;
}