Skip to content

Commit a71db91

Browse files
romainmenkeromainmenke
authored
postcss-logical-viewport-units (#780)
* postcss-logical-viewport-units * finish up * match other logical plugins
1 parent f8d2281 commit a71db91

36 files changed

+1134
-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 Logical Viewport Units
9091
- PostCSS Media Queries Aspect-Ratio Number Values
9192
- PostCSS Media Query Ranges
9293
- PostCSS Nested Calc

‎.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 Logical Viewport Units
9293
- PostCSS Media Queries Aspect-Ratio Number Values
9394
- PostCSS Media Query Ranges
9495
- PostCSS Nested Calc

‎.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-logical-viewport-units":
140+
- plugins/postcss-logical-viewport-units/**
141+
- experimental/postcss-logical-viewport-units/**
142+
139143
"plugins/media-queries-aspect-ratio-number-values":
140144
- plugins/postcss-media-queries-aspect-ratio-number-values/**
141145
- experimental/postcss-media-queries-aspect-ratio-number-values/**

‎package-lock.json

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

‎plugins/postcss-logical-viewport-units/.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-logical-viewport-units/.nvmrc

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

‎plugins/postcss-logical-viewport-units/.tape.mjs

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
2+
import plugin from '@csstools/postcss-logical-viewport-units';
3+
4+
postcssTape(plugin)({
5+
basic: {
6+
message: "supports basic usage",
7+
},
8+
'basic:hebrew': {
9+
message: "supports { inlineDirection: 'right-to-left' }",
10+
options: {
11+
inlineDirection: 'right-to-left'
12+
}
13+
},
14+
'basic:vertical': {
15+
message: "supports { inlineDirection: 'top-to-bottom' }",
16+
options: {
17+
inlineDirection: 'top-to-bottom'
18+
}
19+
},
20+
'examples/example': {
21+
message: 'minimal example',
22+
},
23+
'examples/example:vertical': {
24+
message: 'minimal example',
25+
options: {
26+
inlineDirection: 'top-to-bottom'
27+
}
28+
},
29+
'examples/example:preserve-false': {
30+
message: 'minimal example',
31+
options: {
32+
preserve: false
33+
}
34+
},
35+
});

‎plugins/postcss-logical-viewport-units/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changes to PostCSS Logical Viewport Units
2+
3+
### 1.0.0 (Unreleased)
4+
5+
- Initial version

‎plugins/postcss-logical-viewport-units/INSTALL.md

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

0 commit comments

Comments
 (0)