Skip to content

Commit d3a91c6

Browse files
romainmenkeromainmenke
authored
postcss-slow-plugins (#1109)
1 parent b558c9c commit d3a91c6

22 files changed

+1817
-0
lines changed

‎.github/ISSUE_TEMPLATE/css-issue.yml

+1
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ body:
111111
- PostCSS Replace Overflow Wrap
112112
- PostCSS Scope Pseudo Class
113113
- PostCSS Selector Not
114+
- PostCSS Slow Plugins
114115
- PostCSS Stepped Value Functions
115116
- PostCSS System Ui Font Family
116117
- PostCSS Text Decoration Shorthand

‎.github/ISSUE_TEMPLATE/plugin-issue.yml

+1
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ body:
113113
- PostCSS Replace Overflow Wrap
114114
- PostCSS Scope Pseudo Class
115115
- PostCSS Selector Not
116+
- PostCSS Slow Plugins
116117
- PostCSS Stepped Value Functions
117118
- PostCSS System Ui Font Family
118119
- PostCSS Text Decoration Shorthand

‎.github/labeler.yml

+4
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,10 @@
249249
- plugins/postcss-selector-not/**
250250
- experimental/postcss-selector-not/**
251251

252+
"plugins/postcss-slow-plugins":
253+
- plugins/postcss-slow-plugins/**
254+
- experimental/postcss-slow-plugins/**
255+
252256
"plugins/postcss-system-ui-font-family":
253257
- plugins/postcss-system-ui-font-family/**
254258
- experimental/postcss-system-ui-font-family/**

‎package-lock.json

+29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/postcss-slow-plugins/.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
*.result.css
5+
*.result.css.map
6+
*.result.html

‎plugins/postcss-slow-plugins/.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v20.2.0

‎plugins/postcss-slow-plugins/.tape.mjs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { postcssTape } from '@csstools/postcss-tape';
2+
import plugin from '@csstools/postcss-slow-plugins';
3+
import postcssPresetEnv from 'postcss-preset-env';
4+
5+
await postcssTape(plugin)({
6+
basic: {
7+
message: "supports basic usage",
8+
plugins: [
9+
plugin({ ignore: ['postcss-oklab-function', 'autoprefixer'] }),
10+
postcssPresetEnv({ stage: 0, browsers: 'Chrome 90' }),
11+
],
12+
},
13+
});

‎plugins/postcss-slow-plugins/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changes to PostCSS Slow Plugins
2+
3+
### Unreleased (major)
4+
5+
- Initial version

‎plugins/postcss-slow-plugins/INSTALL.md

+235
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
# Installing PostCSS Slow Plugins
2+
3+
[PostCSS Slow Plugins] runs in all Node environments, with special instructions for:
4+
5+
- [Node](#node)
6+
- [PostCSS CLI](#postcss-cli)
7+
- [PostCSS Load Config](#postcss-load-config)
8+
- [Webpack](#webpack)
9+
- [Next.js](#nextjs)
10+
- [Gulp](#gulp)
11+
- [Grunt](#grunt)
12+
13+
14+
15+
## Node
16+
17+
Add [PostCSS Slow Plugins] to your project:
18+
19+
```bash
20+
npm install postcss @csstools/postcss-slow-plugins --save-dev
21+
```
22+
23+
Use it as a [PostCSS] plugin:
24+
25+
```js
26+
// commonjs
27+
const postcss = require('postcss');
28+
const postcssSlowPlugins = require('@csstools/postcss-slow-plugins');
29+
30+
postcss([
31+
postcssSlowPlugins(/* pluginOptions */)
32+
]).process(YOUR_CSS /*, processOptions */);
33+
```
34+
35+
```js
36+
// esm
37+
import postcss from 'postcss';
38+
import postcssSlowPlugins from '@csstools/postcss-slow-plugins';
39+
40+
postcss([
41+
postcssSlowPlugins(/* pluginOptions */)
42+
]).process(YOUR_CSS /*, processOptions */);
43+
```
44+
45+
## PostCSS CLI
46+
47+
Add [PostCSS CLI] to your project:
48+
49+
```bash
50+
npm install postcss-cli @csstools/postcss-slow-plugins --save-dev
51+
```
52+
53+
Use [PostCSS Slow Plugins] in your `postcss.config.js` configuration file:
54+
55+
```js
56+
const postcssSlowPlugins = require('@csstools/postcss-slow-plugins');
57+
58+
module.exports = {
59+
plugins: [
60+
postcssSlowPlugins(/* pluginOptions */)
61+
]
62+
}
63+
```
64+
65+
## PostCSS Load Config
66+
67+
If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
68+
69+
```bash
70+
npm install @csstools/postcss-slow-plugins --save-dev
71+
```
72+
73+
`package.json`:
74+
75+
```json
76+
{
77+
"postcss": {
78+
"plugins": {
79+
"@csstools/postcss-slow-plugins": {}
80+
}
81+
}
82+
}
83+
```
84+
85+
`.postcssrc.json`:
86+
87+
```json
88+
{
89+
"plugins": {
90+
"@csstools/postcss-slow-plugins": {}
91+
}
92+
}
93+
```
94+
95+
_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
96+
97+
## Webpack
98+
99+
_Webpack version 5_
100+
101+
Add [PostCSS Loader] to your project:
102+
103+
```bash
104+
npm install postcss-loader @csstools/postcss-slow-plugins --save-dev
105+
```
106+
107+
Use [PostCSS Slow Plugins] in your Webpack configuration:
108+
109+
```js
110+
module.exports = {
111+
module: {
112+
rules: [
113+
{
114+
test: /\.css$/i,
115+
use: [
116+
"style-loader",
117+
{
118+
loader: "css-loader",
119+
options: { importLoaders: 1 },
120+
},
121+
{
122+
loader: "postcss-loader",
123+
options: {
124+
postcssOptions: {
125+
plugins: [
126+
// Other plugins,
127+
[
128+
"@csstools/postcss-slow-plugins",
129+
{
130+
// Options
131+
},
132+
],
133+
],
134+
},
135+
},
136+
},
137+
],
138+
},
139+
],
140+
},
141+
};
142+
```
143+
144+
## Next.js
145+
146+
Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
147+
148+
```bash
149+
npm install @csstools/postcss-slow-plugins --save-dev
150+
```
151+
152+
Use [PostCSS Slow Plugins] in your `postcss.config.json` file:
153+
154+
```json
155+
{
156+
"plugins": [
157+
"@csstools/postcss-slow-plugins"
158+
]
159+
}
160+
```
161+
162+
```json5
163+
{
164+
"plugins": [
165+
[
166+
"@csstools/postcss-slow-plugins",
167+
{
168+
// Optionally add plugin options
169+
}
170+
]
171+
]
172+
}
173+
```
174+
175+
## Gulp
176+
177+
Add [Gulp PostCSS] to your project:
178+
179+
```bash
180+
npm install gulp-postcss @csstools/postcss-slow-plugins --save-dev
181+
```
182+
183+
Use [PostCSS Slow Plugins] in your Gulpfile:
184+
185+
```js
186+
const postcss = require('gulp-postcss');
187+
const postcssSlowPlugins = require('@csstools/postcss-slow-plugins');
188+
189+
gulp.task('css', function () {
190+
var plugins = [
191+
postcssSlowPlugins(/* pluginOptions */)
192+
];
193+
194+
return gulp.src('./src/*.css')
195+
.pipe(postcss(plugins))
196+
.pipe(gulp.dest('.'));
197+
});
198+
```
199+
200+
## Grunt
201+
202+
Add [Grunt PostCSS] to your project:
203+
204+
```bash
205+
npm install grunt-postcss @csstools/postcss-slow-plugins --save-dev
206+
```
207+
208+
Use [PostCSS Slow Plugins] in your Gruntfile:
209+
210+
```js
211+
const postcssSlowPlugins = require('@csstools/postcss-slow-plugins');
212+
213+
grunt.loadNpmTasks('grunt-postcss');
214+
215+
grunt.initConfig({
216+
postcss: {
217+
options: {
218+
processors: [
219+
postcssSlowPlugins(/* pluginOptions */)
220+
]
221+
},
222+
dist: {
223+
src: '*.css'
224+
}
225+
}
226+
});
227+
```
228+
229+
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
230+
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
231+
[PostCSS]: https://github.com/postcss/postcss
232+
[PostCSS CLI]: https://github.com/postcss/postcss-cli
233+
[PostCSS Loader]: https://github.com/postcss/postcss-loader
234+
[PostCSS Slow Plugins]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-slow-plugins
235+
[Next.js]: https://nextjs.org

‎plugins/postcss-slow-plugins/LICENSE.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
MIT No Attribution (MIT-0)
2+
3+
Copyright © CSSTools Contributors
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the “Software”), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
9+
of the Software, and to permit persons to whom the Software is furnished to do
10+
so.
11+
12+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
13+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
14+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
15+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
16+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
17+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18+
SOFTWARE.

0 commit comments

Comments
 (0)