Skip to content

Commit 5a6e848

Browse files
jonathantnealjonathantneal
committed
2.0.0
1 parent b2a385a commit 5a6e848

File tree

7 files changed

+205
-138
lines changed

7 files changed

+205
-138
lines changed

‎.appveyor.yml

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎.gitignore

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
node_modules
2-
index.*.js
2+
index.*.*
33
package-lock.json
44
*.log*
55
*.result.css
66
.*
7-
!.appveyor.yml
87
!.editorconfig
98
!.gitignore
109
!.rollup.js

‎.rollup.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import babel from 'rollup-plugin-babel';
33
export default {
44
input: 'index.js',
55
output: [
6-
{ file: 'index.cjs.js', format: 'cjs' },
7-
{ file: 'index.es.js', format: 'es' }
6+
{ file: 'index.cjs.js', format: 'cjs', sourcemap: true },
7+
{ file: 'index.es.mjs', format: 'es', sourcemap: true }
88
],
99
plugins: [
1010
babel({
1111
presets: [
12-
['env', { modules: false, targets: { node: 4 } }]
12+
['@babel/env', { modules: false, targets: { node: 6 } }]
1313
]
1414
})
1515
]

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changes to PostCSS Lab Function
22

3+
### 2.0.0 (September 17, 2018)
4+
5+
- Updated: Support for PostCSS v7+
6+
- Updated: Support for Node v6+
7+
38
### 1.1.0 (July 24, 2018)
49

510
- Added: Support for `gray(a / b)` as `lab(a 0 0 / b)`

‎INSTALL.md

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# Installing PostCSS
2+
3+
[PostCSS Lab Function] runs in all Node environments, with special
4+
instructions for:
5+
6+
| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
7+
| --- | --- | --- | --- | --- | --- |
8+
9+
## Node
10+
11+
Add [PostCSS Lab Function] to your project:
12+
13+
```bash
14+
npm install postcss-lab-function --save-dev
15+
```
16+
17+
Use [PostCSS Lab Function] to process your CSS:
18+
19+
```js
20+
const postcssLabFunction = require('postcss-lab-function');
21+
22+
postcssLabFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
23+
```
24+
25+
Or use it as a [PostCSS] plugin:
26+
27+
```js
28+
const postcss = require('postcss');
29+
const postcssLabFunction = require('postcss-lab-function');
30+
31+
postcss([
32+
postcssLabFunction(/* pluginOptions */)
33+
]).process(YOUR_CSS /*, processOptions */);
34+
```
35+
36+
## PostCSS CLI
37+
38+
Add [PostCSS CLI] to your project:
39+
40+
```bash
41+
npm install postcss-cli --save-dev
42+
```
43+
44+
Use [PostCSS Lab Function] in your `postcss.config.js` configuration
45+
file:
46+
47+
```js
48+
const postcssLabFunction = require('postcss-lab-function');
49+
50+
module.exports = {
51+
plugins: [
52+
postcssLabFunction(/* pluginOptions */)
53+
]
54+
}
55+
```
56+
57+
## Webpack
58+
59+
Add [PostCSS Loader] to your project:
60+
61+
```bash
62+
npm install postcss-loader --save-dev
63+
```
64+
65+
Use [PostCSS Lab Function] in your Webpack configuration:
66+
67+
```js
68+
const postcssLabFunction = require('postcss-lab-function');
69+
70+
module.exports = {
71+
module: {
72+
rules: [
73+
{
74+
test: /\.css$/,
75+
use: [
76+
'style-loader',
77+
{ loader: 'css-loader', options: { importLoaders: 1 } },
78+
{ loader: 'postcss-loader', options: {
79+
ident: 'postcss',
80+
plugins: () => [
81+
postcssLabFunction(/* pluginOptions */)
82+
]
83+
} }
84+
]
85+
}
86+
]
87+
}
88+
}
89+
```
90+
91+
## Create React App
92+
93+
Add [React App Rewired] and [React App Rewire PostCSS] to your project:
94+
95+
```bash
96+
npm install react-app-rewired react-app-rewire-postcss --save-dev
97+
```
98+
99+
Use [React App Rewire PostCSS] and [PostCSS Lab Function] in your
100+
`config-overrides.js` file:
101+
102+
```js
103+
const reactAppRewirePostcss = require('react-app-rewire-postcss');
104+
const postcssLabFunction = require('postcss-lab-function');
105+
106+
module.exports = config => reactAppRewirePostcss(config, {
107+
plugins: () => [
108+
postcssLabFunction(/* pluginOptions */)
109+
]
110+
});
111+
```
112+
113+
## Gulp
114+
115+
Add [Gulp PostCSS] to your project:
116+
117+
```bash
118+
npm install gulp-postcss --save-dev
119+
```
120+
121+
Use [PostCSS Lab Function] in your Gulpfile:
122+
123+
```js
124+
const postcss = require('gulp-postcss');
125+
const postcssLabFunction = require('postcss-lab-function');
126+
127+
gulp.task('css', () => gulp.src('./src/*.css').pipe(
128+
postcss([
129+
postcssLabFunction(/* pluginOptions */)
130+
])
131+
).pipe(
132+
gulp.dest('.')
133+
));
134+
```
135+
136+
## Grunt
137+
138+
Add [Grunt PostCSS] to your project:
139+
140+
```bash
141+
npm install grunt-postcss --save-dev
142+
```
143+
144+
Use [PostCSS Lab Function] in your Gruntfile:
145+
146+
```js
147+
const postcssLabFunction = require('postcss-lab-function');
148+
149+
grunt.loadNpmTasks('grunt-postcss');
150+
151+
grunt.initConfig({
152+
postcss: {
153+
options: {
154+
use: [
155+
postcssLabFunction(/* pluginOptions */)
156+
]
157+
},
158+
dist: {
159+
src: '*.css'
160+
}
161+
}
162+
});
163+
```
164+
165+
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
166+
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
167+
[PostCSS]: https://github.com/postcss/postcss
168+
[PostCSS CLI]: https://github.com/postcss/postcss-cli
169+
[PostCSS Loader]: https://github.com/postcss/postcss-loader
170+
[PostCSS Lab Function]: https://github.com/jonathantneal/postcss-lab-function
171+
[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
172+
[React App Rewired]: https://github.com/timarney/react-app-rewired

‎README.md

Lines changed: 12 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
[![NPM Version][npm-img]][npm-url]
44
[![CSS Standard Status][css-img]][css-url]
55
[![Build Status][cli-img]][cli-url]
6-
[![Windows Build Status][win-img]][win-url]
76
[![Support Chat][git-img]][git-url]
87

98
[PostCSS Lab Function] lets you use `lab`, `lch`, and `gray` color functions in
@@ -29,126 +28,36 @@ CSS, following the [CSS Color] specification.
2928

3029
## Usage
3130

32-
Add [PostCSS Lab Function] to your build tool:
31+
Add [PostCSS Lab Function] to your project:
3332

3433
```bash
3534
npm install postcss-lab-function --save-dev
3635
```
3736

38-
#### Node
39-
4037
Use [PostCSS Lab Function] to process your CSS:
4138

4239
```js
43-
import postcssLabFunction from 'postcss-lab-function';
44-
45-
postcssLabFunction.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);
46-
```
47-
48-
#### PostCSS
40+
const postcssLabFunction = require('postcss-lab-function');
4941

50-
Add [PostCSS] to your build tool:
51-
52-
```bash
53-
npm install postcss --save-dev
42+
postcssLabFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
5443
```
5544

56-
Use [PostCSS Lab Function] as a plugin:
45+
Or use it as a [PostCSS] plugin:
5746

5847
```js
59-
import postcss from 'gulp-postcss';
60-
import postcssLabFunction from 'postcss-lab-function';
48+
const postcss = require('postcss');
49+
const postcssLabFunction = require('postcss-lab-function');
6150

6251
postcss([
6352
postcssLabFunction(/* pluginOptions */)
64-
]).process(YOUR_CSS);
65-
```
66-
67-
#### Webpack
68-
69-
Add [PostCSS Loader] to your build tool:
70-
71-
```bash
72-
npm install postcss-loader --save-dev
73-
```
74-
75-
Use [PostCSS Lab Function] in your Webpack configuration:
76-
77-
```js
78-
import postcssLabFunction from 'postcss-lab-function';
79-
80-
module.exports = {
81-
module: {
82-
rules: [
83-
{
84-
test: /\.css$/,
85-
use: [
86-
'style-loader',
87-
{ loader: 'css-loader', options: { importLoaders: 1 } },
88-
{ loader: 'postcss-loader', options: {
89-
ident: 'postcss',
90-
plugins: () => [
91-
postcssLabFunction(/* pluginOptions */)
92-
]
93-
} }
94-
]
95-
}
96-
]
97-
}
98-
}
53+
]).process(YOUR_CSS /*, processOptions */);
9954
```
10055

101-
#### Gulp
56+
[PostCSS Lab Function] runs in all Node environments, with special
57+
instructions for:
10258

103-
Add [Gulp PostCSS] to your build tool:
104-
105-
```bash
106-
npm install gulp-postcss --save-dev
107-
```
108-
109-
Use [PostCSS Lab Function] in your Gulpfile:
110-
111-
```js
112-
import postcss from 'gulp-postcss';
113-
import postcssLabFunction from 'postcss-lab-function';
114-
115-
gulp.task('css', () => gulp.src('./src/*.css').pipe(
116-
postcss([
117-
postcssLabFunction(/* pluginOptions */)
118-
])
119-
).pipe(
120-
gulp.dest('.')
121-
));
122-
```
123-
124-
#### Grunt
125-
126-
Add [Grunt PostCSS] to your build tool:
127-
128-
```bash
129-
npm install grunt-postcss --save-dev
130-
```
131-
132-
Use [PostCSS Lab Function] in your Gruntfile:
133-
134-
```js
135-
import postcssLabFunction from 'postcss-lab-function';
136-
137-
grunt.loadNpmTasks('grunt-postcss');
138-
139-
grunt.initConfig({
140-
postcss: {
141-
options: {
142-
use: [
143-
postcssLabFunction(/* pluginOptions */)
144-
]
145-
},
146-
dist: {
147-
src: '*.css'
148-
}
149-
}
150-
});
151-
```
59+
| [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) |
60+
| --- | --- | --- | --- | --- | --- |
15261

15362
## Options
15463

@@ -158,7 +67,7 @@ The `preserve` option determines whether the original functional color notation
15867
is preserved. By default, it is not preserved.
15968

16069
```js
161-
postcssImageSetFunction({ preserve: true })
70+
postcssLabFunction({ preserve: true })
16271
```
16372

16473
```pcss
@@ -185,8 +94,6 @@ postcssImageSetFunction({ preserve: true })
18594
[git-url]: https://gitter.im/postcss/postcss
18695
[npm-img]: https://img.shields.io/npm/v/postcss-lab-function.svg
18796
[npm-url]: https://www.npmjs.com/package/postcss-lab-function
188-
[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-lab-function.svg
189-
[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-lab-function
19097

19198
[CSS Color]: https://drafts.csswg.org/css-color/#specifying-lab-lch
19299
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss

0 commit comments

Comments
 (0)