Skip to content

fix(declaration-converters-mapping): fix border shorthands, improves border-width, and fixes border arbitrary values #24

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

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

Conversation

guivr
Copy link

@guivr guivr commented Sep 16, 2024

Supports border shorthand when some of its values are missing (width, style, color)

Description of change

The way border shorthand was being converted, it was always expecting a perfect value, in order, and nothing missing: width style color. But sometimes border doesn't come with width, or style, or color - and it's still valid CSS. Or it could be on a completely different order, like color width style.

Example:

td {
  border: solid rgba(148, 163, 184, 0.1);
}

was converting to:

td {
  @apply border-[solid] border-[163,184,0.1)];
}

now converts to:

td {
  @apply border-[solid] border-[rgba(148,163,184,0.1)];
}

Fixes #26

It now also properly handles border-width arbitrary value. It used to convert border-width: 4.5em to border-[4.5em] which is wrong (that is for border-color), now it converts to border-w-[4.5em] and it's quite smart and converts border-width: 1px 2px; to border-y border-x-2

Fixes +1: #25

Supports border shorthand when some of its values are missing (width, style, color)
Add a new test for border shorthand that doesn't has a border-width on the value
…der shorthand

Now arbitrary values for border shorthand works correctly. Previously, everything was using
border-[] prefix, but that is only correct for border-color arbitrary values.

fix Jackardios#25
@guivr
Copy link
Author

guivr commented Sep 16, 2024

This now also fixes #25
Sorry for the not so beautiful code - it was generated with AI
Passes all tests though

But can be improved for sure

…when 4 values are declared"

Now if X and Y values are the same, even if border-width had 4 values declared, it uses X and Y
instead of using 4 different classes (2 vs 4)

fix Jackardios#25
@guivr guivr changed the title fix(declaration-converters-mapping): better support for border shorthand fix(declaration-converters-mapping): fix border shorthand, border-width, border-color, and arbitrary values Sep 17, 2024
@guivr guivr changed the title fix(declaration-converters-mapping): fix border shorthand, border-width, border-color, and arbitrary values fix(declaration-converters-mapping): fix border shorthands, improves border-width, and fixes border arbitrary values Sep 17, 2024
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.

Fails with border shorthand when it's missing border-width value (and others)
1 participant