Skip to content

Commit

Permalink
chore: fix @Property inherits syntax (facebook#806)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Samantha-Zhan @aminaopio
Samantha-Zhan authored and aminaopio committed Dec 22, 2024
1 parent 04f91b7 commit eeeaf12
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 16 deletions.
4 changes: 2 additions & 2 deletions packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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,
Expand Down
26 changes: 13 additions & 13 deletions packages/babel-plugin/__tests__/stylex-transform-create-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin/src/visitors/stylex-create/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
});
Expand Down

0 comments on commit eeeaf12

Please sign in to comment.