Eslint Plugin

[roginfarrer]

I wonder if there's been any consideration for (or openness to) an official ESLint plugin for Vanilla Extract. I think it would take something about what's lint-able, but my team has encountered a couple of patterns that can be done one way, but should be done another. My team is considering creating and open sourcing a package, but I'm wondering if we should make it official in this repo.

Example: prefer-style-selectors-to-global-style

Sometimes we see an author use globalStyle to have one class style another:

const styleA = style({});

const styleB = style({});

globalStyle(`${styleA} ${styleB}`, { });

However, I think it's preferred to use selectors and &

const styleA = style({});

const styleB = style({
  selectors: {
    [`${styleA} &`]: { }
  }
});

[mcrider]

As well as the above, a linter rule for preferring unquoted values (e.g. numbers for pixel values), and rules for standardizing the ordering of properties would be super nice (there's probably a few other things I could think of). @roginfarrer Did your team have any movement on a package for this?

[mike-wheel]

+1 to the ordering of properties. I would want it to be configurable like stylelint-order to define groups of properties.

For example, I prefer to have a couple groups of properties, and to be mostly sorted alphabetically within them:

1. Box model (position, top, right, bottom, left, display, etc)
2. Typography (color, fontSize, etc)
3. Everything else.

But it looks like this discussion has stalled 😞

[antebudimir]

First off, I've been loving vanilla-extract for the past 10 months. 😊

The only thing I really missed was the ability to sort CSS properties. Since there wasn't an ESLint plugin for that, I decided to create my own.

@antebudimir/eslint-plugin-vanilla-extract tackles some of the issues mentioned here. It offers CSS property ordering (alphabetical, concentric, and custom), auto-fix capabilities, and supports multiple Vanilla Extract APIs.

If anyone wants to give it a shot, you can find more details in the readme. Looking forward to hearing your feedback.

[mcrider]

That's great! Unfortunately our project is stuck on eslint 8 but hoping to unstick that in the near future and will definitely try this out

[antebudimir]

I feel you. Made the jump to ESLint v9 last month, finally. Knew that switch was coming, so I held off on working on the plugin until I got it done.

[antebudimir]

Starting with the release 1.10.0, the @antebudimir/eslint-plugin-vanilla-extract documentation has been updated to include setup instructions for ESLint 8.57.0 and 8.57.1.

While the plugin was initially built for ESLint 9's flat config system, the good news is that ESLint 8.57.0+ backported the flat config system from v9, making it possible to use the plugin with minimal adjustments.