css-to-tailwindcss icon indicating copy to clipboard operation
css-to-tailwindcss copied to clipboard

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

Open guivr opened this issue 1 year ago • 1 comments

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

guivr avatar Sep 16 '24 12:09 guivr

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

guivr avatar Sep 16 '24 16:09 guivr