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

Use long form <length> | <percentage> syntax for properties #13660

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

Conversation

thecrypticace
Copy link
Contributor

In Firefox Nightly, when using properties that declare the shorthand syntax <length-percentage>, there is a bug where two properties side-by-side e.g. var(—foo)var(—bar) invalidate the property value when it should not. Switching the @property definition to use the long form syntax <length> | <percentage> fixes this.

Using properties that declare the shorthand syntax `<length-percentage>` has a bug where two properties side-by-side e.g. `var(—foo)var(—bar)` invalidate the property value when it should not. Switching the `@property` definition to use the long form syntax `<length> | <percentage>` fixes this.
@thecrypticace thecrypticace force-pushed the fix/v4-property-syntax-ff-updates branch from d88d9a5 to 85589ec Compare May 8, 2024 21:52
Copy link
Contributor

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

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

Should we update the <length-percentage> for gradient stops as well for completeness sake? 🤔

It looks like it's working, even though it's also generating concatenated vars:

.from-red-500 {
  --tw-gradient-from: var(--color-red-500, #ef4444);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
}

https://jsfiddle.net/jyqn70w1/1/

@thecrypticace
Copy link
Contributor Author

Not sure what you mean? The variable --tw-gradient-stops is * not <length-percentage>. I'd already updated the position properties in the above commit:
6a28317#diff-036c40df8e1498a5c399fb971238a19fcdab257001b9703661a46a110984b56aR2574-R2576

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.

None yet

2 participants