Skip to content

Commit a2c2268

Browse files
Antonio-Lagunaromainmenke
Antonio-Laguna
and
romainmenke
authored
PostCSS Global Data (#841)
* Creating new Plugin #834 * Clarifying doc * Linting * Update plugins/postcss-global-data/src/index.ts Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * Simpler tests * Update plugins/postcss-global-data/docs/README.md Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com> * remove unused examples * adding some keywords * linting * regenerating docs * examples are not mandatory --------- Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com>
1 parent 8c99405 commit a2c2268

27 files changed

+757
-1
lines changed

‎.github/ISSUE_TEMPLATE/css-issue.yml

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ body:
8181
- PostCSS Focus Within
8282
- PostCSS Font Variant
8383
- PostCSS Gap Properties
84+
- PostCSS Global Data
8485
- PostCSS Gradients Interpolation Method
8586
- PostCSS HWB Function
8687
- PostCSS Image Set Function

‎.github/ISSUE_TEMPLATE/plugin-issue.yml

+1
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ body:
8383
- PostCSS Focus Within
8484
- PostCSS Font Variant
8585
- PostCSS Gap Properties
86+
- PostCSS Global Data
8687
- PostCSS Gradients Interpolation Method
8788
- PostCSS HWB Function
8889
- PostCSS Image Set Function

‎.github/bin/generate-docs/readme.mjs

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@ const template = await fsp.readFile(path.join('docs', './README.md'), 'utf8');
66
const corsTemplate = await fsp.readFile(path.join(path.dirname(fileURLToPath(import.meta.url)), './cors-template.md'), 'utf8');
77
const packageJSONInfo = JSON.parse(await fsp.readFile('./package.json', 'utf8'));
88

9-
const exampleFilePaths = await fsp.readdir(path.join('test', 'examples'));
9+
let exampleFilePaths = [];
10+
11+
try {
12+
exampleFilePaths = await fsp.readdir(path.join('test', 'examples'));
13+
} catch(error) {
14+
// No examples
15+
}
1016

1117
let readmeDoc = template.toString();
1218

‎.github/labeler.yml

+4
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,10 @@
119119
- plugins/postcss-gap-properties/**
120120
- experimental/postcss-gap-properties/**
121121

122+
"plugins/postcss-global-data":
123+
- plugins/postcss-global-data/**
124+
- experimental/postcss-global-data/**
125+
122126
"plugins/postcss-gradients-interpolation-method":
123127
- plugins/postcss-gradients-interpolation-method/**
124128
- experimental/postcss-gradients-interpolation-method/**

‎package-lock.json

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

‎plugins/postcss-global-data/.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-global-data/.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v18.8.0

‎plugins/postcss-global-data/.tape.mjs

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { postcssTape } from '../../packages/postcss-tape/dist/index.mjs';
2+
import plugin from '@csstools/postcss-global-data';
3+
import postcssCustomMedia from 'postcss-custom-media';
4+
5+
postcssTape(plugin)({
6+
basic: {
7+
message: "supports basic usage",
8+
plugins: [
9+
plugin({
10+
files: [
11+
'./test/fixtures/fixture.css',
12+
]
13+
}),
14+
postcssCustomMedia(),
15+
],
16+
},
17+
});

‎plugins/postcss-global-data/CHANGELOG.md

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

‎plugins/postcss-global-data/INSTALL.md

+235
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
# Installing PostCSS Global Data
2+
3+
[PostCSS Global Data] 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 Global Data] to your project:
18+
19+
```bash
20+
npm install postcss @csstools/postcss-global-data --save-dev
21+
```
22+
23+
Use it as a [PostCSS] plugin:
24+
25+
```js
26+
// commonjs
27+
const postcss = require('postcss');
28+
const postcssGlobalData = require('@csstools/postcss-global-data');
29+
30+
postcss([
31+
postcssGlobalData(/* pluginOptions */)
32+
]).process(YOUR_CSS /*, processOptions */);
33+
```
34+
35+
```js
36+
// esm
37+
import postcss from 'postcss';
38+
import postcssGlobalData from '@csstools/postcss-global-data';
39+
40+
postcss([
41+
postcssGlobalData(/* 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-global-data --save-dev
51+
```
52+
53+
Use [PostCSS Global Data] in your `postcss.config.js` configuration file:
54+
55+
```js
56+
const postcssGlobalData = require('@csstools/postcss-global-data');
57+
58+
module.exports = {
59+
plugins: [
60+
postcssGlobalData(/* 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-global-data --save-dev
71+
```
72+
73+
`package.json`:
74+
75+
```json
76+
{
77+
"postcss": {
78+
"plugins": {
79+
"@csstools/postcss-global-data": {}
80+
}
81+
}
82+
}
83+
```
84+
85+
`.postcssrc.json`:
86+
87+
```json
88+
{
89+
"plugins": {
90+
"@csstools/postcss-global-data": {}
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-global-data --save-dev
105+
```
106+
107+
Use [PostCSS Global Data] 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-global-data",
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-global-data --save-dev
150+
```
151+
152+
Use [PostCSS Global Data] in your `postcss.config.json` file:
153+
154+
```json
155+
{
156+
"plugins": [
157+
"@csstools/postcss-global-data"
158+
]
159+
}
160+
```
161+
162+
```json5
163+
{
164+
"plugins": [
165+
[
166+
"@csstools/postcss-global-data",
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-global-data --save-dev
181+
```
182+
183+
Use [PostCSS Global Data] in your Gulpfile:
184+
185+
```js
186+
const postcss = require('gulp-postcss');
187+
const postcssGlobalData = require('@csstools/postcss-global-data');
188+
189+
gulp.task('css', function () {
190+
var plugins = [
191+
postcssGlobalData(/* 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-global-data --save-dev
206+
```
207+
208+
Use [PostCSS Global Data] in your Gruntfile:
209+
210+
```js
211+
const postcssGlobalData = require('@csstools/postcss-global-data');
212+
213+
grunt.loadNpmTasks('grunt-postcss');
214+
215+
grunt.initConfig({
216+
postcss: {
217+
options: {
218+
processors: [
219+
postcssGlobalData(/* 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 Global Data]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data
235+
[Next.js]: https://nextjs.org

0 commit comments

Comments
 (0)