Skip to content

Commit 78b35db

Browse files
romainmenkeromainmenke
authored
postcss-logical: add ignoreCustomProperties plugin option (#1573)
1 parent 8a741b9 commit 78b35db

16 files changed

+562
-405
lines changed

‎package-lock.json

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

‎plugin-packs/postcss-preset-env/test/logical-properties.css

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -200,46 +200,6 @@
200200
contain-intrinsic-width: inherit;
201201
}
202202

203-
.corner-shape {
204-
/* corner-bottom-left-shape */
205-
corner-bottom-left-shape: inherit;
206-
}
207-
208-
.corner-shape {
209-
/* corner-bottom-right-shape */
210-
corner-bottom-right-shape: inherit;
211-
}
212-
213-
.corner-shape {
214-
/* corner-end-end-shape */
215-
corner-end-end-shape: inherit;
216-
}
217-
218-
.corner-shape {
219-
/* corner-end-start-shape */
220-
corner-end-start-shape: inherit;
221-
}
222-
223-
.corner-shape {
224-
/* corner-start-end-shape */
225-
corner-start-end-shape: inherit;
226-
}
227-
228-
.corner-shape {
229-
/* corner-start-start-shape */
230-
corner-start-start-shape: inherit;
231-
}
232-
233-
.corner-shape {
234-
/* corner-top-left-shape */
235-
corner-top-left-shape: inherit;
236-
}
237-
238-
.corner-shape {
239-
/* corner-top-right-shape */
240-
corner-top-right-shape: inherit;
241-
}
242-
243203
.inset {
244204
/* bottom */
245205
bottom: inherit;

‎plugin-packs/postcss-preset-env/test/logical-properties.expect.css

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -200,46 +200,6 @@
200200
contain-intrinsic-width: inherit;
201201
}
202202

