From 587ca6eb270ed40df1d607c225dee0786d57d87a Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Mon, 11 Dec 2023 11:40:48 -0800 Subject: [PATCH 1/2] Fix: border-left not being rendered --- .../__tests__/stylex-transform-call-test.js | 51 +++++++++++++++++++ .../__tests__/stylex-transform-create-test.js | 24 +++++---- .../src/preprocess-rules/application-order.js | 36 ++++--------- 3 files changed, 76 insertions(+), 35 deletions(-) diff --git a/packages/babel-plugin/__tests__/stylex-transform-call-test.js b/packages/babel-plugin/__tests__/stylex-transform-call-test.js index 70ab9812b..6188a9133 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-call-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-call-test.js @@ -1142,6 +1142,57 @@ describe('@stylexjs/babel-plugin', () => { `); }); + test('stylex call with composition border shorthands with external styles', () => { + expect( + transform(` + import stylex from 'stylex'; + stylex(styles.default, props); + const styles = stylex.create({ + default: { + borderTop: '5px solid blue', + borderLeft: '5px solid blue', + borderRight: '5px solid blue', + borderBottom: '5px solid blue', + }, + }); + `), + ).toMatchInlineSnapshot(` + "import stylex from 'stylex'; + stylex(styles.default, props); + stylex.inject(".x16gpukw{border-top:5px solid blue}", 2000); + stylex.inject(".x13nwy86{border-left:5px solid blue}", 2000); + stylex.inject(".x2ekbea{border-right:5px solid blue}", 2000); + stylex.inject(".x1o3008b{border-bottom:5px solid blue}", 2000); + const styles = { + default: { + borderTop: "x16gpukw", + borderTopWidth: null, + borderTopStyle: null, + borderTopColor: null, + borderLeft: "x13nwy86", + borderLeftWidth: null, + borderInlineStartWidth: null, + borderInlineEndWidth: null, + borderLeftStyle: null, + borderInlineStartStyle: null, + borderInlineEndStyle: null, + borderLeftColor: null, + borderInlineStartColor: null, + borderInlineEndColor: null, + borderRight: "x2ekbea", + borderRightWidth: null, + borderRightStyle: null, + borderRightColor: null, + borderBottom: "x1o3008b", + borderBottomWidth: null, + borderBottomStyle: null, + borderBottomColor: null, + $$css: true + } + };" + `); + }); + test('stylex call using exported styles with pseudo selectors, and queries', () => { expect( transform(` diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-test.js index 093694bda..b41aefebf 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-create-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-create-test.js @@ -727,10 +727,8 @@ describe('@stylexjs/babel-plugin', () => { stylex.inject(".x1lh7sze{border-color:var(--divider)}", 2000); stylex.inject(".xud65wk{border-bottom-color:red}", 4000); stylex.inject(".x12oqio5{border-radius:4px}", 2000); + stylex.inject(".x1lmef92{padding:calc((100% - 50px) * .5) var(--rightpadding,20px)}", 1000); stylex.inject(".xexx8yu{padding-top:0}", 4000); - stylex.inject(".xcrpjku{padding-right:var(--rightpadding,20px)}", 3000, ".xcrpjku{padding-left:var(--rightpadding,20px)}"); - stylex.inject(".x18xuxqe{padding-bottom:calc((100% - 50px) * .5)}", 4000); - stylex.inject(".xyv1419{padding-left:var(--rightpadding,20px)}", 3000, ".xyv1419{padding-right:var(--rightpadding,20px)}"); stylex.inject(".x1bg2uv5{border-color:green}", 2000);" `); }); @@ -893,17 +891,23 @@ describe('@stylexjs/babel-plugin', () => { $$css: true }, short: { + padding: "x1lmef92", + paddingStart: null, + paddingLeft: null, + paddingEnd: null, + paddingRight: null, paddingTop: "xexx8yu", - paddingEnd: "xcrpjku", - paddingBottom: "x18xuxqe", - paddingStart: "xyv1419", + paddingBottom: null, $$css: true }, shortReversed: { - paddingTop: "xx5yw1q", - paddingEnd: "xcrpjku", - paddingBottom: "x18xuxqe", - paddingStart: "xyv1419", + paddingTop: null, + padding: "x1lmef92", + paddingStart: null, + paddingLeft: null, + paddingEnd: null, + paddingRight: null, + paddingBottom: null, $$css: true }, valid: { diff --git a/packages/shared/src/preprocess-rules/application-order.js b/packages/shared/src/preprocess-rules/application-order.js index 6a04a61d7..d80bb2539 100644 --- a/packages/shared/src/preprocess-rules/application-order.js +++ b/packages/shared/src/preprocess-rules/application-order.js @@ -9,8 +9,6 @@ import type { TStyleValue } from '../common-types'; -import splitValue from '../utils/split-css-value'; - /** * Shorthand properties: * - [x] all - Should be banned @@ -156,15 +154,15 @@ const shorthands = { ['borderBottomColor', null], ], // @Deprecated - borderInlineStart: (_rawValue: TStyleValue): TReturn => [ - ['borderInlineStart', null], + borderInlineStart: (rawValue: TStyleValue): TReturn => [ + ['borderInlineStart', rawValue], ...shorthands.borderInlineStartWidth(null), ...shorthands.borderInlineStartStyle(null), ...shorthands.borderInlineStartColor(null), ], // @Deprecated - borderLeft: (_rawValue: TStyleValue): TReturn => [ - ['borderLeft', null], + borderLeft: (rawValue: TStyleValue): TReturn => [ + ['borderLeft', rawValue], ...shorthands.borderLeftWidth(null), ...shorthands.borderLeftStyle(null), ...shorthands.borderLeftColor(null), @@ -567,26 +565,14 @@ const shorthands = { ], padding: (rawValue: TStyleValue): TReturn => { - const values = - typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue); - if (values.length === 1) { - return [ - ['padding', values[0]], - ['paddingStart', null], - ['paddingLeft', null], - ['paddingEnd', null], - ['paddingRight', null], - ['paddingTop', null], - ['paddingBottom', null], - ]; - } - // @Deprecated - const [top, right = top, bottom = top, left = right] = values; return [ - ['paddingTop', top], - ['paddingEnd', right], - ['paddingBottom', bottom], - ['paddingStart', left], + ['padding', rawValue], + ['paddingStart', null], + ['paddingLeft', null], + ['paddingEnd', null], + ['paddingRight', null], + ['paddingTop', null], + ['paddingBottom', null], ]; }, paddingInline: (rawValue: TStyleValue): TReturn => [ From 816f97d5206b03679a48d5d4dc86b2984e7a7a1e Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Mon, 11 Dec 2023 11:49:29 -0800 Subject: [PATCH 2/2] Update snapshots --- .../shared/__tests__/stylex-create-test.js | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/packages/shared/__tests__/stylex-create-test.js b/packages/shared/__tests__/stylex-create-test.js index ca2cbe7a9..5e56e60d6 100644 --- a/packages/shared/__tests__/stylex-create-test.js +++ b/packages/shared/__tests__/stylex-create-test.js @@ -204,33 +204,26 @@ describe('stylex-create-test', () => { { "short": { "$$css": true, - "paddingBottom": "x18xuxqe", - "paddingEnd": "xcrpjku", - "paddingStart": "xyv1419", + "padding": "x1lmef92", + "paddingBottom": null, + "paddingEnd": null, + "paddingLeft": null, + "paddingRight": null, + "paddingStart": null, "paddingTop": "xexx8yu", }, }, { - "x18xuxqe": { - "ltr": ".x18xuxqe{padding-bottom:calc((100% - 50px) * .5)}", - "priority": 4000, + "x1lmef92": { + "ltr": ".x1lmef92{padding:calc((100% - 50px) * .5) var(--rightpadding,20px)}", + "priority": 1000, "rtl": null, }, - "xcrpjku": { - "ltr": ".xcrpjku{padding-right:var(--rightpadding,20px)}", - "priority": 3000, - "rtl": ".xcrpjku{padding-left:var(--rightpadding,20px)}", - }, "xexx8yu": { "ltr": ".xexx8yu{padding-top:0}", "priority": 4000, "rtl": null, }, - "xyv1419": { - "ltr": ".xyv1419{padding-left:var(--rightpadding,20px)}", - "priority": 3000, - "rtl": ".xyv1419{padding-right:var(--rightpadding,20px)}", - }, }, ] `);