@legacy-corp/postcss-extend-rule

    3.1.0 • Public • Published

    PostCSS Extend Rule PostCSS

    NPM Version Build Status Support Chat

    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-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;
    }

    Install

    npm i @legacy-corp/postcss-extend-rule

    DownloadsWeekly Downloads

    6

    Version

    3.1.0

    License

    CC0-1.0

    Unpacked Size

    44.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • aleksey.nemiro
    • alexey-cs