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

Preserve custom properties in keyframes #16376

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Feb 8, 2025

Closes #16374

Ensure we don't remove custom properties from within @keyframe declarations.

@philipp-spiess philipp-spiess marked this pull request as ready for review February 10, 2025 08:48
@philipp-spiess philipp-spiess requested a review from a team as a code owner February 10, 2025 08:48
@@ -339,6 +341,10 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {

// AtRule
else if (node.kind === 'at-rule') {
if (node.name === '@keyframes') {
context = { ...context, keyframes: true }
Copy link
Member

Choose a reason for hiding this comment

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

@thecrypticace @RobinMalfait I was wondering if we can clean this up a bit by starting to use an AST walk instead and relying on the parentNode being set correctly to see wether we're inside a keyframe to avoid touching any properties. WDYT?

The code to remove nodes inside a context.reference boundary would become more annoying since we'll have to remove every sibling node instead of removing the whole context node (as context nodes are invisible for traversal).

Copy link
Member

@RobinMalfait RobinMalfait Feb 10, 2025

Choose a reason for hiding this comment

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

That's an option, but by the time we see a declaration, the parent node will never be the @keyframes node, but will be the intermediate rule:

@kefyrames {
  0% { /* <- this will be the parent */
    --foo: red;
  }
}

Or do you mean that at the the time we reach @keyframes, we do a walk in this block, and then mark all found declarations as "don't touch me"?

Copy link
Member

Choose a reason for hiding this comment

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

Yeah I was thinking of doing a return WalkAction.Skip maybe.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[v4.0.5] Used css variables are removed from @keyframes
4 participants