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

Implement fallback plugins when arbitrary values result in css from multiple plugins #9376

Merged
merged 14 commits into from
Sep 29, 2022

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Sep 20, 2022

This will allow us to use the fallback plugin if there are 2 colliding plugins given a certain arbitrary value that's indistinguishable in either plugin.

Normally we would then require a type cast, but now we can use the fallback. This is useful so that in the future adding more colliding plugins doesn't result in working code being broken because it requires a typehint all of a sudden.

E.g.:

<!-- Before -->
<div class="bg-[200px_100px]"></div><!-- Warning -->

<!-- Fix: -->
<div class="bg-[length:200px_100px]"></div>
<div class="bg-[position:200px_100px]"></div>
<!-- After (no fix required) -->
<div class="bg-[200px_100px]"></div><!-- Generates styles for the background-size -->

@RobinMalfait RobinMalfait force-pushed the feat/add-fallback-plugins branch 3 times, most recently from 49acd57 to 85adfe3 Compare September 23, 2022 13:26
@RobinMalfait RobinMalfait changed the title Add fallback to plugins for when arbitrary values collide [WIP]: Add fallback to plugins for when arbitrary values collide Sep 23, 2022
@RobinMalfait RobinMalfait changed the title [WIP]: Add fallback to plugins for when arbitrary values collide [WIP]: Implement fallback plugins when arbitrary values result in css from multiple plugins Sep 23, 2022
@RobinMalfait RobinMalfait changed the title [WIP]: Implement fallback plugins when arbitrary values result in css from multiple plugins Implement fallback plugins when arbitrary values result in css from multiple plugins Sep 23, 2022
RobinMalfait and others added 14 commits September 29, 2022 17:20
Ensure that `backgroundColor` can take any value
Whenever an arbitrary value results in css from multiple plugins we
first try to resolve a falback plugin.

The fallback mechanism works like this:

- If A has type `any` and B has type `color`, then B should win.

  > This is because `A` will match *anything*, but the more precise type
    should win instead. E.g.: `backgroundColor` has the type `any` so
    `bg-[100px_200px]` would match both the `backgroundColor` and
    `backgroundSize` but `backgroundSize` matched because of a specific
    type and not because of the `any` type.
- If A has type `length` and B has type `[length, { disambiguate: true }]`, then B should win.
  > This is because `B` marked the `length` as the plugin that should
    win in case a clash happens.
Just for future debugging reasons!
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.

2 participants