Skip to content

Commit

Permalink
3.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
jonathantneal committed Jul 29, 2019
1 parent f0e23c2 commit 2a77465
Show file tree
Hide file tree
Showing 19 changed files with 163 additions and 237 deletions.
18 changes: 0 additions & 18 deletions .appveyor.yml

This file was deleted.

11 changes: 5 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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
8 changes: 4 additions & 4 deletions .rollup.js
Original file line number Diff line number Diff line change
@@ -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 } }]
]
})
]
Expand Down
57 changes: 37 additions & 20 deletions .tape.js
Original file line number Diff line number Diff line change
@@ -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'
},
Expand All @@ -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',
Expand All @@ -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'
Expand All @@ -85,5 +103,4 @@ module.exports = {
reason: 'Encountered functional selector "%test-placeholder"'
}
}
}
};
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
language: node_js

node_js:
- 4
- 8

install:
- npm install --ignore-scripts
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
126 changes: 16 additions & 110 deletions README.md
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Loading

0 comments on commit 2a77465

Please sign in to comment.