I created an eslint-plugin-react-strict-dom to notify about unused rules

[MoOx]

I created a plugin with one rule for now: no-unused-styles.
This allow to avoid dead styles definition when they aren't used.
The plugin skip every rules if the styles are exported.

I am wondering if you have a plugin in mind with the same name or if that's ok for you if I publish this plugin with the name eslint-plugin-react-strict-dom ?

[necolas]

Yes we might want to use that name. But we'd probably re-export the stylex eslint-plugin which already has this functionality, and can be configured to understand the RSD imports

[necolas]

Hey just circling back on this. Would you be interested in putting up a PR for the plugin?

[MoOx]

Sure ! I will do that as soon as I find time for this. Do you know where the current package original code is so I can merge this two ? My plugin only have no-unused-styles and the one on npm have valid-styles (might require some work to improve it but still interesting to have it).

[javascripter]

StyleX eslint package have reference to stylex hardcoded so it's not directly usable.

@MoOx FYI, I removed hard-coding in this PR so StyleX ESLint rules can now be used for RSD apps as well.

module.exports = {
  plugins: ["@stylexjs"],
  rules: {
    "@stylexjs/no-unused": [
      "error",
      {
        validImports: [{ from: "react-strict-dom", as: "css" }],
      },
    ],
    // other rules can be configured similarly
  },
};

With unused style detection etc. applied, we saw 6.7% reduction in initial JS and 25% JS chunk reduction(!) in some pages in our prod app.

Wondering if we should re-export StyleX rules or keep the implementation separate so that rules can be developed independently?

[MoOx]

I just checked the stylex eslint package and it seems everything we need is there. I guess we should avoid redoing this code in this repo.

I was trying to do something to wrap rules with validImports injected, but I faced an issue where I am not sure what version of eslint I should use for this work, because stylex eslint plugin doesn't specify eslint version it should be used with.

More info here facebook/stylex#1248

[necolas]

We could start with a plug-in that uses latest eslint and no-unused. If the StyleX one gets updated we could reuse some rules from there later. The allowed syntax in RSD is a little different though.

Another feature would be linting allowed html props in case someone isn't using a type checker. Although at some point it might be good to have the logic for validation shared between the babel and eslint plugins if possible.

This also reminds me that we need to upgrade eslint in the monorepo. I think I tried a while ago but got lost with all the migration steps