tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.38k stars 4.22k forks source link

Ensure it's safe to perform suffix-less migrations #14979

Closed RobinMalfait closed 1 week ago

RobinMalfait commented 1 week ago

This PR makes sure that migrations from suffix-less candidates (e.g.: rounded, blur, shadow) are safe to be migrated.

In some code snippets that's not always the case.

Given the following code snippet:

type Star = [
  x: number,
  y: number,
  dim?: boolean,
  blur?: boolean,
  rounded?: boolean,
  shadow?: boolean,
]

function Star({ point: [cx, cy, dim, blur, rounded, shadow] }: { point: Star }) {
  return <svg class="rounded shadow blur" filter={blur ? 'url(…)' : undefined} />
}

Without this change, it would result in:

type Star = [
  x: number,
  y: number,
  dim?: boolean,
  blur-sm?: boolean,
  rounded-sm?: boolean,
  shadow-sm?: boolean,
]

function Star({ point: [cx, cy, dim, blur-sm, rounded-sm, shadow-sm] }: { point: Star }) {
  return <svg class="rounded-sm shadow-sm blur-sm" filter={blur-sm ? 'url(…)' : undefined} />
}

But with this change, it results in:

type Star = [
  x: number,
  y: number,
  dim?: boolean,
  blur?: boolean,
  rounded?: boolean,
  shadow?: boolean,
]

function Star({ point: [cx, cy, dim, blur, rounded, shadow] }: { point: Star }) {
  return <svg class="rounded-sm shadow-sm blur-sm" filter={blur ? 'url(…)' : undefined} />
}

Notice how the classes inside the class attribute are converted, but the ones in the types or as part of the JavaScript code (e.g.: filter={blur ? 'url(…)' : undefined}) are not.