From 68bd7d267343cfed1acd49ad91084a46872f8039 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 8 Jan 2023 12:04:59 +0100 Subject: [PATCH 1/4] feature/logical-revamp-v8 : feedback --- .../test/basic.autoprefixer.expect.css | 5 +--- .../test/basic.autoprefixer.false.expect.css | 5 +--- .../test/basic.ch38.expect.css | 5 +--- .../test/basic.ch88-ff78-saf10.expect.css | 5 +--- .../test/basic.ch88-ff78.expect.css | 5 +--- .../basic.ch88-ff78.no-is-pseudo.expect.css | 5 +--- .../postcss-preset-env/test/basic.css | 2 +- .../postcss-preset-env/test/basic.expect.css | 5 +--- .../test/basic.ff49.expect.css | 5 +--- .../test/basic.ff66.expect.css | 2 +- .../test/basic.ie10.expect.css | 5 +--- .../test/basic.nesting.false.expect.css | 5 +--- .../test/basic.nesting.true.expect.css | 2 +- .../test/basic.op_mini.expect.css | 5 +--- .../test/basic.preserve.true.expect.css | 16 ++---------- .../test/basic.safari15.expect.css | 2 +- .../test/basic.stage0-ff49.expect.css | 5 +--- .../test/basic.stage0-ff66.expect.css | 2 +- .../test/basic.stage0.expect.css | 5 +--- .../test/basic.vendors-1.expect.css | 5 +--- .../test/basic.vendors-2.expect.css | 5 +--- .../test/basic.vendors-3.expect.css | 5 +--- .../test/layers-basic.expect.css | 1 - .../layers-basic.preserve.true.expect.css | 1 - ...in-order-logical.after.preserve.expect.css | 2 -- ...n-order-logical.before.preserve.expect.css | 2 -- plugins/postcss-logical/dist/index.cjs | 2 +- plugins/postcss-logical/dist/index.mjs | 2 +- .../dist/lib/clone-declaration.d.ts | 2 +- .../dist/utils/parse-value-couple.d.ts | 2 +- plugins/postcss-logical/src/index.ts | 15 ++++++----- .../src/lib/clone-declaration.ts | 10 ++++++-- .../src/lib/transform-borders.ts | 12 ++++++--- .../src/lib/transform-inset.ts | 25 ++++++++++++------- .../src/lib/transform-logical-size.ts | 11 ++++---- .../src/lib/transform-offset.ts | 8 +++++- .../src/lib/transform-resize.ts | 15 +++++------ .../postcss-logical/src/lib/transform-side.ts | 10 ++++++-- .../src/lib/transform-text-align.ts | 15 +++++------ .../src/lib/transform-value.ts | 21 ++++++++-------- plugins/postcss-logical/src/lib/types.ts | 16 ++++++------ .../src/utils/parse-value-couple.ts | 12 ++++++--- .../test/offsets.chinese.expect.css | 16 ++++++++++++ plugins/postcss-logical/test/offsets.css | 16 ++++++++++++ .../postcss-logical/test/offsets.expect.css | 16 ++++++++++++ 45 files changed, 178 insertions(+), 160 deletions(-) diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index 2704d3c16..21631c8ee 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -518,10 +518,7 @@ right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index 2704d3c16..21631c8ee 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -518,10 +518,7 @@ right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index 04213207e..63cdda0ae 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -429,10 +429,7 @@ right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index 8e68bda3a..06a84a29b 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -455,10 +455,7 @@ h6.test-custom-selectors { right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index f3d9f5211..0366557f5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -455,10 +455,7 @@ h6.test-custom-selectors { right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index f3d9f5211..0366557f5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -455,10 +455,7 @@ h6.test-custom-selectors { right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index affd015c3..37870645c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -354,7 +354,7 @@ right: round(nearest, 2.5px, 1px); bottom: round(up, 2.5px, 1px); left: round(down, 2.5px, 1px); - inset: round(to-zero, 2.5px, 1px); + padding-left: round(to-zero, 2.5px, 1px); } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 40ce66722..85583607d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -536,10 +536,7 @@ right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index cf042f1f9..fc1d165e3 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -432,10 +432,7 @@ right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index 20b631dda..607f130a1 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -426,7 +426,7 @@ right: 3px; bottom: 3px; left: 2px; - inset: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index 3615cbdaa..1a3505d2d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -556,10 +556,7 @@ right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css index 74daf1a19..383a79b93 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -554,10 +554,7 @@ h6.test-custom-selectors { right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css index 8a0d33dff..ae7cd400a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css @@ -366,7 +366,7 @@ right: round(nearest, 2.5px, 1px); bottom: round(up, 2.5px, 1px); left: round(down, 2.5px, 1px); - inset: round(to-zero, 2.5px, 1px); + padding-left: round(to-zero, 2.5px, 1px); } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index 171b2b64e..1bd41ce6a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -545,10 +545,7 @@ h6.test-custom-selectors { right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index 64bb4fffb..a218b9784 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -975,20 +975,8 @@ h6.test-custom-selectors { bottom: round(up, 2.5px, 1px); left: 2px; left: round(down, 2.5px, 1px); - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; - inset: 2px; - top: 2px; - top: round(to-zero, 2.5px, 1px); - right: 2px; - right: round(to-zero, 2.5px, 1px); - bottom: 2px; - bottom: round(to-zero, 2.5px, 1px); - left: 2px; - left: round(to-zero, 2.5px, 1px); - inset: round(to-zero, 2.5px, 1px); + padding-left: 2px; + padding-left: round(to-zero, 2.5px, 1px); } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index ef318bf3c..3b079b4fd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -387,7 +387,7 @@ right: 3px; bottom: 3px; left: 2px; - inset: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index e6658d40b..4b21eabf7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -457,10 +457,7 @@ h6.test-custom-selectors { right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index 6c83bc5dc..a4df52f8b 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -451,7 +451,7 @@ h6.test-custom-selectors { right: 3px; bottom: 3px; left: 2px; - inset: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index b7efc3b3d..c93264c95 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -561,10 +561,7 @@ h6.test-custom-selectors { right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index c896caf96..aafbb19b6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -540,10 +540,7 @@ right: 3px; bottom: 3px; left: 2px; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; + padding-left: 2px; } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index b739b49b1..849ae5218 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -503,10 +503,7 @@ right: round(nearest, 2.5px, 1px); bottom: round(up, 2.5px, 1px); left: round(down, 2.5px, 1px); - top: round(to-zero, 2.5px, 1px); - right: round(to-zero, 2.5px, 1px); - bottom: round(to-zero, 2.5px, 1px); - left: round(to-zero, 2.5px, 1px); + padding-left: round(to-zero, 2.5px, 1px); } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index 26b6c901c..efb561cd7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -476,10 +476,7 @@ right: round(nearest, 2.5px, 1px); bottom: round(up, 2.5px, 1px); left: round(down, 2.5px, 1px); - top: round(to-zero, 2.5px, 1px); - right: round(to-zero, 2.5px, 1px); - bottom: round(to-zero, 2.5px, 1px); - left: round(to-zero, 2.5px, 1px); + padding-left: round(to-zero, 2.5px, 1px); } .trigonometric { diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css index 5640e17ea..3a631209e 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css @@ -813,5 +813,4 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n top: 2px; right: 2px; bottom: 2px; - left: 2px; } diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css index 019e9b19f..5eccf12a3 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css @@ -989,7 +989,6 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n top: 2px; right: 2px; bottom: 2px; - left: 2px; inset: 2px; top: 2px; top: round(to-zero, 2.5px, 1px); diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css index 17fe4bf3e..da3f9a965 100644 --- a/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css +++ b/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css @@ -1,10 +1,8 @@ .js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { - margin-left: 2px; margin-left: 2px; margin-inline-start: 2px; } .js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { - margin-left: 2px; margin-left: 2px; margin-inline-start: 2px; } diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css index 17fe4bf3e..da3f9a965 100644 --- a/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css +++ b/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css @@ -1,10 +1,8 @@ .js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { - margin-left: 2px; margin-left: 2px; margin-inline-start: 2px; } .js-has-pseudo [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { - margin-left: 2px; margin-left: 2px; margin-inline-start: 2px; } diff --git a/plugins/postcss-logical/dist/index.cjs b/plugins/postcss-logical/dist/index.cjs index 93b74c4db..3b3631c71 100644 --- a/plugins/postcss-logical/dist/index.cjs +++ b/plugins/postcss-logical/dist/index.cjs @@ -1 +1 @@ -"use strict";var r,o,t=require("postcss-value-parser");!function(r){r.Block="block",r.Inline="inline"}(r||(r={})),function(r){r.Start="start",r.End="end"}(o||(o={}));const n={BlockStart:`${r.Block}-${o.Start}`,BlockEnd:`${r.Block}-${o.End}`,InlineStart:`${r.Inline}-${o.Start}`,InlineEnd:`${r.Inline}-${o.End}`};var e,i;function cloneDeclaration(r,o,t){return r.cloneBefore({value:o,prop:t})}function parseValueCouple(r){const o=t(r.value).nodes.filter((r=>"space"!==r.type));if(o.length>2){const t=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected 1 or 2.`;throw new Error(t)}let n,e;return 1===o.length&&(n=t.stringify(o[0]),e=t.stringify(o[0])),2===o.length&&(n=t.stringify(o[0]),e=t.stringify(o[1])),[n,e]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[n,e]=o,[i,a]=parseValueCouple(t);return cloneDeclaration(t,i,`border-${n}-${r}`),cloneDeclaration(t,a,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let n;switch(t.prop.toLowerCase()){case"border-start-start-radius":n=`border-top-${r}-radius`;break;case"border-start-end-radius":n=`border-top-${o}-radius`;break;case"border-end-start-radius":n=`border-bottom-${r}-radius`;break;case"border-end-end-radius":n=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:n}=o,e=t(n),i=r.inlineIsHorizontal?"width":"height",a=r.inlineIsHorizontal?"height":"width",l="block-size"===o.prop?a:i;return cloneDeclaration(o,e.toString(),l),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,n]=r,[e,i]=parseValueCouple(o);return cloneDeclaration(o,e,t),cloneDeclaration(o,i,n),!0}}function transformResize(r){return o=>{const{prop:n,value:e}=o,i=t(e),a=r.inlineIsHorizontal?"horizontal":"vertical",l=r.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{const o=r.value.toLowerCase();if("word"===r.type){if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString()!==e;return s&&cloneDeclaration(o,i.toString(),n),s}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[n,e]=o,[i,a]=parseValueCouple(t);return cloneDeclaration(t,i,`${r}-${n}`),cloneDeclaration(t,a,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[t,e]=o.block,[i,a]=o.inline;switch(r){case n.BlockStart:return t;case n.BlockEnd:return e;case n.InlineStart:return i;case n.InlineEnd:return a}}function doTransform(r,o,n){const{prop:e,value:i}=r,a=t(i);return a.nodes.forEach((r=>{const t=r.value.toLowerCase();return"word"===r.type&&o.includes(t)&&(r.value=logicalToPhysical(t,n)),r})),a.toString()!==i&&(r.cloneBefore({prop:e,value:a.toString()}),!0)}function transformValueWithSingleDirection(o,t){return e=>{let i;return i=o===r.Block?[n.BlockStart,n.BlockEnd]:[n.InlineStart,n.InlineEnd],doTransform(e,i,t)}}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},a),s=Object.values(e);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;const n=o.parent;let e=!1;try{e=r(o)}catch(r){o.warn(t,r.message)}e&&(l.preserve||o.remove(),n.nodes.length||n.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((h=m,r=>doTransform(r,Object.values(n),h))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(g=m.inline,r=>{const{prop:n,value:e}=r,i=t(e),[a,l]=g;i.nodes.forEach((r=>{const t=r.value.toLowerCase();if("word"===r.type){if(t===o.End)return void(r.value=l);t===o.Start&&(r.value=a)}}));const s=i.toString()!==e;return s&&cloneDeclaration(r,i.toString(),n),s}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((r=>{const o=t(r.value).nodes.filter((r=>"space"!==r.type));if(o.length>4){const t=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected up to 4 values.`;throw new Error(t)}const n={top:"",right:"",bottom:"",left:""};return 1===o.length&&(n.top=t.stringify(o[0]),n.right=t.stringify(o[0]),n.bottom=t.stringify(o[0]),n.left=t.stringify(o[0])),2===o.length&&(n.top=t.stringify(o[0]),n.right=t.stringify(o[1]),n.bottom=t.stringify(o[0]),n.left=t.stringify(o[1])),3===o.length&&(n.top=t.stringify(o[0]),n.right=t.stringify(o[1]),n.left=t.stringify(o[1]),n.bottom=t.stringify(o[2])),4===o.length&&(n.top=t.stringify(o[0]),n.right=t.stringify(o[1]),n.bottom=t.stringify(o[2]),n.left=t.stringify(o[3])),Object.keys(n).forEach((o=>{cloneDeclaration(r,n[o],o)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var g,h};creator.postcss=!0,module.exports=creator; +"use strict";var r,o,t=require("postcss-value-parser");!function(r){r.Block="block",r.Inline="inline"}(r||(r={})),function(r){r.Start="start",r.End="end"}(o||(o={}));const e={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var n,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(r){const o=t(r.value),e=o.nodes.filter((r=>"space"!==r.type)),n=o.nodes.find((r=>"function"===r.type&&"var"===r.value.toLowerCase()));if(e.length>2){const o=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${e.length} values, expected 1 or 2.`;throw r.error(o)}let i,a;if(1===e.length){if(n)return;i=t.stringify(e[0]),a=t.stringify(e[0])}return 2===e.length&&(i=t.stringify(e[0]),a=t.stringify(e[1])),[i,a]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[e,n]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`border-${e}-${r}`),cloneDeclaration(t,l,`border-${n}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let e;switch(t.prop.toLowerCase()){case"border-start-start-radius":e=`border-top-${r}-radius`;break;case"border-start-end-radius":e=`border-top-${o}-radius`;break;case"border-end-start-radius":e=`border-bottom-${r}-radius`;break;case"border-end-end-radius":e=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,e),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,e=r.inlineIsHorizontal?"width":"height",n=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?n:e),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,e]=r,n=parseValueCouple(o);if(!n)return;const[i,a]=n;return cloneDeclaration(o,i,t),cloneDeclaration(o,a,e),!0}}function transformResize(r){return o=>{const{prop:e,value:n}=o,i=t(n),a=r.inlineIsHorizontal?"horizontal":"vertical",l=r.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==n&&(cloneDeclaration(o,s,e),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[e,n]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`${r}-${e}`),cloneDeclaration(t,l,`${r}-${n}`),!0}}function logicalToPhysical(r,o){const[t,n]=o.block,[i,a]=o.inline;switch(r){case e.BlockStart:return t;case e.BlockEnd:return n;case e.InlineStart:return i;case e.InlineEnd:return a}}function doTransform(r,o,e){const{prop:n,value:i}=r,a=t(i);a.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();o.includes(t)&&(r.value=logicalToPhysical(t,e))}}));const l=a.toString();return l!==i&&(cloneDeclaration(r,l,n),!0)}function transformValueWithSingleDirection(o,t){return n=>{let i;return i=o===r.Block?[e.BlockStart,e.BlockEnd]:[e.InlineStart,e.InlineEnd],doTransform(n,i,t)}}function directionFlowToAxes(r){switch(r){case n.TopToBottom:return[i.Top,i.Bottom];case n.BottomToTop:return[i.Bottom,i.Top];case n.RightToLeft:return[i.Right,i.Left];case n.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(n||(n={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:n.TopToBottom,inlineDirection:n.LeftToRight},a),s=Object.values(n);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[n.LeftToRight,n.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let e=!1;try{e=r(o)}catch(r){return void o.warn(t,r.message)}e&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(e),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,r=>{const{prop:e,value:n}=r,i=t(n),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();if(t===o.End)return void(r.value=l);t===o.Start&&(r.value=a)}}));const s=i.toString();return s!==n&&(cloneDeclaration(r,s,e),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((r=>{const o=t(r.value),e=o.nodes.filter((r=>"space"!==r.type&&"comment"!==r.type)),n=o.nodes.find((r=>"function"===r.type&&"var"===r.value.toLowerCase()));if(e.length>4){const o=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${e.length} values, expected up to 4 values.`;throw r.error(o)}const i={top:"",right:"",bottom:"",left:""};if(!n||4===e.length)return 1===e.length&&(i.top=t.stringify(e[0]),i.right=i.top,i.bottom=i.top,i.left=i.top),2===e.length&&(i.top=t.stringify(e[0]),i.right=t.stringify(e[1]),i.bottom=i.top,i.left=i.right),3===e.length&&(i.top=t.stringify(e[0]),i.right=t.stringify(e[1]),i.left=i.right,i.bottom=t.stringify(e[2])),4===e.length&&(i.top=t.stringify(e[0]),i.right=t.stringify(e[1]),i.bottom=t.stringify(e[2]),i.left=t.stringify(e[3])),Object.keys(i).forEach((o=>{cloneDeclaration(r,i[o],o)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-logical/dist/index.mjs b/plugins/postcss-logical/dist/index.mjs index 53764a9ac..17aabc367 100644 --- a/plugins/postcss-logical/dist/index.mjs +++ b/plugins/postcss-logical/dist/index.mjs @@ -1 +1 @@ -import r from"postcss-value-parser";var o,t;!function(r){r.Block="block",r.Inline="inline"}(o||(o={})),function(r){r.Start="start",r.End="end"}(t||(t={}));const n={BlockStart:`${o.Block}-${t.Start}`,BlockEnd:`${o.Block}-${t.End}`,InlineStart:`${o.Inline}-${t.Start}`,InlineEnd:`${o.Inline}-${t.End}`};var e,i;function cloneDeclaration(r,o,t){return r.cloneBefore({value:o,prop:t})}function parseValueCouple(o){const t=r(o.value).nodes.filter((r=>"space"!==r.type));if(t.length>2){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${t.length} values, expected 1 or 2.`;throw new Error(r)}let n,e;return 1===t.length&&(n=r.stringify(t[0]),e=r.stringify(t[0])),2===t.length&&(n=r.stringify(t[0]),e=r.stringify(t[1])),[n,e]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[n,e]=o,[i,a]=parseValueCouple(t);return cloneDeclaration(t,i,`border-${n}-${r}`),cloneDeclaration(t,a,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let n;switch(t.prop.toLowerCase()){case"border-start-start-radius":n=`border-top-${r}-radius`;break;case"border-start-end-radius":n=`border-top-${o}-radius`;break;case"border-end-start-radius":n=`border-bottom-${r}-radius`;break;case"border-end-end-radius":n=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,n),!0}}function transformLogicalSize(o){return t=>{const{value:n}=t,e=r(n),i=o.inlineIsHorizontal?"width":"height",a=o.inlineIsHorizontal?"height":"width",l="block-size"===t.prop?a:i;return cloneDeclaration(t,e.toString(),l),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,n]=r,[e,i]=parseValueCouple(o);return cloneDeclaration(o,e,t),cloneDeclaration(o,i,n),!0}}function transformResize(o){return t=>{const{prop:n,value:e}=t,i=r(e),a=o.inlineIsHorizontal?"horizontal":"vertical",l=o.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{const o=r.value.toLowerCase();if("word"===r.type){if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString()!==e;return s&&cloneDeclaration(t,i.toString(),n),s}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[n,e]=o,[i,a]=parseValueCouple(t);return cloneDeclaration(t,i,`${r}-${n}`),cloneDeclaration(t,a,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[t,e]=o.block,[i,a]=o.inline;switch(r){case n.BlockStart:return t;case n.BlockEnd:return e;case n.InlineStart:return i;case n.InlineEnd:return a}}function doTransform(o,t,n){const{prop:e,value:i}=o,a=r(i);return a.nodes.forEach((r=>{const o=r.value.toLowerCase();return"word"===r.type&&t.includes(o)&&(r.value=logicalToPhysical(o,n)),r})),a.toString()!==i&&(o.cloneBefore({prop:e,value:a.toString()}),!0)}function transformValueWithSingleDirection(r,t){return e=>{let i;return i=r===o.Block?[n.BlockStart,n.BlockEnd]:[n.InlineStart,n.InlineEnd],doTransform(e,i,t)}}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},a),s=Object.values(e);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[d,c]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[d,c,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[d,c],inline:[f,u],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;const n=o.parent;let e=!1;try{e=r(o)}catch(r){o.warn(t,r.message)}e&&(l.preserve||o.remove(),n.nodes.length||n.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((h=m,r=>doTransform(r,Object.values(n),h))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(g=m.inline,o=>{const{prop:n,value:e}=o,i=r(e),[a,l]=g;i.nodes.forEach((r=>{const o=r.value.toLowerCase();if("word"===r.type){if(o===t.End)return void(r.value=l);o===t.Start&&(r.value=a)}}));const s=i.toString()!==e;return s&&cloneDeclaration(o,i.toString(),n),s}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",d)),"margin-block-end":makeTransform(transformSide("margin",c)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(d)),"inset-block-end":makeTransform(transformOffset(c)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((o=>{const t=r(o.value).nodes.filter((r=>"space"!==r.type));if(t.length>4){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${t.length} values, expected up to 4 values.`;throw new Error(r)}const n={top:"",right:"",bottom:"",left:""};return 1===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[0]),n.bottom=r.stringify(t[0]),n.left=r.stringify(t[0])),2===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.bottom=r.stringify(t[0]),n.left=r.stringify(t[1])),3===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.left=r.stringify(t[1]),n.bottom=r.stringify(t[2])),4===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.bottom=r.stringify(t[2]),n.left=r.stringify(t[3])),Object.keys(n).forEach((r=>{cloneDeclaration(o,n[r],r)})),!0})),"padding-block-start":makeTransform(transformSide("padding",d)),"padding-block-end":makeTransform(transformSide("padding",c)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",d)),"border-block-end-width":makeTransform(transformBorder("width",c)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",d)),"border-block-end-style":makeTransform(transformBorder("style",c)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",d)),"border-block-end-color":makeTransform(transformBorder("color",c)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([d])),"border-block-end":makeTransform(transformBorderShorthand([c])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var g,h};creator.postcss=!0;export{creator as default}; +import r from"postcss-value-parser";var o,t;!function(r){r.Block="block",r.Inline="inline"}(o||(o={})),function(r){r.Start="start",r.End="end"}(t||(t={}));const n={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var e,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(o){const t=r(o.value),n=t.nodes.filter((r=>"space"!==r.type)),e=t.nodes.find((r=>"function"===r.type&&"var"===r.value.toLowerCase()));if(n.length>2){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${n.length} values, expected 1 or 2.`;throw o.error(r)}let i,a;if(1===n.length){if(e)return;i=r.stringify(n[0]),a=r.stringify(n[0])}return 2===n.length&&(i=r.stringify(n[0]),a=r.stringify(n[1])),[i,a]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[n,e]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`border-${n}-${r}`),cloneDeclaration(t,l,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let n;switch(t.prop.toLowerCase()){case"border-start-start-radius":n=`border-top-${r}-radius`;break;case"border-start-end-radius":n=`border-top-${o}-radius`;break;case"border-end-start-radius":n=`border-bottom-${r}-radius`;break;case"border-end-end-radius":n=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,n=r.inlineIsHorizontal?"width":"height",e=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?e:n),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,n]=r,e=parseValueCouple(o);if(!e)return;const[i,a]=e;return cloneDeclaration(o,i,t),cloneDeclaration(o,a,n),!0}}function transformResize(o){return t=>{const{prop:n,value:e}=t,i=r(e),a=o.inlineIsHorizontal?"horizontal":"vertical",l=o.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==e&&(cloneDeclaration(t,s,n),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[n,e]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`${r}-${n}`),cloneDeclaration(t,l,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[t,e]=o.block,[i,a]=o.inline;switch(r){case n.BlockStart:return t;case n.BlockEnd:return e;case n.InlineStart:return i;case n.InlineEnd:return a}}function doTransform(o,t,n){const{prop:e,value:i}=o,a=r(i);a.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();t.includes(o)&&(r.value=logicalToPhysical(o,n))}}));const l=a.toString();return l!==i&&(cloneDeclaration(o,l,e),!0)}function transformValueWithSingleDirection(r,t){return e=>{let i;return i=r===o.Block?[n.BlockStart,n.BlockEnd]:[n.InlineStart,n.InlineEnd],doTransform(e,i,t)}}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},a),s=Object.values(e);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let n=!1;try{n=r(o)}catch(r){return void o.warn(t,r.message)}n&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(n),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,o=>{const{prop:n,value:e}=o,i=r(e),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if(o===t.End)return void(r.value=l);o===t.Start&&(r.value=a)}}));const s=i.toString();return s!==e&&(cloneDeclaration(o,s,n),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((o=>{const t=r(o.value),n=t.nodes.filter((r=>"space"!==r.type&&"comment"!==r.type)),e=t.nodes.find((r=>"function"===r.type&&"var"===r.value.toLowerCase()));if(n.length>4){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${n.length} values, expected up to 4 values.`;throw o.error(r)}const i={top:"",right:"",bottom:"",left:""};if(!e||4===n.length)return 1===n.length&&(i.top=r.stringify(n[0]),i.right=i.top,i.bottom=i.top,i.left=i.top),2===n.length&&(i.top=r.stringify(n[0]),i.right=r.stringify(n[1]),i.bottom=i.top,i.left=i.right),3===n.length&&(i.top=r.stringify(n[0]),i.right=r.stringify(n[1]),i.left=i.right,i.bottom=r.stringify(n[2])),4===n.length&&(i.top=r.stringify(n[0]),i.right=r.stringify(n[1]),i.bottom=r.stringify(n[2]),i.left=r.stringify(n[3])),Object.keys(i).forEach((r=>{cloneDeclaration(o,i[r],r)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-logical/dist/lib/clone-declaration.d.ts b/plugins/postcss-logical/dist/lib/clone-declaration.d.ts index 810c11054..1503bf6f1 100644 --- a/plugins/postcss-logical/dist/lib/clone-declaration.d.ts +++ b/plugins/postcss-logical/dist/lib/clone-declaration.d.ts @@ -1,2 +1,2 @@ import type { Declaration } from 'postcss'; -export declare function cloneDeclaration(declaration: Declaration, value: string, prop: string): Declaration; +export declare function cloneDeclaration(declaration: Declaration, value: string, prop: string): void; diff --git a/plugins/postcss-logical/dist/utils/parse-value-couple.d.ts b/plugins/postcss-logical/dist/utils/parse-value-couple.d.ts index 124566572..95c6ab276 100644 --- a/plugins/postcss-logical/dist/utils/parse-value-couple.d.ts +++ b/plugins/postcss-logical/dist/utils/parse-value-couple.d.ts @@ -1,2 +1,2 @@ import type { Declaration } from 'postcss'; -export declare function parseValueCouple(declaration: Declaration): [string, string]; +export declare function parseValueCouple(declaration: Declaration): [string, string] | void; diff --git a/plugins/postcss-logical/src/index.ts b/plugins/postcss-logical/src/index.ts index 640c6020c..751dc9eb4 100644 --- a/plugins/postcss-logical/src/index.ts +++ b/plugins/postcss-logical/src/index.ts @@ -76,23 +76,22 @@ const creator: PluginCreator = (opts?: pluginOptions) => { if (!transform) { return; } - const parent = decl.parent; + let transformed = false; try { transformed = transform(decl); } catch (error) { decl.warn(result, error.message); + return; } - if (transformed) { - if (!options.preserve) { - decl.remove(); - } + if (!transformed) { + return; + } - if (!parent.nodes.length) { - parent.remove(); - } + if (!options.preserve) { + decl.remove(); } }; }; diff --git a/plugins/postcss-logical/src/lib/clone-declaration.ts b/plugins/postcss-logical/src/lib/clone-declaration.ts index 5abbb8c1e..b738ea4a9 100644 --- a/plugins/postcss-logical/src/lib/clone-declaration.ts +++ b/plugins/postcss-logical/src/lib/clone-declaration.ts @@ -4,6 +4,12 @@ export function cloneDeclaration( declaration: Declaration, value: string, prop: string, -) : Declaration { - return declaration.cloneBefore({ value, prop }); +): void { + if (declaration.parent && declaration.parent.some((x) => { + return x.type == 'decl' && x.prop === prop && x.value === value; + })) { + return; + } + + declaration.cloneBefore({ value, prop }); } diff --git a/plugins/postcss-logical/src/lib/transform-borders.ts b/plugins/postcss-logical/src/lib/transform-borders.ts index d0b8b6de9..2e863cc7a 100644 --- a/plugins/postcss-logical/src/lib/transform-borders.ts +++ b/plugins/postcss-logical/src/lib/transform-borders.ts @@ -19,11 +19,17 @@ export function transformBorder( export function transformBorderProperty( borderSetting: string, - side: [string,string], + side: [string, string], ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const [sideA, sideB] = side; - const [valueA, valueB] = parseValueCouple(declaration); + + const transformed = parseValueCouple(declaration); + if (!transformed) { + return; + } + + const [valueA, valueB] = transformed; cloneDeclaration( declaration, @@ -42,7 +48,7 @@ export function transformBorderProperty( } export function transformBorderShorthand( - side: [string] | [string,string], + side: [string] | [string, string], ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { side.forEach((sidePart) => cloneDeclaration( diff --git a/plugins/postcss-logical/src/lib/transform-inset.ts b/plugins/postcss-logical/src/lib/transform-inset.ts index 124c45bf7..aab50cd61 100644 --- a/plugins/postcss-logical/src/lib/transform-inset.ts +++ b/plugins/postcss-logical/src/lib/transform-inset.ts @@ -6,11 +6,12 @@ export function transformInset( ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const valuesAST = valueParser(declaration.value); - const values = valuesAST.nodes.filter((node) => node.type !== 'space'); + const values = valuesAST.nodes.filter((node) => node.type !== 'space' && node.type !== 'comment'); + const hasVariables = valuesAST.nodes.find((node) => node.type === 'function' && node.value.toLowerCase() === 'var'); if (values.length > 4) { - const error = `[postcss-logical] Invalid number of values for ${declaration.prop}. Found ${values.length} values, expected up to 4 values.`; - throw new Error(error); + const errorMessage = `[postcss-logical] Invalid number of values for ${declaration.prop}. Found ${values.length} values, expected up to 4 values.`; + throw declaration.error(errorMessage); } const newRules = { @@ -20,24 +21,30 @@ export function transformInset( 'left': '', }; + if (hasVariables && values.length !== 4) { + // A variable can "resolve" to multiple separate values. + // This makes it impossible to statically map tokens to longhand properties. + return; + } + if (values.length === 1) { newRules.top = valueParser.stringify(values[0]); - newRules.right = valueParser.stringify(values[0]); - newRules.bottom = valueParser.stringify(values[0]); - newRules.left = valueParser.stringify(values[0]); + newRules.right = newRules.top; + newRules.bottom = newRules.top; + newRules.left = newRules.top; } if (values.length === 2) { newRules.top = valueParser.stringify(values[0]); newRules.right = valueParser.stringify(values[1]); - newRules.bottom = valueParser.stringify(values[0]); - newRules.left = valueParser.stringify(values[1]); + newRules.bottom = newRules.top; + newRules.left = newRules.right; } if (values.length === 3) { newRules.top = valueParser.stringify(values[0]); newRules.right = valueParser.stringify(values[1]); - newRules.left = valueParser.stringify(values[1]); + newRules.left = newRules.right; newRules.bottom = valueParser.stringify(values[2]); } diff --git a/plugins/postcss-logical/src/lib/transform-logical-size.ts b/plugins/postcss-logical/src/lib/transform-logical-size.ts index d720682af..2c0571b57 100644 --- a/plugins/postcss-logical/src/lib/transform-logical-size.ts +++ b/plugins/postcss-logical/src/lib/transform-logical-size.ts @@ -1,20 +1,19 @@ import type { Declaration } from 'postcss'; -import valueParser from 'postcss-value-parser'; import { cloneDeclaration } from './clone-declaration'; import { DirectionConfig } from './types'; + export function transformLogicalSize( directionConfig: DirectionConfig, ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const { value } = declaration; - const valueAST = valueParser(value); - const inlineValue = directionConfig.inlineIsHorizontal ? 'width' : 'height'; - const blockValue = directionConfig.inlineIsHorizontal ? 'height' : 'width'; - const prop = declaration.prop === 'block-size' ? blockValue : inlineValue; + const inlineProp = directionConfig.inlineIsHorizontal ? 'width' : 'height'; + const blockProp = directionConfig.inlineIsHorizontal ? 'height' : 'width'; + const prop = declaration.prop === 'block-size' ? blockProp : inlineProp; cloneDeclaration( declaration, - valueAST.toString(), + value, prop, ); diff --git a/plugins/postcss-logical/src/lib/transform-offset.ts b/plugins/postcss-logical/src/lib/transform-offset.ts index c47fbf351..5946f3061 100644 --- a/plugins/postcss-logical/src/lib/transform-offset.ts +++ b/plugins/postcss-logical/src/lib/transform-offset.ts @@ -21,7 +21,13 @@ export function transformOffsetShorthand( ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const [sideA, sideB] = side; - const [valueA, valueB] = parseValueCouple(declaration); + + const transformed = parseValueCouple(declaration); + if (!transformed) { + return; + } + + const [valueA, valueB] = transformed; cloneDeclaration( declaration, diff --git a/plugins/postcss-logical/src/lib/transform-resize.ts b/plugins/postcss-logical/src/lib/transform-resize.ts index e84f0c893..1f2c99b03 100644 --- a/plugins/postcss-logical/src/lib/transform-resize.ts +++ b/plugins/postcss-logical/src/lib/transform-resize.ts @@ -2,6 +2,7 @@ import type { Declaration } from 'postcss'; import valueParser from 'postcss-value-parser'; import { DirectionConfig } from './types'; import { cloneDeclaration } from './clone-declaration'; + export function transformResize( directionConfig: DirectionConfig, ): (declaration: Declaration) => boolean { @@ -12,9 +13,9 @@ export function transformResize( const blockValue = directionConfig.inlineIsHorizontal ? 'vertical' : 'horizontal'; valueAST.nodes.forEach((node) => { - const valueCandidate = node.value.toLowerCase(); - if (node.type === 'word') { + const valueCandidate = node.value.toLowerCase(); + if (valueCandidate === 'inline') { node.value = inlineValue; return; @@ -26,12 +27,12 @@ export function transformResize( } }); - const changed = valueAST.toString() !== value; - - if (changed) { - cloneDeclaration(declaration, valueAST.toString(), prop); + const modifiedValued = valueAST.toString(); + if (modifiedValued !== value) { + cloneDeclaration(declaration, modifiedValued, prop); + return true; } - return changed; + return false; }; } diff --git a/plugins/postcss-logical/src/lib/transform-side.ts b/plugins/postcss-logical/src/lib/transform-side.ts index a1376a575..0be663726 100644 --- a/plugins/postcss-logical/src/lib/transform-side.ts +++ b/plugins/postcss-logical/src/lib/transform-side.ts @@ -19,11 +19,17 @@ export function transformSide( export function transformSideShorthand( prop: string, - side: [string,string], + side: [string, string], ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const [sideA, sideB] = side; - const [valueA, valueB] = parseValueCouple(declaration); + + const transformed = parseValueCouple(declaration); + if (!transformed) { + return; + } + + const [valueA, valueB] = transformed; cloneDeclaration( declaration, diff --git a/plugins/postcss-logical/src/lib/transform-text-align.ts b/plugins/postcss-logical/src/lib/transform-text-align.ts index a209b36fe..9e50877cf 100644 --- a/plugins/postcss-logical/src/lib/transform-text-align.ts +++ b/plugins/postcss-logical/src/lib/transform-text-align.ts @@ -2,6 +2,7 @@ import type { Declaration } from 'postcss'; import valueParser from 'postcss-value-parser'; import { DirectionValue } from './types'; import { cloneDeclaration } from './clone-declaration'; + export function transformTextAlign( inlineValues: [string, string], ): (declaration: Declaration) => boolean { @@ -11,9 +12,9 @@ export function transformTextAlign( const [start, end] = inlineValues; valueAST.nodes.forEach((node) => { - const valueCandidate = node.value.toLowerCase(); - if (node.type === 'word') { + const valueCandidate = node.value.toLowerCase(); + if (valueCandidate === DirectionValue.End) { node.value = end; return; @@ -25,12 +26,12 @@ export function transformTextAlign( } }); - const changed = valueAST.toString() !== value; - - if (changed) { - cloneDeclaration(declaration, valueAST.toString(), prop); + const modifiedValued = valueAST.toString(); + if (modifiedValued !== value) { + cloneDeclaration(declaration, modifiedValued, prop); + return true; } - return changed; + return false; }; } diff --git a/plugins/postcss-logical/src/lib/transform-value.ts b/plugins/postcss-logical/src/lib/transform-value.ts index 471eaf82c..93d480d36 100644 --- a/plugins/postcss-logical/src/lib/transform-value.ts +++ b/plugins/postcss-logical/src/lib/transform-value.ts @@ -2,25 +2,24 @@ import type { Declaration } from 'postcss'; import valueParser from 'postcss-value-parser'; import { DirectionConfig, DirectionValues, Direction } from './types'; import { logicalToPhysical } from '../utils/logical-to-physical'; +import { cloneDeclaration } from './clone-declaration'; -function doTransform(declaration, directionValues, config) { +function doTransform(declaration: Declaration, directionValues: Array, config: DirectionConfig) { const { prop, value } = declaration; const valueAST = valueParser(value); valueAST.nodes.forEach((node) => { - const valueCandidate = node.value.toLowerCase(); - if (node.type === 'word' && directionValues.includes(valueCandidate)) { - node.value = logicalToPhysical(valueCandidate, config); + if (node.type === 'word') { + const valueCandidate = node.value.toLowerCase(); + if (directionValues.includes(valueCandidate)) { + node.value = logicalToPhysical(valueCandidate, config); + } } - - return node; }); - if (valueAST.toString() !== value) { - declaration.cloneBefore({ - prop, - value: valueAST.toString(), - }); + const modifiedValued = valueAST.toString(); + if (modifiedValued !== value) { + cloneDeclaration(declaration, modifiedValued, prop); return true; } diff --git a/plugins/postcss-logical/src/lib/types.ts b/plugins/postcss-logical/src/lib/types.ts index 9da506b62..23dadd9d6 100644 --- a/plugins/postcss-logical/src/lib/types.ts +++ b/plugins/postcss-logical/src/lib/types.ts @@ -1,18 +1,18 @@ export enum Direction { - Block= 'block', - Inline= 'inline', + Block = 'block', + Inline = 'inline', } export enum DirectionValue { - Start= 'start', - End= 'end', + Start = 'start', + End = 'end', } export const DirectionValues = { - BlockStart: `${Direction.Block}-${DirectionValue.Start}`, - BlockEnd: `${Direction.Block}-${DirectionValue.End}`, - InlineStart: `${Direction.Inline}-${DirectionValue.Start}`, - InlineEnd: `${Direction.Inline}-${DirectionValue.End}`, + BlockStart: 'block-start', + BlockEnd: 'block-end', + InlineStart: 'inline-start', + InlineEnd: 'inline-end', }; export enum DirectionFlow { diff --git a/plugins/postcss-logical/src/utils/parse-value-couple.ts b/plugins/postcss-logical/src/utils/parse-value-couple.ts index 8a7121c60..520f0e9b8 100644 --- a/plugins/postcss-logical/src/utils/parse-value-couple.ts +++ b/plugins/postcss-logical/src/utils/parse-value-couple.ts @@ -1,19 +1,25 @@ import type { Declaration } from 'postcss'; import valueParser from 'postcss-value-parser'; -export function parseValueCouple(declaration: Declaration): [string, string] { +export function parseValueCouple(declaration: Declaration): [string, string] | void { const valuesAST = valueParser(declaration.value); const values = valuesAST.nodes.filter((node) => node.type !== 'space'); + const hasVariables = valuesAST.nodes.find((node) => node.type === 'function' && node.value.toLowerCase() === 'var'); if (values.length > 2) { - const error = `[postcss-logical] Invalid number of values for ${declaration.prop}. Found ${values.length} values, expected 1 or 2.`; - throw new Error(error); + const errorMessage = `[postcss-logical] Invalid number of values for ${declaration.prop}. Found ${values.length} values, expected 1 or 2.`; + throw declaration.error(errorMessage); } let valueA; let valueB; if (values.length === 1) { + if (hasVariables) { + // A variable can "resolve" to multiple separate values. + return; + } + valueA = valueParser.stringify(values[0]); valueB = valueParser.stringify(values[0]); } diff --git a/plugins/postcss-logical/test/offsets.chinese.expect.css b/plugins/postcss-logical/test/offsets.chinese.expect.css index 1a3a223db..af3a1e49f 100644 --- a/plugins/postcss-logical/test/offsets.chinese.expect.css +++ b/plugins/postcss-logical/test/offsets.chinese.expect.css @@ -22,6 +22,10 @@ left: var(--foo); } +.foo { + inset-block: var(--foo); +} + .foo { inset-block: 1px 2px 3px; } @@ -47,6 +51,10 @@ left: 1px; } +.foo { + inset: var(--foo); +} + .foo { top: 1px; right: 2px; @@ -54,6 +62,10 @@ left: 2px; } +.foo { + inset: var(--foo) 2px; +} + .foo { top: 1px; right: 2px; @@ -61,6 +73,10 @@ left: 2px; } +.foo { + inset: 1px var(--foo) 3px; +} + .foo { top: 1px; right: var(--foo); diff --git a/plugins/postcss-logical/test/offsets.css b/plugins/postcss-logical/test/offsets.css index 3b48b4a11..d215b2f66 100644 --- a/plugins/postcss-logical/test/offsets.css +++ b/plugins/postcss-logical/test/offsets.css @@ -20,6 +20,10 @@ inset-block: 1px var(--foo); } +.foo { + inset-block: var(--foo); +} + .foo { inset-block: 1px 2px 3px; } @@ -40,14 +44,26 @@ inset: 1px; } +.foo { + inset: var(--foo); +} + .foo { inset: 1px 2px; } +.foo { + inset: var(--foo) 2px; +} + .foo { inset: 1px 2px 3px; } +.foo { + inset: 1px var(--foo) 3px; +} + .foo { inset: 1px var(--foo) 3px 4px; } diff --git a/plugins/postcss-logical/test/offsets.expect.css b/plugins/postcss-logical/test/offsets.expect.css index 1d56dc514..7f4ad44b5 100644 --- a/plugins/postcss-logical/test/offsets.expect.css +++ b/plugins/postcss-logical/test/offsets.expect.css @@ -22,6 +22,10 @@ bottom: var(--foo); } +.foo { + inset-block: var(--foo); +} + .foo { inset-block: 1px 2px 3px; } @@ -47,6 +51,10 @@ left: 1px; } +.foo { + inset: var(--foo); +} + .foo { top: 1px; right: 2px; @@ -54,6 +62,10 @@ left: 2px; } +.foo { + inset: var(--foo) 2px; +} + .foo { top: 1px; right: 2px; @@ -61,6 +73,10 @@ left: 2px; } +.foo { + inset: 1px var(--foo) 3px; +} + .foo { top: 1px; right: var(--foo); From 6e64d187085b3445b8c4260ebbcffcbb15c6a5e1 Mon Sep 17 00:00:00 2001 From: Romain Menke <11521496+romainmenke@users.noreply.github.com> Date: Mon, 9 Jan 2023 08:20:42 +0100 Subject: [PATCH 2/4] Update plugins/postcss-logical/src/utils/parse-value-couple.ts Co-authored-by: Antonio Laguna --- plugins/postcss-logical/src/utils/parse-value-couple.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/postcss-logical/src/utils/parse-value-couple.ts b/plugins/postcss-logical/src/utils/parse-value-couple.ts index 520f0e9b8..bc8062184 100644 --- a/plugins/postcss-logical/src/utils/parse-value-couple.ts +++ b/plugins/postcss-logical/src/utils/parse-value-couple.ts @@ -21,7 +21,7 @@ export function parseValueCouple(declaration: Declaration): [string, string] | v } valueA = valueParser.stringify(values[0]); - valueB = valueParser.stringify(values[0]); + valueB = valueA; } if (values.length === 2) { From 419da786baa2947184ba8da23a0ea2d181a102a8 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Mon, 9 Jan 2023 08:23:49 +0100 Subject: [PATCH 3/4] undo --- plugins/postcss-logical/dist/index.cjs | 2 +- plugins/postcss-logical/dist/index.mjs | 2 +- .../postcss-logical/src/lib/transform-inset.ts | 8 -------- .../src/utils/parse-value-couple.ts | 6 ------ .../test/offsets.chinese.expect.css | 18 ++++++++++++++---- .../postcss-logical/test/offsets.expect.css | 18 ++++++++++++++---- 6 files changed, 30 insertions(+), 24 deletions(-) diff --git a/plugins/postcss-logical/dist/index.cjs b/plugins/postcss-logical/dist/index.cjs index 3b3631c71..bf2b302ff 100644 --- a/plugins/postcss-logical/dist/index.cjs +++ b/plugins/postcss-logical/dist/index.cjs @@ -1 +1 @@ -"use strict";var r,o,t=require("postcss-value-parser");!function(r){r.Block="block",r.Inline="inline"}(r||(r={})),function(r){r.Start="start",r.End="end"}(o||(o={}));const e={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var n,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(r){const o=t(r.value),e=o.nodes.filter((r=>"space"!==r.type)),n=o.nodes.find((r=>"function"===r.type&&"var"===r.value.toLowerCase()));if(e.length>2){const o=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${e.length} values, expected 1 or 2.`;throw r.error(o)}let i,a;if(1===e.length){if(n)return;i=t.stringify(e[0]),a=t.stringify(e[0])}return 2===e.length&&(i=t.stringify(e[0]),a=t.stringify(e[1])),[i,a]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[e,n]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`border-${e}-${r}`),cloneDeclaration(t,l,`border-${n}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let e;switch(t.prop.toLowerCase()){case"border-start-start-radius":e=`border-top-${r}-radius`;break;case"border-start-end-radius":e=`border-top-${o}-radius`;break;case"border-end-start-radius":e=`border-bottom-${r}-radius`;break;case"border-end-end-radius":e=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,e),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,e=r.inlineIsHorizontal?"width":"height",n=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?n:e),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,e]=r,n=parseValueCouple(o);if(!n)return;const[i,a]=n;return cloneDeclaration(o,i,t),cloneDeclaration(o,a,e),!0}}function transformResize(r){return o=>{const{prop:e,value:n}=o,i=t(n),a=r.inlineIsHorizontal?"horizontal":"vertical",l=r.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==n&&(cloneDeclaration(o,s,e),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[e,n]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`${r}-${e}`),cloneDeclaration(t,l,`${r}-${n}`),!0}}function logicalToPhysical(r,o){const[t,n]=o.block,[i,a]=o.inline;switch(r){case e.BlockStart:return t;case e.BlockEnd:return n;case e.InlineStart:return i;case e.InlineEnd:return a}}function doTransform(r,o,e){const{prop:n,value:i}=r,a=t(i);a.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();o.includes(t)&&(r.value=logicalToPhysical(t,e))}}));const l=a.toString();return l!==i&&(cloneDeclaration(r,l,n),!0)}function transformValueWithSingleDirection(o,t){return n=>{let i;return i=o===r.Block?[e.BlockStart,e.BlockEnd]:[e.InlineStart,e.InlineEnd],doTransform(n,i,t)}}function directionFlowToAxes(r){switch(r){case n.TopToBottom:return[i.Top,i.Bottom];case n.BottomToTop:return[i.Bottom,i.Top];case n.RightToLeft:return[i.Right,i.Left];case n.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(n||(n={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:n.TopToBottom,inlineDirection:n.LeftToRight},a),s=Object.values(n);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[n.LeftToRight,n.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let e=!1;try{e=r(o)}catch(r){return void o.warn(t,r.message)}e&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(e),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,r=>{const{prop:e,value:n}=r,i=t(n),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();if(t===o.End)return void(r.value=l);t===o.Start&&(r.value=a)}}));const s=i.toString();return s!==n&&(cloneDeclaration(r,s,e),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((r=>{const o=t(r.value),e=o.nodes.filter((r=>"space"!==r.type&&"comment"!==r.type)),n=o.nodes.find((r=>"function"===r.type&&"var"===r.value.toLowerCase()));if(e.length>4){const o=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${e.length} values, expected up to 4 values.`;throw r.error(o)}const i={top:"",right:"",bottom:"",left:""};if(!n||4===e.length)return 1===e.length&&(i.top=t.stringify(e[0]),i.right=i.top,i.bottom=i.top,i.left=i.top),2===e.length&&(i.top=t.stringify(e[0]),i.right=t.stringify(e[1]),i.bottom=i.top,i.left=i.right),3===e.length&&(i.top=t.stringify(e[0]),i.right=t.stringify(e[1]),i.left=i.right,i.bottom=t.stringify(e[2])),4===e.length&&(i.top=t.stringify(e[0]),i.right=t.stringify(e[1]),i.bottom=t.stringify(e[2]),i.left=t.stringify(e[3])),Object.keys(i).forEach((o=>{cloneDeclaration(r,i[o],o)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0,module.exports=creator; +"use strict";var r,o,t=require("postcss-value-parser");!function(r){r.Block="block",r.Inline="inline"}(r||(r={})),function(r){r.Start="start",r.End="end"}(o||(o={}));const e={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var n,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(r){const o=t(r.value).nodes.filter((r=>"space"!==r.type));if(o.length>2){const t=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected 1 or 2.`;throw r.error(t)}let e,n;return 1===o.length&&(e=t.stringify(o[0]),n=e),2===o.length&&(e=t.stringify(o[0]),n=t.stringify(o[1])),[e,n]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[e,n]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`border-${e}-${r}`),cloneDeclaration(t,l,`border-${n}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let e;switch(t.prop.toLowerCase()){case"border-start-start-radius":e=`border-top-${r}-radius`;break;case"border-start-end-radius":e=`border-top-${o}-radius`;break;case"border-end-start-radius":e=`border-bottom-${r}-radius`;break;case"border-end-end-radius":e=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,e),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,e=r.inlineIsHorizontal?"width":"height",n=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?n:e),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,e]=r,n=parseValueCouple(o);if(!n)return;const[i,a]=n;return cloneDeclaration(o,i,t),cloneDeclaration(o,a,e),!0}}function transformResize(r){return o=>{const{prop:e,value:n}=o,i=t(n),a=r.inlineIsHorizontal?"horizontal":"vertical",l=r.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==n&&(cloneDeclaration(o,s,e),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[e,n]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`${r}-${e}`),cloneDeclaration(t,l,`${r}-${n}`),!0}}function logicalToPhysical(r,o){const[t,n]=o.block,[i,a]=o.inline;switch(r){case e.BlockStart:return t;case e.BlockEnd:return n;case e.InlineStart:return i;case e.InlineEnd:return a}}function doTransform(r,o,e){const{prop:n,value:i}=r,a=t(i);a.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();o.includes(t)&&(r.value=logicalToPhysical(t,e))}}));const l=a.toString();return l!==i&&(cloneDeclaration(r,l,n),!0)}function transformValueWithSingleDirection(o,t){return n=>{let i;return i=o===r.Block?[e.BlockStart,e.BlockEnd]:[e.InlineStart,e.InlineEnd],doTransform(n,i,t)}}function directionFlowToAxes(r){switch(r){case n.TopToBottom:return[i.Top,i.Bottom];case n.BottomToTop:return[i.Bottom,i.Top];case n.RightToLeft:return[i.Right,i.Left];case n.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(n||(n={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:n.TopToBottom,inlineDirection:n.LeftToRight},a),s=Object.values(n);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[n.LeftToRight,n.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let e=!1;try{e=r(o)}catch(r){return void o.warn(t,r.message)}e&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(e),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,r=>{const{prop:e,value:n}=r,i=t(n),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();if(t===o.End)return void(r.value=l);t===o.Start&&(r.value=a)}}));const s=i.toString();return s!==n&&(cloneDeclaration(r,s,e),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((r=>{const o=t(r.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(o.length>4){const t=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected up to 4 values.`;throw r.error(t)}const e={top:"",right:"",bottom:"",left:""};return 1===o.length&&(e.top=t.stringify(o[0]),e.right=e.top,e.bottom=e.top,e.left=e.top),2===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.bottom=e.top,e.left=e.right),3===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.left=e.right,e.bottom=t.stringify(o[2])),4===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.bottom=t.stringify(o[2]),e.left=t.stringify(o[3])),Object.keys(e).forEach((o=>{cloneDeclaration(r,e[o],o)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-logical/dist/index.mjs b/plugins/postcss-logical/dist/index.mjs index 17aabc367..bfd063d5d 100644 --- a/plugins/postcss-logical/dist/index.mjs +++ b/plugins/postcss-logical/dist/index.mjs @@ -1 +1 @@ -import r from"postcss-value-parser";var o,t;!function(r){r.Block="block",r.Inline="inline"}(o||(o={})),function(r){r.Start="start",r.End="end"}(t||(t={}));const n={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var e,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(o){const t=r(o.value),n=t.nodes.filter((r=>"space"!==r.type)),e=t.nodes.find((r=>"function"===r.type&&"var"===r.value.toLowerCase()));if(n.length>2){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${n.length} values, expected 1 or 2.`;throw o.error(r)}let i,a;if(1===n.length){if(e)return;i=r.stringify(n[0]),a=r.stringify(n[0])}return 2===n.length&&(i=r.stringify(n[0]),a=r.stringify(n[1])),[i,a]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[n,e]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`border-${n}-${r}`),cloneDeclaration(t,l,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let n;switch(t.prop.toLowerCase()){case"border-start-start-radius":n=`border-top-${r}-radius`;break;case"border-start-end-radius":n=`border-top-${o}-radius`;break;case"border-end-start-radius":n=`border-bottom-${r}-radius`;break;case"border-end-end-radius":n=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,n=r.inlineIsHorizontal?"width":"height",e=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?e:n),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,n]=r,e=parseValueCouple(o);if(!e)return;const[i,a]=e;return cloneDeclaration(o,i,t),cloneDeclaration(o,a,n),!0}}function transformResize(o){return t=>{const{prop:n,value:e}=t,i=r(e),a=o.inlineIsHorizontal?"horizontal":"vertical",l=o.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==e&&(cloneDeclaration(t,s,n),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[n,e]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`${r}-${n}`),cloneDeclaration(t,l,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[t,e]=o.block,[i,a]=o.inline;switch(r){case n.BlockStart:return t;case n.BlockEnd:return e;case n.InlineStart:return i;case n.InlineEnd:return a}}function doTransform(o,t,n){const{prop:e,value:i}=o,a=r(i);a.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();t.includes(o)&&(r.value=logicalToPhysical(o,n))}}));const l=a.toString();return l!==i&&(cloneDeclaration(o,l,e),!0)}function transformValueWithSingleDirection(r,t){return e=>{let i;return i=r===o.Block?[n.BlockStart,n.BlockEnd]:[n.InlineStart,n.InlineEnd],doTransform(e,i,t)}}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},a),s=Object.values(e);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let n=!1;try{n=r(o)}catch(r){return void o.warn(t,r.message)}n&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(n),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,o=>{const{prop:n,value:e}=o,i=r(e),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if(o===t.End)return void(r.value=l);o===t.Start&&(r.value=a)}}));const s=i.toString();return s!==e&&(cloneDeclaration(o,s,n),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((o=>{const t=r(o.value),n=t.nodes.filter((r=>"space"!==r.type&&"comment"!==r.type)),e=t.nodes.find((r=>"function"===r.type&&"var"===r.value.toLowerCase()));if(n.length>4){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${n.length} values, expected up to 4 values.`;throw o.error(r)}const i={top:"",right:"",bottom:"",left:""};if(!e||4===n.length)return 1===n.length&&(i.top=r.stringify(n[0]),i.right=i.top,i.bottom=i.top,i.left=i.top),2===n.length&&(i.top=r.stringify(n[0]),i.right=r.stringify(n[1]),i.bottom=i.top,i.left=i.right),3===n.length&&(i.top=r.stringify(n[0]),i.right=r.stringify(n[1]),i.left=i.right,i.bottom=r.stringify(n[2])),4===n.length&&(i.top=r.stringify(n[0]),i.right=r.stringify(n[1]),i.bottom=r.stringify(n[2]),i.left=r.stringify(n[3])),Object.keys(i).forEach((r=>{cloneDeclaration(o,i[r],r)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0;export{creator as default}; +import r from"postcss-value-parser";var o,t;!function(r){r.Block="block",r.Inline="inline"}(o||(o={})),function(r){r.Start="start",r.End="end"}(t||(t={}));const n={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var e,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(o){const t=r(o.value).nodes.filter((r=>"space"!==r.type));if(t.length>2){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${t.length} values, expected 1 or 2.`;throw o.error(r)}let n,e;return 1===t.length&&(n=r.stringify(t[0]),e=n),2===t.length&&(n=r.stringify(t[0]),e=r.stringify(t[1])),[n,e]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[n,e]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`border-${n}-${r}`),cloneDeclaration(t,l,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let n;switch(t.prop.toLowerCase()){case"border-start-start-radius":n=`border-top-${r}-radius`;break;case"border-start-end-radius":n=`border-top-${o}-radius`;break;case"border-end-start-radius":n=`border-bottom-${r}-radius`;break;case"border-end-end-radius":n=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,n=r.inlineIsHorizontal?"width":"height",e=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?e:n),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,n]=r,e=parseValueCouple(o);if(!e)return;const[i,a]=e;return cloneDeclaration(o,i,t),cloneDeclaration(o,a,n),!0}}function transformResize(o){return t=>{const{prop:n,value:e}=t,i=r(e),a=o.inlineIsHorizontal?"horizontal":"vertical",l=o.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==e&&(cloneDeclaration(t,s,n),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[n,e]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`${r}-${n}`),cloneDeclaration(t,l,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[t,e]=o.block,[i,a]=o.inline;switch(r){case n.BlockStart:return t;case n.BlockEnd:return e;case n.InlineStart:return i;case n.InlineEnd:return a}}function doTransform(o,t,n){const{prop:e,value:i}=o,a=r(i);a.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();t.includes(o)&&(r.value=logicalToPhysical(o,n))}}));const l=a.toString();return l!==i&&(cloneDeclaration(o,l,e),!0)}function transformValueWithSingleDirection(r,t){return e=>{let i;return i=r===o.Block?[n.BlockStart,n.BlockEnd]:[n.InlineStart,n.InlineEnd],doTransform(e,i,t)}}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},a),s=Object.values(e);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let n=!1;try{n=r(o)}catch(r){return void o.warn(t,r.message)}n&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(n),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,o=>{const{prop:n,value:e}=o,i=r(e),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if(o===t.End)return void(r.value=l);o===t.Start&&(r.value=a)}}));const s=i.toString();return s!==e&&(cloneDeclaration(o,s,n),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((o=>{const t=r(o.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(t.length>4){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${t.length} values, expected up to 4 values.`;throw o.error(r)}const n={top:"",right:"",bottom:"",left:""};return 1===t.length&&(n.top=r.stringify(t[0]),n.right=n.top,n.bottom=n.top,n.left=n.top),2===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.bottom=n.top,n.left=n.right),3===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.left=n.right,n.bottom=r.stringify(t[2])),4===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.bottom=r.stringify(t[2]),n.left=r.stringify(t[3])),Object.keys(n).forEach((r=>{cloneDeclaration(o,n[r],r)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-logical/src/lib/transform-inset.ts b/plugins/postcss-logical/src/lib/transform-inset.ts index aab50cd61..9a1159b92 100644 --- a/plugins/postcss-logical/src/lib/transform-inset.ts +++ b/plugins/postcss-logical/src/lib/transform-inset.ts @@ -7,8 +7,6 @@ export function transformInset( return (declaration: Declaration) => { const valuesAST = valueParser(declaration.value); const values = valuesAST.nodes.filter((node) => node.type !== 'space' && node.type !== 'comment'); - const hasVariables = valuesAST.nodes.find((node) => node.type === 'function' && node.value.toLowerCase() === 'var'); - if (values.length > 4) { const errorMessage = `[postcss-logical] Invalid number of values for ${declaration.prop}. Found ${values.length} values, expected up to 4 values.`; throw declaration.error(errorMessage); @@ -21,12 +19,6 @@ export function transformInset( 'left': '', }; - if (hasVariables && values.length !== 4) { - // A variable can "resolve" to multiple separate values. - // This makes it impossible to statically map tokens to longhand properties. - return; - } - if (values.length === 1) { newRules.top = valueParser.stringify(values[0]); newRules.right = newRules.top; diff --git a/plugins/postcss-logical/src/utils/parse-value-couple.ts b/plugins/postcss-logical/src/utils/parse-value-couple.ts index bc8062184..873511c0f 100644 --- a/plugins/postcss-logical/src/utils/parse-value-couple.ts +++ b/plugins/postcss-logical/src/utils/parse-value-couple.ts @@ -4,7 +4,6 @@ import valueParser from 'postcss-value-parser'; export function parseValueCouple(declaration: Declaration): [string, string] | void { const valuesAST = valueParser(declaration.value); const values = valuesAST.nodes.filter((node) => node.type !== 'space'); - const hasVariables = valuesAST.nodes.find((node) => node.type === 'function' && node.value.toLowerCase() === 'var'); if (values.length > 2) { const errorMessage = `[postcss-logical] Invalid number of values for ${declaration.prop}. Found ${values.length} values, expected 1 or 2.`; @@ -15,11 +14,6 @@ export function parseValueCouple(declaration: Declaration): [string, string] | v let valueB; if (values.length === 1) { - if (hasVariables) { - // A variable can "resolve" to multiple separate values. - return; - } - valueA = valueParser.stringify(values[0]); valueB = valueA; } diff --git a/plugins/postcss-logical/test/offsets.chinese.expect.css b/plugins/postcss-logical/test/offsets.chinese.expect.css index af3a1e49f..871719a01 100644 --- a/plugins/postcss-logical/test/offsets.chinese.expect.css +++ b/plugins/postcss-logical/test/offsets.chinese.expect.css @@ -23,7 +23,8 @@ } .foo { - inset-block: var(--foo); + right: var(--foo); + left: var(--foo); } .foo { @@ -52,7 +53,10 @@ } .foo { - inset: var(--foo); + top: var(--foo); + right: var(--foo); + bottom: var(--foo); + left: var(--foo); } .foo { @@ -63,7 +67,10 @@ } .foo { - inset: var(--foo) 2px; + top: var(--foo); + right: 2px; + bottom: var(--foo); + left: 2px; } .foo { @@ -74,7 +81,10 @@ } .foo { - inset: 1px var(--foo) 3px; + top: 1px; + right: var(--foo); + bottom: 3px; + left: var(--foo); } .foo { diff --git a/plugins/postcss-logical/test/offsets.expect.css b/plugins/postcss-logical/test/offsets.expect.css index 7f4ad44b5..f63c58b29 100644 --- a/plugins/postcss-logical/test/offsets.expect.css +++ b/plugins/postcss-logical/test/offsets.expect.css @@ -23,7 +23,8 @@ } .foo { - inset-block: var(--foo); + top: var(--foo); + bottom: var(--foo); } .foo { @@ -52,7 +53,10 @@ } .foo { - inset: var(--foo); + top: var(--foo); + right: var(--foo); + bottom: var(--foo); + left: var(--foo); } .foo { @@ -63,7 +67,10 @@ } .foo { - inset: var(--foo) 2px; + top: var(--foo); + right: 2px; + bottom: var(--foo); + left: 2px; } .foo { @@ -74,7 +81,10 @@ } .foo { - inset: 1px var(--foo) 3px; + top: 1px; + right: var(--foo); + bottom: 3px; + left: var(--foo); } .foo { From 7e635621c8ba1a86df815a611218785ce92f6680 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Mon, 9 Jan 2023 08:55:29 +0100 Subject: [PATCH 4/4] more undo --- plugins/postcss-logical/dist/index.cjs | 2 +- plugins/postcss-logical/dist/index.mjs | 2 +- .../postcss-logical/dist/utils/parse-value-couple.d.ts | 2 +- plugins/postcss-logical/src/lib/transform-borders.ts | 8 +------- plugins/postcss-logical/src/lib/transform-offset.ts | 8 +------- plugins/postcss-logical/src/lib/transform-side.ts | 8 +------- plugins/postcss-logical/src/utils/parse-value-couple.ts | 2 +- 7 files changed, 7 insertions(+), 25 deletions(-) diff --git a/plugins/postcss-logical/dist/index.cjs b/plugins/postcss-logical/dist/index.cjs index bf2b302ff..999a686e5 100644 --- a/plugins/postcss-logical/dist/index.cjs +++ b/plugins/postcss-logical/dist/index.cjs @@ -1 +1 @@ -"use strict";var r,o,t=require("postcss-value-parser");!function(r){r.Block="block",r.Inline="inline"}(r||(r={})),function(r){r.Start="start",r.End="end"}(o||(o={}));const e={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var n,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(r){const o=t(r.value).nodes.filter((r=>"space"!==r.type));if(o.length>2){const t=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected 1 or 2.`;throw r.error(t)}let e,n;return 1===o.length&&(e=t.stringify(o[0]),n=e),2===o.length&&(e=t.stringify(o[0]),n=t.stringify(o[1])),[e,n]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[e,n]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`border-${e}-${r}`),cloneDeclaration(t,l,`border-${n}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let e;switch(t.prop.toLowerCase()){case"border-start-start-radius":e=`border-top-${r}-radius`;break;case"border-start-end-radius":e=`border-top-${o}-radius`;break;case"border-end-start-radius":e=`border-bottom-${r}-radius`;break;case"border-end-end-radius":e=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,e),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,e=r.inlineIsHorizontal?"width":"height",n=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?n:e),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,e]=r,n=parseValueCouple(o);if(!n)return;const[i,a]=n;return cloneDeclaration(o,i,t),cloneDeclaration(o,a,e),!0}}function transformResize(r){return o=>{const{prop:e,value:n}=o,i=t(n),a=r.inlineIsHorizontal?"horizontal":"vertical",l=r.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==n&&(cloneDeclaration(o,s,e),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[e,n]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`${r}-${e}`),cloneDeclaration(t,l,`${r}-${n}`),!0}}function logicalToPhysical(r,o){const[t,n]=o.block,[i,a]=o.inline;switch(r){case e.BlockStart:return t;case e.BlockEnd:return n;case e.InlineStart:return i;case e.InlineEnd:return a}}function doTransform(r,o,e){const{prop:n,value:i}=r,a=t(i);a.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();o.includes(t)&&(r.value=logicalToPhysical(t,e))}}));const l=a.toString();return l!==i&&(cloneDeclaration(r,l,n),!0)}function transformValueWithSingleDirection(o,t){return n=>{let i;return i=o===r.Block?[e.BlockStart,e.BlockEnd]:[e.InlineStart,e.InlineEnd],doTransform(n,i,t)}}function directionFlowToAxes(r){switch(r){case n.TopToBottom:return[i.Top,i.Bottom];case n.BottomToTop:return[i.Bottom,i.Top];case n.RightToLeft:return[i.Right,i.Left];case n.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(n||(n={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:n.TopToBottom,inlineDirection:n.LeftToRight},a),s=Object.values(n);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[n.LeftToRight,n.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let e=!1;try{e=r(o)}catch(r){return void o.warn(t,r.message)}e&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(e),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,r=>{const{prop:e,value:n}=r,i=t(n),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();if(t===o.End)return void(r.value=l);t===o.Start&&(r.value=a)}}));const s=i.toString();return s!==n&&(cloneDeclaration(r,s,e),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((r=>{const o=t(r.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(o.length>4){const t=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected up to 4 values.`;throw r.error(t)}const e={top:"",right:"",bottom:"",left:""};return 1===o.length&&(e.top=t.stringify(o[0]),e.right=e.top,e.bottom=e.top,e.left=e.top),2===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.bottom=e.top,e.left=e.right),3===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.left=e.right,e.bottom=t.stringify(o[2])),4===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.bottom=t.stringify(o[2]),e.left=t.stringify(o[3])),Object.keys(e).forEach((o=>{cloneDeclaration(r,e[o],o)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0,module.exports=creator; +"use strict";var r,o,t=require("postcss-value-parser");!function(r){r.Block="block",r.Inline="inline"}(r||(r={})),function(r){r.Start="start",r.End="end"}(o||(o={}));const e={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var n,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(r){const o=t(r.value).nodes.filter((r=>"space"!==r.type));if(o.length>2){const t=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected 1 or 2.`;throw r.error(t)}let e,n;return 1===o.length&&(e=t.stringify(o[0]),n=e),2===o.length&&(e=t.stringify(o[0]),n=t.stringify(o[1])),[e,n]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[e,n]=o,[i,a]=parseValueCouple(t);return cloneDeclaration(t,i,`border-${e}-${r}`),cloneDeclaration(t,a,`border-${n}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let e;switch(t.prop.toLowerCase()){case"border-start-start-radius":e=`border-top-${r}-radius`;break;case"border-start-end-radius":e=`border-top-${o}-radius`;break;case"border-end-start-radius":e=`border-bottom-${r}-radius`;break;case"border-end-end-radius":e=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,e),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,e=r.inlineIsHorizontal?"width":"height",n=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?n:e),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,e]=r,[n,i]=parseValueCouple(o);return cloneDeclaration(o,n,t),cloneDeclaration(o,i,e),!0}}function transformResize(r){return o=>{const{prop:e,value:n}=o,i=t(n),a=r.inlineIsHorizontal?"horizontal":"vertical",l=r.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==n&&(cloneDeclaration(o,s,e),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[e,n]=o,[i,a]=parseValueCouple(t);return cloneDeclaration(t,i,`${r}-${e}`),cloneDeclaration(t,a,`${r}-${n}`),!0}}function logicalToPhysical(r,o){const[t,n]=o.block,[i,a]=o.inline;switch(r){case e.BlockStart:return t;case e.BlockEnd:return n;case e.InlineStart:return i;case e.InlineEnd:return a}}function doTransform(r,o,e){const{prop:n,value:i}=r,a=t(i);a.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();o.includes(t)&&(r.value=logicalToPhysical(t,e))}}));const l=a.toString();return l!==i&&(cloneDeclaration(r,l,n),!0)}function transformValueWithSingleDirection(o,t){return n=>{let i;return i=o===r.Block?[e.BlockStart,e.BlockEnd]:[e.InlineStart,e.InlineEnd],doTransform(n,i,t)}}function directionFlowToAxes(r){switch(r){case n.TopToBottom:return[i.Top,i.Bottom];case n.BottomToTop:return[i.Bottom,i.Top];case n.RightToLeft:return[i.Right,i.Left];case n.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(n||(n={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:n.TopToBottom,inlineDirection:n.LeftToRight},a),s=Object.values(n);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[n.LeftToRight,n.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let e=!1;try{e=r(o)}catch(r){return void o.warn(t,r.message)}e&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(e),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,r=>{const{prop:e,value:n}=r,i=t(n),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const t=r.value.toLowerCase();if(t===o.End)return void(r.value=l);t===o.Start&&(r.value=a)}}));const s=i.toString();return s!==n&&(cloneDeclaration(r,s,e),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((r=>{const o=t(r.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(o.length>4){const t=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected up to 4 values.`;throw r.error(t)}const e={top:"",right:"",bottom:"",left:""};return 1===o.length&&(e.top=t.stringify(o[0]),e.right=e.top,e.bottom=e.top,e.left=e.top),2===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.bottom=e.top,e.left=e.right),3===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.left=e.right,e.bottom=t.stringify(o[2])),4===o.length&&(e.top=t.stringify(o[0]),e.right=t.stringify(o[1]),e.bottom=t.stringify(o[2]),e.left=t.stringify(o[3])),Object.keys(e).forEach((o=>{cloneDeclaration(r,e[o],o)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-logical/dist/index.mjs b/plugins/postcss-logical/dist/index.mjs index bfd063d5d..e0fad52e8 100644 --- a/plugins/postcss-logical/dist/index.mjs +++ b/plugins/postcss-logical/dist/index.mjs @@ -1 +1 @@ -import r from"postcss-value-parser";var o,t;!function(r){r.Block="block",r.Inline="inline"}(o||(o={})),function(r){r.Start="start",r.End="end"}(t||(t={}));const n={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var e,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(o){const t=r(o.value).nodes.filter((r=>"space"!==r.type));if(t.length>2){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${t.length} values, expected 1 or 2.`;throw o.error(r)}let n,e;return 1===t.length&&(n=r.stringify(t[0]),e=n),2===t.length&&(n=r.stringify(t[0]),e=r.stringify(t[1])),[n,e]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[n,e]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`border-${n}-${r}`),cloneDeclaration(t,l,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let n;switch(t.prop.toLowerCase()){case"border-start-start-radius":n=`border-top-${r}-radius`;break;case"border-start-end-radius":n=`border-top-${o}-radius`;break;case"border-end-start-radius":n=`border-bottom-${r}-radius`;break;case"border-end-end-radius":n=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,n=r.inlineIsHorizontal?"width":"height",e=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?e:n),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,n]=r,e=parseValueCouple(o);if(!e)return;const[i,a]=e;return cloneDeclaration(o,i,t),cloneDeclaration(o,a,n),!0}}function transformResize(o){return t=>{const{prop:n,value:e}=t,i=r(e),a=o.inlineIsHorizontal?"horizontal":"vertical",l=o.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==e&&(cloneDeclaration(t,s,n),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[n,e]=o,i=parseValueCouple(t);if(!i)return;const[a,l]=i;return cloneDeclaration(t,a,`${r}-${n}`),cloneDeclaration(t,l,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[t,e]=o.block,[i,a]=o.inline;switch(r){case n.BlockStart:return t;case n.BlockEnd:return e;case n.InlineStart:return i;case n.InlineEnd:return a}}function doTransform(o,t,n){const{prop:e,value:i}=o,a=r(i);a.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();t.includes(o)&&(r.value=logicalToPhysical(o,n))}}));const l=a.toString();return l!==i&&(cloneDeclaration(o,l,e),!0)}function transformValueWithSingleDirection(r,t){return e=>{let i;return i=r===o.Block?[n.BlockStart,n.BlockEnd]:[n.InlineStart,n.InlineEnd],doTransform(e,i,t)}}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},a),s=Object.values(e);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let n=!1;try{n=r(o)}catch(r){return void o.warn(t,r.message)}n&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(n),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,o=>{const{prop:n,value:e}=o,i=r(e),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if(o===t.End)return void(r.value=l);o===t.Start&&(r.value=a)}}));const s=i.toString();return s!==e&&(cloneDeclaration(o,s,n),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((o=>{const t=r(o.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(t.length>4){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${t.length} values, expected up to 4 values.`;throw o.error(r)}const n={top:"",right:"",bottom:"",left:""};return 1===t.length&&(n.top=r.stringify(t[0]),n.right=n.top,n.bottom=n.top,n.left=n.top),2===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.bottom=n.top,n.left=n.right),3===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.left=n.right,n.bottom=r.stringify(t[2])),4===t.length&&(n.top=r.stringify(t[0]),n.right=r.stringify(t[1]),n.bottom=r.stringify(t[2]),n.left=r.stringify(t[3])),Object.keys(n).forEach((r=>{cloneDeclaration(o,n[r],r)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0;export{creator as default}; +import r from"postcss-value-parser";var o,t;!function(r){r.Block="block",r.Inline="inline"}(o||(o={})),function(r){r.Start="start",r.End="end"}(t||(t={}));const e={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var n,i;function cloneDeclaration(r,o,t){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===t&&r.value===o))||r.cloneBefore({value:o,prop:t})}function parseValueCouple(o){const t=r(o.value).nodes.filter((r=>"space"!==r.type));if(t.length>2){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${t.length} values, expected 1 or 2.`;throw o.error(r)}let e,n;return 1===t.length&&(e=r.stringify(t[0]),n=e),2===t.length&&(e=r.stringify(t[0]),n=r.stringify(t[1])),[e,n]}function transformBorder(r,o){return t=>(cloneDeclaration(t,t.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return t=>{const[e,n]=o,[i,a]=parseValueCouple(t);return cloneDeclaration(t,i,`border-${e}-${r}`),cloneDeclaration(t,a,`border-${n}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r,o){return t=>{let e;switch(t.prop.toLowerCase()){case"border-start-start-radius":e=`border-top-${r}-radius`;break;case"border-start-end-radius":e=`border-top-${o}-radius`;break;case"border-end-start-radius":e=`border-bottom-${r}-radius`;break;case"border-end-end-radius":e=`border-bottom-${o}-radius`}return cloneDeclaration(t,t.value,e),!0}}function transformLogicalSize(r){return o=>{const{value:t}=o,e=r.inlineIsHorizontal?"width":"height",n=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,t,"block-size"===o.prop?n:e),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[t,e]=r,[n,i]=parseValueCouple(o);return cloneDeclaration(o,n,t),cloneDeclaration(o,i,e),!0}}function transformResize(o){return t=>{const{prop:e,value:n}=t,i=r(n),a=o.inlineIsHorizontal?"horizontal":"vertical",l=o.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==n&&(cloneDeclaration(t,s,e),!0)}}function transformSide(r,o){return t=>(cloneDeclaration(t,t.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return t=>{const[e,n]=o,[i,a]=parseValueCouple(t);return cloneDeclaration(t,i,`${r}-${e}`),cloneDeclaration(t,a,`${r}-${n}`),!0}}function logicalToPhysical(r,o){const[t,n]=o.block,[i,a]=o.inline;switch(r){case e.BlockStart:return t;case e.BlockEnd:return n;case e.InlineStart:return i;case e.InlineEnd:return a}}function doTransform(o,t,e){const{prop:n,value:i}=o,a=r(i);a.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();t.includes(o)&&(r.value=logicalToPhysical(o,e))}}));const l=a.toString();return l!==i&&(cloneDeclaration(o,l,n),!0)}function transformValueWithSingleDirection(r,t){return n=>{let i;return i=r===o.Block?[e.BlockStart,e.BlockEnd]:[e.InlineStart,e.InlineEnd],doTransform(n,i,t)}}function directionFlowToAxes(r){switch(r){case n.TopToBottom:return[i.Top,i.Bottom];case n.BottomToTop:return[i.Bottom,i.Top];case n.RightToLeft:return[i.Right,i.Left];case n.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(n||(n={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=a=>{const l=Object.assign({preserve:!1,blockDirection:n.TopToBottom,inlineDirection:n.LeftToRight},a),s=Object.values(n);if(!s.includes(l.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(l.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(l.blockDirection),[f,u]=directionFlowToAxes(l.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const m={block:[c,d],inline:[f,u],inlineIsHorizontal:[n.LeftToRight,n.RightToLeft].includes(l.inlineDirection)},makeTransform=r=>(o,{result:t})=>{if(!r)return;let e=!1;try{e=r(o)}catch(r){return void o.warn(t,r.message)}e&&(l.preserve||o.remove())},b=m.inlineIsHorizontal?[f,u]:[i.Left,i.Right];return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((p=m,r=>doTransform(r,Object.values(e),p))),float:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),clear:makeTransform(m.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,m):null),"text-align":makeTransform(m.inlineIsHorizontal?(h=m.inline,o=>{const{prop:e,value:n}=o,i=r(n),[a,l]=h;i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if(o===t.End)return void(r.value=l);o===t.Start&&(r.value=a)}}));const s=i.toString();return s!==n&&(cloneDeclaration(o,s,e),!0)}):null),resize:makeTransform(transformResize(m)),"block-size":makeTransform(transformLogicalSize(m)),"inline-size":makeTransform(transformLogicalSize(m)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",m.block)),"margin-inline":makeTransform(transformSideShorthand("margin",[f,u])),"inset-block":makeTransform(transformOffsetShorthand(m.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand([f,u])),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((o=>{const t=r(o.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(t.length>4){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${t.length} values, expected up to 4 values.`;throw o.error(r)}const e={top:"",right:"",bottom:"",left:""};return 1===t.length&&(e.top=r.stringify(t[0]),e.right=e.top,e.bottom=e.top,e.left=e.top),2===t.length&&(e.top=r.stringify(t[0]),e.right=r.stringify(t[1]),e.bottom=e.top,e.left=e.right),3===t.length&&(e.top=r.stringify(t[0]),e.right=r.stringify(t[1]),e.left=e.right,e.bottom=r.stringify(t[2])),4===t.length&&(e.top=r.stringify(t[0]),e.right=r.stringify(t[1]),e.bottom=r.stringify(t[2]),e.left=r.stringify(t[3])),Object.keys(e).forEach((r=>{cloneDeclaration(o,e[r],r)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",m.block)),"padding-inline":makeTransform(transformSideShorthand("padding",[f,u])),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",m.block)),"border-inline-width":makeTransform(transformBorderProperty("width",m.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",m.block)),"border-inline-style":makeTransform(transformBorderProperty("style",m.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",m.block)),"border-inline-color":makeTransform(transformBorderProperty("color",m.inline)),"border-block":makeTransform(transformBorderShorthand(m.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(m.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(...b)),"border-start-end-radius":makeTransform(transformBorderRadius(...b)),"border-end-start-radius":makeTransform(transformBorderRadius(...b)),"border-end-end-radius":makeTransform(transformBorderRadius(...b))}};var h,p};creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-logical/dist/utils/parse-value-couple.d.ts b/plugins/postcss-logical/dist/utils/parse-value-couple.d.ts index 95c6ab276..124566572 100644 --- a/plugins/postcss-logical/dist/utils/parse-value-couple.d.ts +++ b/plugins/postcss-logical/dist/utils/parse-value-couple.d.ts @@ -1,2 +1,2 @@ import type { Declaration } from 'postcss'; -export declare function parseValueCouple(declaration: Declaration): [string, string] | void; +export declare function parseValueCouple(declaration: Declaration): [string, string]; diff --git a/plugins/postcss-logical/src/lib/transform-borders.ts b/plugins/postcss-logical/src/lib/transform-borders.ts index 2e863cc7a..214f7fae6 100644 --- a/plugins/postcss-logical/src/lib/transform-borders.ts +++ b/plugins/postcss-logical/src/lib/transform-borders.ts @@ -23,13 +23,7 @@ export function transformBorderProperty( ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const [sideA, sideB] = side; - - const transformed = parseValueCouple(declaration); - if (!transformed) { - return; - } - - const [valueA, valueB] = transformed; + const [valueA, valueB] = parseValueCouple(declaration); cloneDeclaration( declaration, diff --git a/plugins/postcss-logical/src/lib/transform-offset.ts b/plugins/postcss-logical/src/lib/transform-offset.ts index 5946f3061..c47fbf351 100644 --- a/plugins/postcss-logical/src/lib/transform-offset.ts +++ b/plugins/postcss-logical/src/lib/transform-offset.ts @@ -21,13 +21,7 @@ export function transformOffsetShorthand( ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const [sideA, sideB] = side; - - const transformed = parseValueCouple(declaration); - if (!transformed) { - return; - } - - const [valueA, valueB] = transformed; + const [valueA, valueB] = parseValueCouple(declaration); cloneDeclaration( declaration, diff --git a/plugins/postcss-logical/src/lib/transform-side.ts b/plugins/postcss-logical/src/lib/transform-side.ts index 0be663726..c627539a7 100644 --- a/plugins/postcss-logical/src/lib/transform-side.ts +++ b/plugins/postcss-logical/src/lib/transform-side.ts @@ -23,13 +23,7 @@ export function transformSideShorthand( ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const [sideA, sideB] = side; - - const transformed = parseValueCouple(declaration); - if (!transformed) { - return; - } - - const [valueA, valueB] = transformed; + const [valueA, valueB] = parseValueCouple(declaration); cloneDeclaration( declaration, diff --git a/plugins/postcss-logical/src/utils/parse-value-couple.ts b/plugins/postcss-logical/src/utils/parse-value-couple.ts index 873511c0f..37a7ea808 100644 --- a/plugins/postcss-logical/src/utils/parse-value-couple.ts +++ b/plugins/postcss-logical/src/utils/parse-value-couple.ts @@ -1,7 +1,7 @@ import type { Declaration } from 'postcss'; import valueParser from 'postcss-value-parser'; -export function parseValueCouple(declaration: Declaration): [string, string] | void { +export function parseValueCouple(declaration: Declaration): [string, string] { const valuesAST = valueParser(declaration.value); const values = valuesAST.nodes.filter((node) => node.type !== 'space');