Skip to content

Commit 003595e

Browse files
Antonio-Lagunaromainmenke
Antonio-Laguna
and
romainmenke
authored
PostCSS Stepped Value Functions (#356)
* WIP * Fixing tests and TypeScript node conversion * Adding round & more tests * Update plugins/postcss-stepped-value-functions/src/mod.ts Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * Update plugins/postcss-stepped-value-functions/src/rem.ts Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * Update plugins/postcss-stepped-value-functions/src/round.ts Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * Update plugins/postcss-stepped-value-functions/src/utils.ts Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * Updating docs and examples * Ensuring values are there on mod * More tests * More complex * Somewhat legit but broken * Linting * Linking to CSSDB * Updating labeler * Updating meta * Sorting this too * Update plugins/postcss-stepped-value-functions/docs/README.md Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * Update plugins/postcss-stepped-value-functions/package.json Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * Update plugins/postcss-stepped-value-functions/docs/README.md Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * Regenerating docs Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com>
1 parent 2edab4f commit 003595e

27 files changed

+1359
-1
lines changed

‎.github/labeler.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,5 +180,9 @@
180180
- plugins/postcss-unset-value/**
181181
- experimental/postcss-unset-value/**
182182

183+
"plugins/postcss-stepped-value-functions":
184+
- plugins/postcss-stepped-value-functions/**
185+
- experimental/postcss-stepped-value-functions/**
186+
183187
"sites/postcss-preset-env":
184188
- sites/postcss-preset-env/**

‎package-lock.json

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/postcss-base-plugin/package.json

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,17 @@
22
"name": "@csstools/postcss-base-plugin",
33
"description": "A base plugin",
44
"version": "0.0.0",
5-
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
5+
"contributors": [
6+
{
7+
"name": "Antonio Laguna",
8+
"email": "antonio@laguna.es",
9+
"url": "https://antonio.laguna.es"
10+
},
11+
{
12+
"name": "Romain Menke ",
13+
"email": "romainmenke@gmail.com"
14+
}
15+
],
616
"license": "CC0-1.0",
717
"funding": {
818
"type": "opencollective",

‎plugins/postcss-stepped-value-functions/.gitignore

Lines changed: 6 additions & 0 deletions
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+
dist/*

‎plugins/postcss-stepped-value-functions/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v16.13.1

‎plugins/postcss-stepped-value-functions/.tape.mjs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
2+
import plugin from '@csstools/postcss-stepped-value-functions';
3+
4+
postcssTape(plugin)({
5+
basic: {
6+
message: "supports basic usage",
7+
},
8+
'basic:on-invalid-warn': {
9+
message: 'supports { onInvalid: "warn" } usage',
10+
options: {
11+
onInvalid: 'warn'
12+
},
13+
warnings: 17,
14+
},
15+
'basic:preserve-true': {
16+
message: 'supports { preserve: true } usage',
17+
options: {
18+
preserve: true
19+
},
20+
},
21+
'examples/example': {
22+
message: 'minimal example',
23+
},
24+
'examples/example:preserve-true': {
25+
message: 'minimal example',
26+
options: {
27+
preserve: true
28+
}
29+
}
30+
});

‎plugins/postcss-stepped-value-functions/CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changes to PostCSS Stepped Value Functions
2+
3+
### 1.0.0 (Unreleased)
4+
5+
- Initial version

‎plugins/postcss-stepped-value-functions/INSTALL.md

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

0 commit comments

Comments
 (0)