203-
.corner-shape {
204-
/* corner-bottom-left-shape */
205-
corner-bottom-left-shape: inherit;
206-
}
207-
208-
.corner-shape {
209-
/* corner-bottom-right-shape */
210-
corner-bottom-right-shape: inherit;
211-
}
212-
213-
.corner-shape {
214-
/* corner-end-end-shape */
215-
corner-end-end-shape: inherit;
216-
}
217-
218-
.corner-shape {
219-
/* corner-end-start-shape */
220-
corner-end-start-shape: inherit;
221-
}
222-
223-
.corner-shape {
224-
/* corner-start-end-shape */
225-
corner-start-end-shape: inherit;
226-
}
227-
228-
.corner-shape {
229-
/* corner-start-start-shape */
230-
corner-start-start-shape: inherit;
231-
}
232-
233-
.corner-shape {
234-
/* corner-top-left-shape */
235-
corner-top-left-shape: inherit;
236-
}
237-
238-
.corner-shape {
239-
/* corner-top-right-shape */
240-
corner-top-right-shape: inherit;
241-
}
242-
243203
.inset {
244204
/* bottom */
245205
bottom: inherit;

‎plugins/postcss-logical/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to PostCSS Logical Properties
22

3+
### Unreleased (minor)
4+
5+
- Add: `ignoreCustomProperties` plugin option.
6+
37
### 8.0.0
48

59
_August 3, 2024_

‎plugins/postcss-logical/README.md

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ instructions for:
6868

6969
## Options
7070

71-
### blockDirection & inlineDirection
71+
### `blockDirection` and `inlineDirection`
7272

7373
The `blockDirection` and `inlineDirection` options allow you to specify the direction of the block and inline axes. The default values are `top-to-bottom` and `left-to-right` respectively, which would match any latin language.
7474

@@ -120,6 +120,93 @@ You can't mix two vertical directions or two horizontal directions so for exampl
120120

121121
Please do note that `text-align` won't be transformed if `inlineDirection` becomes vertical.
122122

123+
### `ignoreCustomProperties`
124+
125+
The `ignoreCustomProperties` option allows you to ignore any properties containing `var()`.
126+
`postcss-logical` assumes that all custom properties are single value (e.g. `--foo: 10px;`) and will assign these to physical properties as fallbacks for logical properties.
127+
128+
This will produce broken declarations when your custom properties contain multiple values instead (e.g. `--foo: 1px 2px;`).
129+
130+
```css
131+
:root {
132+
--inset-a: 10px;
133+
}
134+
135+
.foo {
136+
inset: var(--inset-a);
137+
}
138+
139+
:root {
140+
--inset-b: 1px 2px 3px 4px;
141+
}
142+
143+
.bar {
144+
inset: var(--inset-b);
145+
}
146+
147+
/* becomes */
148+
149+
:root {
150+
--inset-a: 10px;
151+
}
152+
153+
.foo {
154+
top: var(--inset-a);
155+
right: var(--inset-a);
156+
bottom: var(--inset-a);
157+
left: var(--inset-a);
158+
}
159+
160+
:root {
161+
--inset-b: 1px 2px 3px 4px;
162+
}
163+
164+
.bar {
165+
top: var(--inset-b);
166+
right: var(--inset-b);
167+
bottom: var(--inset-b);
168+
left: var(--inset-b);
169+
}
170+
```
171+
172+
With `ignoreCustomProperties` set to `true`:
173+
174+
```css
175+
:root {
176+
--inset-a: 10px;
177+
}
178+
179+
.foo {
180+
inset: var(--inset-a);
181+
}
182+
183+
:root {
184+
--inset-b: 1px 2px 3px 4px;
185+
}
186+
187+
.bar {
188+
inset: var(--inset-b);
189+
}
190+
191+
/* becomes */
192+
193+
:root {
194+
--inset-a: 10px;
195+
}
196+
197+
.foo {
198+
inset: var(--inset-a);
199+
}
200+
201+
:root {
202+
--inset-b: 1px 2px 3px 4px;
203+
}
204+
205+
.bar {
206+
inset: var(--inset-b);
207+
}
208+
```
209+
123210
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
124211
[css-url]: https://cssdb.org/#logical-properties-and-values
125212
[discord]: https://discord.gg/bUadyRwkJS

‎plugins/postcss-logical/dist/index.cjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugins/postcss-logical/dist/index.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ export declare enum DirectionFlow {
1212

1313
/** postcss-logical plugin options */
1414
export declare type pluginOptions = {
15+
/** Ignore logical properties with values containing `var()` */
16+
ignoreCustomProperties?: true;
1517
/** Sets the direction for block. default: top-to-bottom */
1618
blockDirection?: DirectionFlow;
1719
/** Sets the direction for inline. default: left-to-right */

‎plugins/postcss-logical/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugins/postcss-logical/docs/README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
## Options
3535

36-
### blockDirection & inlineDirection
36+
### `blockDirection` and `inlineDirection`
3737

3838
The `blockDirection` and `inlineDirection` options allow you to specify the direction of the block and inline axes. The default values are `top-to-bottom` and `left-to-right` respectively, which would match any latin language.
3939

@@ -65,5 +65,30 @@ You can't mix two vertical directions or two horizontal directions so for exampl
6565

6666
Please do note that `text-align` won't be transformed if `inlineDirection` becomes vertical.
6767

68+
### `ignoreCustomProperties`
69+
70+
The `ignoreCustomProperties` option allows you to ignore any properties containing `var()`.
71+
`postcss-logical` assumes that all custom properties are single value (e.g. `--foo: 10px;`) and will assign these to physical properties as fallbacks for logical properties.
72+
73+
This will produce broken declarations when your custom properties contain multiple values instead (e.g. `--foo: 1px 2px;`).
74+
75+
```css
76+
<inset.css>
77+
78+
/* becomes */
79+
80+
<inset.expect.css>
81+
```
82+
83+
With `ignoreCustomProperties` set to `true`:
84+
85+
```css
86+
<inset.css>
87+
88+
/* becomes */
89+
90+
<inset.ignore-custom-properties.expect.css>
91+
```
92+
6893
<linkList>
6994
[CSS Logical Properties and Values]: <specUrl>

‎plugins/postcss-logical/src/index.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@ import { Axes, DirectionFlow } from './lib/types';
44
import { directionFlowToAxes } from './utils/direction-flow-to-axes';
55
import { transformTransition } from './lib/transform-transition';
66
import { prepareTransforms } from './lib/transforms';
7+
import { HAS_VARIABLE_FUNCTION_REGEX } from './utils/has-variable-function';
78

89
export type { DirectionFlow } from './lib/types';
910

1011
/** postcss-logical plugin options */
1112
export type pluginOptions = {
13+
/** Ignore logical properties with values containing `var()` */
14+
ignoreCustomProperties?: true,
1215
/** Sets the direction for block. default: top-to-bottom */
1316
blockDirection?: DirectionFlow,
1417
/** Sets the direction for inline. default: left-to-right */
@@ -59,6 +62,10 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
5962
return;
6063
}
6164

65+
if (options.ignoreCustomProperties && HAS_VARIABLE_FUNCTION_REGEX.test(decl.value)) {
66+
return;
67+
}
68+
6269
let transformed: Array<Declaration> = [];
6370

6471
try {
@@ -153,6 +160,10 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
153160
'border-end-start-radius': makeTransform(transforms['border-end-start-radius']),
154161
'border-end-end-radius': makeTransform(transforms['border-end-end-radius']),
155162
'transition': (decl, { result, postcss }): void => {
163+
if (options.ignoreCustomProperties && HAS_VARIABLE_FUNCTION_REGEX.test(decl.value)) {
164+
return;
165+
}
166+
156167
let transformed: Array<Declaration> = [];
157168

158169
try {

‎plugins/postcss-logical/src/utils/has-variable-function.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const HAS_VARIABLE_FUNCTION_REGEX = /var\(/i;

‎plugins/postcss-logical/test/_tape.mjs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,13 @@ postcssTape(plugin)({
8383
message: 'supports logical "offsets" properties',
8484
warnings: 3,
8585
},
86+
'offsets:ignore-custom-properties': {
87+
message: 'supports logical "offsets" properties { ignoreCustomProperties: true }',
88+
warnings: 3,
89+
options: {
90+
ignoreCustomProperties: true,
91+
},
92+
},
8693
'offsets:chinese': {
8794
message: 'supports logical "offsets" properties { blockDirection: "right-to-left", inlineDirection: "top-to-bottom" }',
8895
warnings: 3,
@@ -144,4 +151,13 @@ postcssTape(plugin)({
144151
inlineDirection: 'top-to-bottom',
145152
},
146153
},
154+
'examples/inset': {
155+
message: 'inset example',
156+
},
157+
'examples/inset:ignore-custom-properties': {
158+
message: 'inset example { ignoreCustomProperties: true }',
159+
options: {
160+
ignoreCustomProperties: true,
161+
},
162+
},
147163
});

‎plugins/postcss-logical/test/examples/inset.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
:root {
2+
--inset-a: 10px;
3+
}
4+
5+
.foo {
6+
inset: var(--inset-a);
7+
}
8+
9+
:root {
10+
--inset-b: 1px 2px 3px 4px;
11+
}
12+
13+
.bar {
14+
inset: var(--inset-b);
15+
}

‎plugins/postcss-logical/test/examples/inset.expect.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
:root {
2+
--inset-a: 10px;
3+
}
4+
5+
.foo {
6+
top: var(--inset-a);
7+
right: var(--inset-a);
8+
bottom: var(--inset-a);
9+
left: var(--inset-a);
10+
}
11+
12+
:root {
13+
--inset-b: 1px 2px 3px 4px;
14+
}
15+
16+
.bar {
17+
top: var(--inset-b);
18+
right: var(--inset-b);
19+
bottom: var(--inset-b);
20+
left: var(--inset-b);
21+
}

‎plugins/postcss-logical/test/examples/inset.ignore-custom-properties.expect.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
:root {
2+
--inset-a: 10px;
3+
}
4+
5+
.foo {
6+
inset: var(--inset-a);
7+
}
8+
9+
:root {
10+
--inset-b: 1px 2px 3px 4px;
11+
}
12+
13+
.bar {
14+
inset: var(--inset-b);
15+
}

0 commit comments

Comments
 (0)