Package Exports

postcss-extend-rule

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-extend-rule) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Extend Rule

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 build tool:

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

Node

Use PostCSS Extend Rule to process your CSS:

require('postcss-extend-rule').process(YOUR_CSS /*, PostCSS Options, Options */);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Extend Rule as a plugin:

postcss([
  require('postcss-extend-rule')(/* Options */)
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Extend Rule in your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      require('postcss-extend-rule')(/* Options */)
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Extend Rule in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        require('postcss-extend-rule')(/* Options */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Options

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

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

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