[Feature request] New rule: no-unnecessary-arbitrary-value

[threehams]

Is your feature request related to a problem? Please describe. I'm working on a team of about 30 people on a medium-sized codebase. It's common to see an arbitrary value like this:

text-[14px]

This is exactly the same as:

text-md

However, it creates duplicate CSS. Over time, this adds up to a significant amount of extra CSS for no benefit.

Describe the solution you'd like Detect when an arbitrary value is identical to a configured value, and offer to replace it.

bg-[#f8f8f8]
// fixes to
bg-light

text-[var(--gray)]
// fixes to
text-dark

This is all dependent on the project's configuration.

Out of scope:

• Similar (but not exact) colors are not flagged. Only exact matches are done.
• No unit conversion is done to/from rem/px, for example.

Describe alternatives you've considered

1. The current rule is no-arbitrary-value, but that shuts them off completely.
2. More granularity on no-arbitrary-value. There are specific things that tend to get duplicated, like text-, bg-, and border-. Disabling arbitrary values on these could help prevent these from spreading.
3. Instead of going completely for the "all values", make a very targeted rule for the most common offenders.

**Risks: Arbitrary values come later in the stylesheet, so a fixer will not be 100% safe to run. However, these should already be considered bugs, hopefully caught by no-contradicting-classname.

Additional context I'm working on this right now for a private project, so I'll get it done regardless in the next couple weeks, but I thought it may be useful to have it more broadly available.

[francoismassart]

Good idea 👍

[francoismassart]

@threehams, the last example you listed might be incorrect:

text-[var(--gray)]
// fixes to
text-dark

The variable could hold a different/updated value based on the css variable usage. For example a product page using a themed text color, by redeclaring the --var

[threehams]

I left out the Tailwind config, which would look like this:

textColor: {
  dark: "var(--gray-800)"
}

CSS vars are only swapped for config when the config resolves to the CSS var text - it won't try to go find the value of a variable.

[martinsjek]

Any updates on this?

[threehams]

It's been backlogged at work because:

• There are simpler and quicker ways to reduce CSS size (which is the main benefit for us here).
• I had a lot of difficulty understanding this repo, in particular how to look up values from config. There are many similar rules, but nothing that overlaps enough to make this an easy task.

This doesn't mean I won't work on it at all, just that other things are piled up in front of it for now.

Anyone else interested in working on this wouldn't conflict with anything I've done so far.

[francoismassart]

The new rule has been added since v3.15.0

npm i eslint-plugin-tailwindcss@latest -D