diff --git a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js index 9e23cdfc..95c93ca8 100644 --- a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js +++ b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js @@ -371,7 +371,7 @@ describe('Evaluation of imported values works based on configuration', () => { import 'otherFile.stylex'; import { MyTheme } from 'otherFile.stylex'; _inject2(".__hashed_var__b69i2g{--__hashed_var__1jqb1tb:var(----__hashed_var__1jqb1tb)}", 1); - _inject2("@property ----__hashed_var__1jqb1tb { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property ----__hashed_var__1jqb1tb { syntax: \\"*\\"; inherits: false;}", 0); const styles = { color: color => [{ "--__hashed_var__1jqb1tb": color == null ? null : "__hashed_var__b69i2g", @@ -395,7 +395,7 @@ describe('Evaluation of imported values works based on configuration', () => { [ "----__hashed_var__1jqb1tb", { - "ltr": "@property ----__hashed_var__1jqb1tb { syntax: "*"; inherits: false; initial-value: "*";}", + "ltr": "@property ----__hashed_var__1jqb1tb { syntax: "*"; inherits: false;}", "rtl": null, }, 0, diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-test.js index 1f8fbeba..843cae52 100644 --- a/packages/babel-plugin/__tests__/stylex-transform-create-test.js +++ b/packages/babel-plugin/__tests__/stylex-transform-create-test.js @@ -1323,7 +1323,7 @@ describe('@stylexjs/babel-plugin', () => { import stylex from 'stylex'; _inject2(".xrkmrrc{background-color:red}", 3000); _inject2(".xfx01vb{color:var(--color)}", 3000); - _inject2("@property --color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --color { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: color => [{ backgroundColor: "xrkmrrc", @@ -1353,7 +1353,7 @@ describe('@stylexjs/babel-plugin', () => { import stylex from 'stylex'; _inject2(".xrkmrrc{background-color:red}", 3000); _inject2(".x1bl4301{width:var(--width)}", 4000); - _inject2("@property --width { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --width { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: width => [{ backgroundColor: "xrkmrrc", @@ -1387,7 +1387,7 @@ describe('@stylexjs/babel-plugin', () => { _inject2(".xrkmrrc{background-color:red}", 3000); _inject2(".xfx01vb{color:var(--color)}", 3000); _inject2(".x1mqxbix{color:black}", 3000); - _inject2("@property --color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --color { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: color => [{ backgroundColor: "xrkmrrc", @@ -1419,7 +1419,7 @@ describe('@stylexjs/babel-plugin', () => { var _inject2 = _inject; import stylex from 'stylex'; _inject2(".x15mgraa{--background-color:var(----background-color)}", 1); - _inject2("@property ----background-color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property ----background-color { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: bgColor => [{ "--background-color": bgColor == null ? null : "x15mgraa", @@ -1449,7 +1449,7 @@ describe('@stylexjs/babel-plugin', () => { import stylex from 'stylex'; _inject2(".x1gykpug:hover{background-color:red}", 3130); _inject2(".xtyu0qe:hover{color:var(--1ijzsae)}", 3130); - _inject2("@property --1ijzsae { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --1ijzsae { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: color => [{ ":hover_backgroundColor": "x1gykpug", @@ -1482,7 +1482,7 @@ describe('@stylexjs/babel-plugin', () => { _inject2(".xrkmrrc{background-color:red}", 3000); _inject2(".xfx01vb{color:var(--color)}", 3000); _inject2(".x1mqxbix{color:black}", 3000); - _inject2("@property --color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --color { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: color => [{ backgroundColor: "xrkmrrc", @@ -1514,7 +1514,7 @@ describe('@stylexjs/babel-plugin', () => { var _inject2 = _inject; import stylex from 'stylex'; _inject2(".x15mgraa{--background-color:var(----background-color)}", 1); - _inject2("@property ----background-color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property ----background-color { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: bgColor => [{ "--background-color": bgColor == null ? null : "x15mgraa", @@ -1550,7 +1550,7 @@ describe('@stylexjs/babel-plugin', () => { _inject2(".x1n25116{color:var(--4xs81a)}", 3000); _inject2("@media (min-width: 1000px){.xtljkjt.xtljkjt:hover{color:green}}", 3330); _inject2(".x17z2mba:hover{color:blue}", 3130); - _inject2("@property --4xs81a { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --4xs81a { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: color => [{ backgroundColor: "xrkmrrc", @@ -1587,8 +1587,8 @@ describe('@stylexjs/babel-plugin', () => { _inject2(".x1n25116{color:var(--4xs81a)}", 3000); _inject2("@media (min-width: 1000px){.xtljkjt.xtljkjt:hover{color:green}}", 3330); _inject2(".x1d4gdy3:hover{color:var(--w5m4kq)}", 3130); - _inject2("@property --4xs81a { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); - _inject2("@property --w5m4kq { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --4xs81a { syntax: \\"*\\"; inherits: false;}", 0); + _inject2("@property --w5m4kq { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: color => [{ backgroundColor: "xrkmrrc", @@ -1632,9 +1632,9 @@ describe('@stylexjs/babel-plugin', () => { _inject2(".x1k44ad6{margin-left:var(--14mfytm)}", 3000, ".x1k44ad6{margin-right:var(--14mfytm)}"); _inject2(".x10ktymb:hover{margin-left:var(--yepcm9)}", 3130, ".x10ktymb:hover{margin-right:var(--yepcm9)}"); _inject2(".x17zef60{margin-top:var(--marginTop)}", 4000); - _inject2("@property --14mfytm { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); - _inject2("@property --yepcm9 { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); - _inject2("@property --marginTop { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --14mfytm { syntax: \\"*\\"; inherits: false;}", 0); + _inject2("@property --yepcm9 { syntax: \\"*\\"; inherits: false;}", 0); + _inject2("@property --marginTop { syntax: \\"*\\"; inherits: false;}", 0); export const styles = { default: margin => [{ backgroundColor: "xrkmrrc", diff --git a/packages/babel-plugin/src/visitors/stylex-create/index.js b/packages/babel-plugin/src/visitors/stylex-create/index.js index 27713950..6360064e 100644 --- a/packages/babel-plugin/src/visitors/stylex-create/index.js +++ b/packages/babel-plugin/src/visitors/stylex-create/index.js @@ -134,7 +134,7 @@ export default function transformStyleXCreate( dynamicFnsNames.forEach((fnsName) => { injectedInheritStyles[fnsName] = { priority: 0, - ltr: `@property ${fnsName} { syntax: "*"; inherits: false; initial-value: "*";}`, + ltr: `@property ${fnsName} { syntax: "*"; inherits: false;}`, rtl: null, }; });