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 😞