Skip to content

csstools/postcss-extend-rule

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0e7cf97 · Dec 27, 2024

History

30 Commits
Dec 29, 2023
Dec 29, 2023
Dec 29, 2023
Dec 29, 2023
Sep 18, 2017
Dec 29, 2023
Feb 10, 2022
Feb 10, 2022
Jul 29, 2019
May 31, 2018
Feb 10, 2022
Dec 27, 2024
Dec 29, 2023
Dec 29, 2023

Repository files navigation

PostCSS Extend Rule PostCSS

NPM Version test Discord

PostCSS Extend Rule lets you use the @extend at-rule and Functional Selectors in CSS, following the speculative CSS Extend Rules Specification.

%thick-border {
  border: thick dotted red;
}

.serious-modal {
  font-style: normal;
  font-weight: bold;

  @media (max-width: 240px) {
    @extend .modal:hover;
  }
}

.modal {
  @extend %thick-border;

  color: red;
}

.modal:hover:not(:focus) {
  outline: none;
}

/* becomes */

.serious-modal {
  font-style: normal;
  font-weight: bold;
}

@media (max-width: 240px) {
  .serious-modal:not(:focus) {
    outline: none;
  }
}

.modal {
  border: thick dotted red;
  color: red;
}

.modal:hover:not(:focus) {
  outline: none;
}

Usage

Add PostCSS Extend Rule to your project:

npm install postcss postcss-extend-rule --save-dev

Use PostCSS Extend Rule to process your CSS:

const postcssExtendRule = require('postcss-extend-rule');

postcssExtendRule.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssExtendRule = require('postcss-extend-rule');

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

PostCSS Extend Rule runs in all Node environments, with special instructions for:

Node PostCSS CLI Webpack Create React App Gulp Grunt

Options

name

The name option determines the at-rule name being used to extend selectors. By default, this name is extend, meaning @extend rules are parsed.

postcssExtend({ name: 'postcss-extend' })

If the name option were changed to, say, postcss-extend, then only @postcss-extend at-rules would be parsed.

main {
  @postcss-extend .some-rule;
}

onFunctionalSelector

The onFunctionalSelector option determines how functional selectors should be handled. Its options are:

  • remove (default) removes any functional selector
  • ignore ignores any functional selector and moves on
  • warn warns the user whenever it encounters a functional selector
  • throw throws an error if ever it encounters a functional selector
postcssExtend({ onFunctionalSelector: 'remove' /* default */ })
%this-will-be-removed {}

onRecursiveExtend

The onRecursiveExtend option determines how recursive extend at-rules should be handled. Its options are:

  • remove (default) removes any recursive extend at-rules
  • ignore ignores any recursive extend at-rules and moves on
  • warn warns the user whenever it encounters a recursive extend at-rules
  • throw throws an error if ever it encounters a recursive extend at-rules
postcssExtend({ onRecursiveExtend: 'remove' /* default */ })
.this-will-not-extend-itself {
  @extend .this-will-not-extend-itself;
}

onUnusedExtend

The onUnusedExtend option determines how an unused extend at-rule should be handled. Its options are:

  • remove (default) removes any unused extend at-rule
  • ignore ignores any unused extend at-rule and moves on
  • warn warns the user whenever it encounters an unused extend at-rule
  • throw throws an error if ever it encounters an unused extend at-rule
postcssExtend({ onUnusedExtend: 'remove' /* default */ })
main {
  @extend .this-selector-does-not-exist-and-will-be-removed;
}