Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: fix @property inherits syntax #806

Merged
merged 1 commit into from
Dec 11, 2024
Merged

Conversation

Samantha-Zhan
Copy link
Contributor

@Samantha-Zhan Samantha-Zhan commented Dec 11, 2024

What changed / motivation ?

This PR is a quick fix to resolve AtRuleBodyInvalid SyntaxError: Invalid @ rule body error caught in while doing task #799 (see discussion). This is a bug caused by previous PR feat: dynamic styles set inherits to false #794, where we did not include mandatory descriptors syntax and initial-value for @property (see MDS docs @property initial-value syntax).

BEFORE

injectedInheritStyles[fnsName] = {
          priority: 0,
          ltr: `@property ${fnsName} { inherits: false }`,
          rtl: null,
        };
});

AFTER

injectedInheritStyles[fnsName] = {
          priority: 0,
          ltr: `@property ${fnsName} { syntax: "*"; inherits: false; initial-value: "*";}`,
          rtl: null,
};

Linked PR/Issues

Fixes #794

Additional Context

running rollup generate bundle.js with no error: npx rollup --config ./rollup.config.mjs

Pre-flight checklist

@Samantha-Zhan Samantha-Zhan requested review from necolas and nmn December 11, 2024 22:52
@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 11, 2024
Copy link

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

@stylexjs/[email protected] size:compare
./size-compare.js /tmp/tmp.ELXrexTJsj /tmp/tmp.9asTYUZCv0

Results Base Patch Ratio
stylex/lib/stylex.js
· compressed 729 729 1.00
· minified 2,541 2,541 1.00
stylex/lib/StyleXSheet.js
· compressed 1,266 1,266 1.00
· minified 3,776 3,776 1.00
rollup-example/.build/bundle.js
· compressed 562,983 562,983 1.00
· minified 10,185,368 10,185,368 1.00
rollup-example/.build/stylex.css
· compressed 99,229 99,229 1.00
· minified 745,845 745,845 1.00

Copy link
Contributor

@necolas necolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good find.

BTW, to run the rollup build in the stylex repo, you can run the relevant worksplace script:

npm run build -w rollup-example

The benefit of doing this is that it wraps the specifics of the script (config path, etc). In general, all scripts within the repo can be called using npm run <script-name> -w <workspace-name> from the root

@Samantha-Zhan Samantha-Zhan merged commit 95feb9f into main Dec 11, 2024
8 checks passed
@nmn nmn deleted the chore/fix-@property-syntax branch December 16, 2024 05:55
aminaopio pushed a commit to aminaopio/stylex that referenced this pull request Dec 22, 2024
aminaopio pushed a commit to aminaopio/stylex that referenced this pull request Dec 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants