Wondering what’s next for npm?Check out our public roadmap! »

    postcss-inherit

    4.1.0 • Public • Published

    PostCSS Inherit

    Build Status Code Climate Issue Count codecov Dependency Status Inline docs npm version


    Inherit plugin for PostCSS. Allows you to inherit all the rules associated with a given selector. Modeled after rework-inherit.

    API

    var postcss = require('postcss');
    var inherit = require('postcss-inherit')
     
    postcss([ inherit ])
      .process(css, { from: 'src/app.css', to: 'app.css' })
      .then(function (result) {
        fs.writeFileSync('app.css', result.css);
        if ( result.map ) fs.writeFileSync('app.css.map', result.map);
      });

    Inherit(options{})

    Option parameters:

    • propertyRegExp - Regular expression to match the "inherit" at-rule. By default, it is /^(inherit|extend)s?:?$/i, so it matches "inherit", "inherits", "extend", and "extends". For example, if you only want to allow the extend keyword, set the regular expression to /^extend$/.

    Examples

    Regular inherit

    .gray {
      color: gray;
    }
     
    .text {
      @inherit: .gray;
    }

    yields:

    .gray,
    .text {
      color: gray;
    }

    Multiple inherit

    Inherit multiple selectors at the same time.

    .gray {
      color: gray;
    }
     
    .black {
      color: black;
    }
     
    .button {
      @inherit: .gray, .black;
    }

    yields:

    .gray,
    .button {
      color: gray;
    }
     
    .black,
    .button {
      color: black;
    }

    Placeholders

    Any selector that includes a % is considered a placeholder. Placeholders will not be output in the final CSS.

    %gray {
      color: gray;
    }
     
    .text {
      @inherit: %gray;
    }

    yields:

    .text {
      color: gray;
    }

    Partial selectors

    If you inherit a selector, all rules that include that selector will be included as well.

    div button span {
      color: red;
    }
     
    div button {
      color: green;
    }
     
    button span {
      color: pink;
    }
     
    .button {
      @inherit: button;
    }
     
    .link {
      @inherit: div button;
    }

    yields:

    div button span,
    div .button span,
    .link span {
      color: red;
    }
     
    div button,
    div .button,
    .link {
      color: green;
    }
     
    button span,
    .button span {
      color: pink;
    }

    Chained inheritance

    .button {
      background-color: gray;
    }
     
    .button-large {
      @inherit: .button;
      padding: 10px;
    }
     
    .button-large-red {
      @inherit: .button-large;
      color: red;
    }

    yields:

    .button,
    .button-large,
    .button-large-red {
      background-color: gray;
    }
     
    .button-large,
    .button-large-red {
      padding: 10px;
    }
     
    .button-large-red {
      color: red;
    }

    Media Queries

    Inheriting from inside a media query will create a copy of the declarations. It will act like a "mixin". Thus, with %placeholders, you won't have to use mixins at all. Each type of media query will need its own declaration, so there will be some inevitable repetition.

    .gray {
      color: gray
    }
     
    @media (min-width: 320px) {
      .button {
        @inherit: .gray;
      }
    }
     
    @media (min-width: 320px) {
      .link {
        @inherit: .gray;
      }
    }

    yields:

    .gray {
      color: gray;
    }
     
    @media (min-width: 320px) {
      .button,
      .link {
        color: gray;
      }
    }

    Limitations

    • When in a media query, you can only inherit rules from root, or rules contained in a media query with the same parameters.

    Install

    npm i postcss-inherit

    DownloadsWeekly Downloads

    2,271

    Version

    4.1.0

    License

    Apache-2.0

    Unpacked Size

    32.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar