Skip to content

Commit 11c7d50

Browse files
romainmenkeromainmenke
authored
postcss-media-queries-aspect-ratio-number-values (#699)
1 parent 89dfad5 commit 11c7d50

27 files changed

+1204
-0
lines changed

‎.github/ISSUE_TEMPLATE/css-issue.yml

+1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ body:
8787
- PostCSS Is Pseudo Class
8888
- PostCSS Lab Function
8989
- PostCSS Logical
90+
- PostCSS Media Queries Aspect-Ratio Number Values
9091
- PostCSS Media Query Ranges
9192
- PostCSS Nested Calc
9293
- PostCSS Nesting

‎.github/ISSUE_TEMPLATE/plugin-issue.yml

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ body:
8989
- PostCSS Is Pseudo Class
9090
- PostCSS Lab Function
9191
- PostCSS Logical
92+
- PostCSS Media Queries Aspect-Ratio Number Values
9293
- PostCSS Media Query Ranges
9394
- PostCSS Nested Calc
9495
- PostCSS Nesting

‎.github/labeler.yml

+4
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,10 @@
136136
- plugins/postcss-logical/**
137137
- experimental/postcss-logical/**
138138

139+
"plugins/postcss-media-queries-aspect-ratio-number-values":
140+
- plugins/postcss-media-queries-aspect-ratio-number-values/**
141+
- experimental/postcss-media-queries-aspect-ratio-number-values/**
142+
139143
"plugins/postcss-media-query-ranges":
140144
- plugins/postcss-media-query-ranges/**
141145
- experimental/postcss-media-query-ranges/**

‎package-lock.json

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

‎plugins/postcss-media-queries-aspect-ratio-number-values/.gitignore

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

‎plugins/postcss-media-queries-aspect-ratio-number-values/.nvmrc

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

‎plugins/postcss-media-queries-aspect-ratio-number-values/.tape.mjs

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
2+
import plugin from '@csstools/postcss-media-queries-aspect-ratio-number-values';
3+
4+
postcssTape(plugin)({
5+
basic: {
6+
message: "supports basic usage",
7+
},
8+
'basic:preserve-true': {
9+
message: "supports basic usage",
10+
options: {
11+
preserve: true
12+
}
13+
},
14+
'invalid': {
15+
message: "ignores invalid values",
16+
},
17+
'examples/example': {
18+
message: 'minimal example',
19+
},
20+
'examples/example:preserve-true': {
21+
message: 'minimal example',
22+
options: {
23+
preserve: true
24+
}
25+
},
26+
});

‎plugins/postcss-media-queries-aspect-ratio-number-values/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changes to PostCSS Media Queries Aspect-Ratio Number Values
2+
3+
### 1.0.0 (Unreleased)
4+
5+
- Initial version

‎plugins/postcss-media-queries-aspect-ratio-number-values/INSTALL.md

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

0 commit comments

Comments
 (0)