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

add global for animations #76

Merged

Conversation

jantimon
Copy link
Contributor

add support for the global() function in animation and animation-name properties

the change modifies the localizeDeclarationValues function to handle the global() function specifically for animation properties:

// Add check for global() in animation properties
if (node.type === "function" && 
    node.value.toLowerCase() === "global" && 
    /animation(-name)?$/i.test(declaration.prop) && 
    node.nodes.length === 1) {
  Object.assign(node, node.nodes[0]);
  return;
}

This allows us to:

  1. Detect global() usage in animation properties
  2. Extract the animation name from within the global() wrapper
  3. Prevent the animation name from being localized
  4. Preserve all other animation properties

Examples

.component {
  animation: global(fadeIn) 0.5s ease-in;
  /* or */
  animation-name: global(fadeIn);
}

Testing

Added test cases to verify:

  • global() function works with animation-name property
  • Existing functionality remains unchanged

fixes #75

Copy link
Member

@alexander-akait alexander-akait left a comment

Choose a reason for hiding this comment

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

Looks good, but why don't use :global, we usually use this syntax everywhere

@alexander-akait
Copy link
Member

Got it - #75

@jantimon jantimon force-pushed the feature/global-animations branch from 4bafb86 to 6c3a86b Compare October 30, 2024 18:32
@alexander-akait
Copy link
Member

There is an intresting question, we support syntax :local, i.e. animation-name: :local(bar); and this is definitely confusing, so I think I'll introduce two types of syntax:

  • :local() and :global() - in order to support the old syntax and frankly speaking we should advise against using it, but we won't be able to change such an established syntax quickly in many repos
  • local() and global() - new syntax and recommended to avoid problems with parsers

This syntax is for declaration only, selector syntax remains the same

@alexander-akait
Copy link
Member

I will finish this pr don't worry

$unset: Infinity,
$revert: Infinity,
"$revert-layer": Infinity,
};
Copy link
Member

Choose a reason for hiding this comment

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

Avoid creating variables every time, better performance

};

function localizeDeclaration(declaration, context) {
const isAnimation = /animation(-name)?$/i.test(declaration.prop);
Copy link
Member

@alexander-akait alexander-akait Nov 2, 2024

Choose a reason for hiding this comment

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

Simlify logic for any animation declarations and avoid code duplication

node.type = "word";
node.value = node.nodes[0].value;

return localizeDeclNode(node, {
Copy link
Member

@alexander-akait alexander-akait Nov 2, 2024

Choose a reason for hiding this comment

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

Localize local() in global mode so syntax works for all modes

if (node.value.toLowerCase() === "global" && node.nodes.length === 1) {
node.type = "word";
node.value = node.nodes[0].value;
}
Copy link
Member

Choose a reason for hiding this comment

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

One place for our logic for global

@alexander-akait alexander-akait merged commit fde62d7 into css-modules:master Nov 2, 2024
19 checks passed
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.

add support for global() function in animation names
2 participants