fix: remove unnecessary polyfills (#5)

removes some unnecessary polyfills when building CSS values.
`marginBlock` / `marginInline` / `paddingBlock` / `paddingInline` have
been available in all browsers since April 2021. `maxSize` and `minSize`
don't appear to be real CSS properties, and would be better suited to be
configured as custom shorthands in the stitches config.

this resolves an issue with the "splitBySpace" approach that does not
correctly handle `!important`

Author: abeljohn

packages/core/src/convert/toPolyfilledValue.js

@@ -1,6 +1,3 @@
-const splitBySpace = /\s+(?![^()]*\))/
-const split = (fn) => (data) => fn(...(typeof data === 'string' ? String(data).split(splitBySpace) : [data]))
-
 export const toPolyfilledValue = {
 	// prefixed properties
 	appearance: (d) => ({ WebkitAppearance: d, appearance: d }),
@@ -15,12 +12,4 @@ export const toPolyfilledValue = {
 	maskSize: (d) => ({ WebkitMaskSize: d, maskSize: d }),
 	textSizeAdjust: (d) => ({ WebkitTextSizeAdjust: d, textSizeAdjust: d }),
 	userSelect: (d) => ({ WebkitUserSelect: d, userSelect: d }),
-
-	// logical properties
-	marginBlock: split((s, e) => ({ marginBlockStart: s, marginBlockEnd: e || s })),
-	marginInline: split((s, e) => ({ marginInlineStart: s, marginInlineEnd: e || s })),
-	maxSize: split((b, i) => ({ maxBlockSize: b, maxInlineSize: i || b })),
-	minSize: split((b, i) => ({ minBlockSize: b, minInlineSize: i || b })),
-	paddingBlock: split((s, e) => ({ paddingBlockStart: s, paddingBlockEnd: e || s })),
-	paddingInline: split((s, e) => ({ paddingInlineStart: s, paddingInlineEnd: e || s })),
 }

packages/core/tests/universal-logical-properties.js

@@ -9,18 +9,18 @@ describe('Logical Properties', () => {
 				marginBlock: 0,
 			},
 			'y-element': {
-				marginBlock: 10,
+				marginBlock: '10px !important',
 			},
 			'z-element': {
 				marginBlock: '5px 10px',
 			},
 		})()
 
 		expect(toString()).toBe(
-			`--sxs{--sxs:1 IvBLl}@media{` +
-				`x-element{margin-block-start:0;margin-block-end:0}` +
-				`y-element{margin-block-start:10px;margin-block-end:10px}` +
-				`z-element{margin-block-start:5px;margin-block-end:10px}` +
+			`--sxs{--sxs:1 fXyjwi}@media{` +
+				`x-element{margin-block:0}` +
+				`y-element{margin-block:10px !important}` +
+				`z-element{margin-block:5px 10px}` +
 			`}`
 		)
 	})
@@ -33,18 +33,18 @@ describe('Logical Properties', () => {
 				marginInline: 0,
 			},
 			'y-element': {
-				marginInline: 10,
+				marginInline: '10px !important',
 			},
 			'z-element': {
 				marginInline: '5px 10px',
 			},
 		})()
 
 		expect(toString()).toBe(
-			`--sxs{--sxs:1 eNPHKF}@media{` +
-				`x-element{margin-inline-start:0;margin-inline-end:0}` +
-				`y-element{margin-inline-start:10px;margin-inline-end:10px}` +
-				`z-element{margin-inline-start:5px;margin-inline-end:10px}` +
+			`--sxs{--sxs:1 ghnYnm}@media{` +
+				`x-element{margin-inline:0}` +
+				`y-element{margin-inline:10px !important}` +
+				`z-element{margin-inline:5px 10px}` +
 			`}`
 		)
 	})
@@ -57,18 +57,18 @@ describe('Logical Properties', () => {
 				paddingBlock: 0,
 			},
 			'y-element': {
-				paddingBlock: 10,
+				paddingBlock: '10px !important',
 			},
 			'z-element': {
 				paddingBlock: '5px 10px',
 			},
 		})()
 
 		expect(toString()).toBe(
-			`--sxs{--sxs:1 kcHEgy}@media{` +
-				`x-element{padding-block-start:0;padding-block-end:0}` +
-				`y-element{padding-block-start:10px;padding-block-end:10px}` +
-				`z-element{padding-block-start:5px;padding-block-end:10px}` +
+			`--sxs{--sxs:1 gDAiNt}@media{` +
+				`x-element{padding-block:0}` +
+				`y-element{padding-block:10px !important}` +
+				`z-element{padding-block:5px 10px}` +
 			`}`
 		)
 	})
@@ -81,18 +81,18 @@ describe('Logical Properties', () => {
 				paddingInline: 0,
 			},
 			'y-element': {
-				paddingInline: 10,
+				paddingInline: '10px !important',
 			},
 			'z-element': {
 				paddingInline: '5px 10px',
 			},
 		})()
 
 		expect(toString()).toBe(
-			`--sxs{--sxs:1 cVrbiG}@media{` +
-				`x-element{padding-inline-start:0;padding-inline-end:0}` +
-				`y-element{padding-inline-start:10px;padding-inline-end:10px}` +
-				`z-element{padding-inline-start:5px;padding-inline-end:10px}` +
+			`--sxs{--sxs:1 geOKtd}@media{` +
+				`x-element{padding-inline:0}` +
+				`y-element{padding-inline:10px !important}` +
+				`z-element{padding-inline:5px 10px}` +
 			`}`
 		)
 	})