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..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 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).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 53764a9ac..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:`${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 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/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/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..214f7fae6 100644 --- a/plugins/postcss-logical/src/lib/transform-borders.ts +++ b/plugins/postcss-logical/src/lib/transform-borders.ts @@ -19,7 +19,7 @@ export function transformBorder( export function transformBorderProperty( borderSetting: string, - side: [string,string], + side: [string, string], ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const [sideA, sideB] = side; @@ -42,7 +42,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..9a1159b92 100644 --- a/plugins/postcss-logical/src/lib/transform-inset.ts +++ b/plugins/postcss-logical/src/lib/transform-inset.ts @@ -6,11 +6,10 @@ 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'); 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 = { @@ -22,22 +21,22 @@ export function transformInset( 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-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..c627539a7 100644 --- a/plugins/postcss-logical/src/lib/transform-side.ts +++ b/plugins/postcss-logical/src/lib/transform-side.ts @@ -19,7 +19,7 @@ export function transformSide( export function transformSideShorthand( prop: string, - side: [string,string], + side: [string, string], ): (declaration: Declaration) => boolean { return (declaration: Declaration) => { const [sideA, sideB] = side; 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..37a7ea808 100644 --- a/plugins/postcss-logical/src/utils/parse-value-couple.ts +++ b/plugins/postcss-logical/src/utils/parse-value-couple.ts @@ -6,8 +6,8 @@ export function parseValueCouple(declaration: Declaration): [string, string] { const values = valuesAST.nodes.filter((node) => node.type !== 'space'); 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; @@ -15,7 +15,7 @@ export function parseValueCouple(declaration: Declaration): [string, string] { if (values.length === 1) { valueA = valueParser.stringify(values[0]); - valueB = valueParser.stringify(values[0]); + valueB = valueA; } if (values.length === 2) { diff --git a/plugins/postcss-logical/test/offsets.chinese.expect.css b/plugins/postcss-logical/test/offsets.chinese.expect.css index 1a3a223db..871719a01 100644 --- a/plugins/postcss-logical/test/offsets.chinese.expect.css +++ b/plugins/postcss-logical/test/offsets.chinese.expect.css @@ -22,6 +22,11 @@ left: var(--foo); } +.foo { + right: var(--foo); + left: var(--foo); +} + .foo { inset-block: 1px 2px 3px; } @@ -47,6 +52,13 @@ left: 1px; } +.foo { + top: var(--foo); + right: var(--foo); + bottom: var(--foo); + left: var(--foo); +} + .foo { top: 1px; right: 2px; @@ -54,6 +66,13 @@ left: 2px; } +.foo { + top: var(--foo); + right: 2px; + bottom: var(--foo); + left: 2px; +} + .foo { top: 1px; right: 2px; @@ -61,6 +80,13 @@ left: 2px; } +.foo { + top: 1px; + right: var(--foo); + bottom: 3px; + left: var(--foo); +} + .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..f63c58b29 100644 --- a/plugins/postcss-logical/test/offsets.expect.css +++ b/plugins/postcss-logical/test/offsets.expect.css @@ -22,6 +22,11 @@ bottom: var(--foo); } +.foo { + top: var(--foo); + bottom: var(--foo); +} + .foo { inset-block: 1px 2px 3px; } @@ -47,6 +52,13 @@ left: 1px; } +.foo { + top: var(--foo); + right: var(--foo); + bottom: var(--foo); + left: var(--foo); +} + .foo { top: 1px; right: 2px; @@ -54,6 +66,13 @@ left: 2px; } +.foo { + top: var(--foo); + right: 2px; + bottom: var(--foo); + left: 2px; +} + .foo { top: 1px; right: 2px; @@ -61,6 +80,13 @@ left: 2px; } +.foo { + top: 1px; + right: var(--foo); + bottom: 3px; + left: var(--foo); +} + .foo { top: 1px; right: var(--foo);