3.0.0

Author: jonathantneal

.appveyor.yml

@@ -1,12 +1,11 @@
-node_modules
-index.*.js
-package-lock.json
-*.log*
-*.result.css
 .*
-!.appveyor.yml
 !.editorconfig
 !.gitignore
 !.rollup.js
 !.tape.js
 !.travis.yml
+*.log*
+*.result.css
+/index.*
+node_modules
+package-lock.json

.gitignore

@@ -1,15 +1,15 @@
 import babel from 'rollup-plugin-babel';
 
 export default {
-	input: 'index.js',
+	input: 'src/index.js',
 	output: [
-		{ file: 'index.cjs.js', format: 'cjs' },
-		{ file: 'index.es.js', format: 'es' }
+		{ file: 'index.js', format: 'cjs', sourcemap: true, strict: false },
+		{ file: 'index.mjs', format: 'esm', sourcemap: true, strict: false }
 	],
 	plugins: [
 		babel({
 			presets: [
-				['env', { modules: false, targets: { node: 4 } }]
+				['@babel/env', { modules: false, targets: { node: 8 } }]
 			]
 		})
 	]

.rollup.js

@@ -1,5 +1,8 @@
+const postcss = require('postcss');
+const postcssNesting = require('postcss-nesting');
+const postcssExtends = require('.');
+
 module.exports = {
-	'postcss-extend-rule': {
 		'basic': {
 			message: 'supports @extend usage'
 		},
@@ -23,49 +26,64 @@ module.exports = {
 		},
 		'advanced': {
 			message: 'supports mixed usage (with postcss-nesting)',
-			plugin: () => require('postcss')(
-				require('postcss-nesting'),
-				require('.')
-			)
+			plugin: postcss.plugin('postcss-extend-rule', () => {
+				const extendsTransformer = postcssExtends();
+				const nestingTransformer = postcssNesting();
+
+				return (...args) => {
+					nestingTransformer(...args);
+					extendsTransformer(...args);
+				};
+			})
 		},
 		'nested-media': {
 			'message': 'supports nested @media usage'
 		},
 		'nested-media:nesting-first': {
 			'message': 'supports nested @media usage when postcss-nesting runs first',
-			plugin: () => require('postcss')(
-				require('postcss-nesting'),
-				require('.')
-			)
+			plugin: postcss.plugin('postcss-extend-rule', () => {
+				const extendsTransformer = postcssExtends();
+				const nestingTransformer = postcssNesting();
+
+				return (...args) => {
+					nestingTransformer(...args);
+					extendsTransformer(...args);
+				};
+			})
 		},
 		'nested-media:nesting-second': {
 			'message': 'supports nested @medi usage when postcss-nesting runs second',
-			plugin: () => require('postcss')(
-				require('.'),
-				require('postcss-nesting')
-			)
+			plugin: postcss.plugin('postcss-extend-rule', () => {
+				const extendsTransformer = postcssExtends();
+				const nestingTransformer = postcssNesting();
+
+				return (...args) => {
+					extendsTransformer(...args);
+					nestingTransformer(...args);
+				};
+			})
 		},
-		'errors': {
+		'error': {
 			message: 'manages error-ridden usage'
 		},
-		'errors:ignore': {
+		'error:ignore': {
 			message: 'manages error-ridden usage with { onFunctionalSelector: "ignore", onRecursiveExtend: "ignore", onUnusedExtend: "ignore" } options',
 			options: {
 				onFunctionalSelector: 'ignore',
 				onRecursiveExtend: 'ignore',
 				onUnusedExtend: 'ignore'
 			}
 		},
-		'errors:warn': {
+		'error:warn': {
 			message: 'manages error-ridden usage with { onFunctionalSelector: "warn", onRecursiveExtend: "warn", onUnusedExtend: "warn" } options',
 			options: {
 				onFunctionalSelector: 'warn',
 				onRecursiveExtend: 'warn',
 				onUnusedExtend: 'warn'
 			},
-			warning: 6
+			warnings: 2
 		},
-		'errors:throw': {
+		'error:throw': {
 			message: 'manages error-ridden usage with { onFunctionalSelector: "throw", onRecursiveExtend: "throw", onUnusedExtend: "throw" } options',
 			options: {
 				onFunctionalSelector: 'throw',
@@ -76,7 +94,7 @@ module.exports = {
 				reason: 'Unused extend at-rule "some-non-existent-selector"'
 			}
 		},
-		'errors:throw-on-functional-selectors': {
+		'error:throw-on-functional-selectors': {
 			message: 'manages error-ridden usage with { onFunctionalSelector: "throw" } options',
 			options: {
 				onFunctionalSelector: 'throw'
@@ -85,5 +103,4 @@ module.exports = {
 				reason: 'Encountered functional selector "%test-placeholder"'
 			}
 		}
-	}
 };

.tape.js

@@ -3,7 +3,7 @@
 language: node_js
 
 node_js:
-  - 4
+  - 8
 
 install:
   - npm install --ignore-scripts

.travis.yml

@@ -26,7 +26,7 @@ scope and avoid unrelated commits.
    cd postcss-extend-rule
 
    # Assign the original repo to a remote called "upstream"
-   git remote add upstream [email protected]:jonathantneal/postcss-extend-rule.git
+   git remote add upstream [email protected]:csstools/postcss-extend-rule.git
 
    # Install the tools necessary for testing
    npm install

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# PostCSS Extend Rule [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+# PostCSS Extend Rule [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
 
 [![NPM Version][npm-img]][npm-url]
 [![Build Status][cli-img]][cli-url]
@@ -57,126 +57,35 @@
 
 ## Usage
 
-Add [PostCSS Extend Rule] to your build tool:
+Add [PostCSS Extend Rule] to your project:
 
 ```bash
 npm install postcss-extend-rule --save-dev
 ```
 
-#### Node
-
-Use [PostCSS Extend Rule] to process your CSS:
+Use **PostCSS Extend Rule** to process your CSS:
 
 ```js
-import postcssExtend from 'postcss-extend-rule';
+const postcssExtendRule = require('postcss-extend-rule');
 
-postcssExtend.process(YOUR_CSS, /* processOptions */ /*, pluginOptions */);
+postcssExtendRule.process(YOUR_CSS /*, processOptions, pluginOptions */);
 ```
 
-#### PostCSS
-
-Add [PostCSS] to your build tool:
-
-```bash
-npm install postcss --save-dev
-```
-
-Use [PostCSS Extend Rule] as a plugin:
+Or use it as a [PostCSS] plugin:
 
 ```js
-import postcss from 'gulp-postcss';
-import postcssExtend from 'postcss-extend-rule';
+const postcss = require('postcss');
+const postcssExtendRule = require('postcss-extend-rule');
 
 postcss([
-  postcssExtend(/* pluginOptions */)
-]).process(YOUR_CSS);
-```
-
-#### Webpack
-
-Add [PostCSS Loader] to your build tool:
-
-```bash
-npm install postcss-loader --save-dev
-```
-
-Use [PostCSS Extend Rule] in your Webpack configuration:
-
-```js
-import postcssExtend from 'postcss-extend-rule';
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          { loader: 'postcss-loader', options: {
-            ident: 'postcss',
-            plugins: () => [
-              postcssExtend(/* pluginOptions */)
-            ]
-          } }
-        ]
-      }
-    ]
-  }
-}
+  postcssExtendRule(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
 ```
 
-#### Gulp
+**PostCSS Extend Rule** runs in all Node environments, with special instructions for:
 
-Add [Gulp PostCSS] to your build tool:
-
-```bash
-npm install gulp-postcss --save-dev
-```
-
-Use [PostCSS Extend Rule] in your Gulpfile:
-
-```js
-import postcss from 'gulp-postcss';
-import postcssExtend from 'postcss-extend-rule';
-
-gulp.task('css', () => gulp.src('./src/*.css').pipe(
-  postcss([
-    postcssExtend(/* pluginOptions */)
-  ])
-).pipe(
-  gulp.dest('.')
-));
-```
-
-#### Grunt
-
-Add [Grunt PostCSS] to your build tool:
-
-```bash
-npm install grunt-postcss --save-dev
-```
-
-Use [PostCSS Extend Rule] in your Gruntfile:
-
-```js
-import postcssExtend from 'postcss-extend-rule';
-
-grunt.loadNpmTasks('grunt-postcss');
-
-grunt.initConfig({
-  postcss: {
-    options: {
-      use: [
-       postcssExtend(/* pluginOptions */)
-      ]
-    },
-    dist: {
-      src: '*.css'
-    }
-  }
-});
-```
+| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
+| --- | --- | --- | --- | --- | --- |
 
 ## Options
 
@@ -256,17 +165,14 @@ main {
 }
 ```
 
-[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-extend-rule.svg
-[cli-url]: https://travis-ci.org/jonathantneal/postcss-extend-rule
+[cli-img]: https://img.shields.io/travis/csstools/postcss-extend-rule/master.svg
+[cli-url]: https://travis-ci.org/csstools/postcss-extend-rule
 [git-img]: https://img.shields.io/badge/support-chat-blue.svg
 [git-url]: https://gitter.im/postcss/postcss
 [npm-img]: https://img.shields.io/npm/v/postcss-extend-rule.svg
 [npm-url]: https://www.npmjs.com/package/postcss-extend-rule
 
 [CSS Extend Rules Specification]: https://jonathantneal.github.io/specs/css-extend-rule/
 [Functional Selectors]: https://jonathantneal.github.io/specs/css-extend-rule/#functional-selector
-[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
-[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Loader]: https://github.com/postcss/postcss-loader
-[PostCSS Extend Rule]: https://github.com/jonathantneal/postcss-extend-rule
+[PostCSS Extend Rule]: https://github.com/csstools/postcss-extend-rule