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 c7034ba5..bdaa48a9 100644 --- a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js +++ b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js @@ -369,7 +369,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 { inherits: false }", 0); + _inject2("@property ----__hashed_var__1jqb1tb { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); const styles = { color: color => [{ "--__hashed_var__1jqb1tb": color == null ? null : "__hashed_var__b69i2g", @@ -393,7 +393,7 @@ describe('Evaluation of imported values works based on configuration', () => { [ "----__hashed_var__1jqb1tb", { - "ltr": "@property ----__hashed_var__1jqb1tb { inherits: false }", + "ltr": "@property ----__hashed_var__1jqb1tb { syntax: "*"; inherits: false; initial-value: "*";}", "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 985a3f0e..a16c0439 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 { inherits: false }", 0); + _inject2("@property --color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); + _inject2("@property --width { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); + _inject2("@property --color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); + _inject2("@property ----background-color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); + _inject2("@property --1ijzsae { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); + _inject2("@property --color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); + _inject2("@property ----background-color { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); + _inject2("@property --4xs81a { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); - _inject2("@property --w5m4kq { inherits: false }", 0); + _inject2("@property --4xs81a { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 0); + _inject2("@property --w5m4kq { syntax: \\"*\\"; inherits: false; initial-value: \\"*\\";}", 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 { inherits: false }", 0); - _inject2("@property --yepcm9 { inherits: false }", 0); - _inject2("@property --marginTop { inherits: false }", 0); + _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); 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 a3511f61..328b696f 100644 --- a/packages/babel-plugin/src/visitors/stylex-create/index.js +++ b/packages/babel-plugin/src/visitors/stylex-create/index.js @@ -127,7 +127,7 @@ export default function transformStyleXCreate( dynamicFnsNames.forEach((fnsName) => { injectedInheritStyles[fnsName] = { priority: 0, - ltr: `@property ${fnsName} { inherits: false }`, + ltr: `@property ${fnsName} { syntax: "*"; inherits: false; initial-value: "*";}`, rtl: null, }; });