feat: add no-unused eslint rule to find unused styles

[Samantha-Zhan]

What changed / motivation ?

Addresses task ESLint: find unused styles #702.

Identify all styles that 1) not used; 2) not exported. The feature also allow auto fix by removing fields that are unused.

import stylex from 'stylex';
// exported, considered all used
const styles = stylex.create({
  main: {
    borderColor: {
      default: 'green',
      ':hover': 'red',
      '@media (min-width: 1540px)': 1366,
    },
    borderRadius: 10,
    display: 'flex',
  },
  dynamic: (color) => ({
    backgroundColor: color,
  })
});
// not exported, not used, will report warning `Unused style detected: stylesUnused.maxDimensionsModal`
const stylesUnused = stylex.create({
    maxDimensionsModal: {
      maxWidth: '90%',
      maxHeight: '90%',
    },
});
export default styles;

Linked PR/Issues

fixes #702.

Additional Context

Created sets of tests in stylex-no-unused-test.js, all 5 tests passed; also conducted manual testing in apps/docs/ folder.

Pre-flight checklist

• I have read the contributing guidelines
  Contribution Guidelines
• Performed a self-review of my code

[github-actions]

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

@stylexjs/scripts@0.9.3 size:compare
./size-compare.js /tmp/tmp.hFJyaM6NWc /tmp/tmp.nBqv2OHADI

Results	Base	Patch	Ratio
stylex/lib/stylex.js
· compressed	729	729	1.00
· minified	2,541	2,541	1.00
stylex/lib/StyleXSheet.js
· compressed	1,266	1,266	1.00
· minified	3,776	3,776	1.00
rollup-example/.build/bundle.js
· compressed	563,025	563,025	1.00
· minified	10,185,368	10,185,368	1.00
rollup-example/.build/stylex.css
· compressed	99,154	99,154	1.00
· minified	745,649	745,649	1.00

[nmn]

you can leave this enabled.

[Samantha-Zhan]

[update] after uncommenting, I notice the eslint error Definition for rule '@stylexjs/no-unused' was not found. starting appearing again, but I am certain it was working before as I was able to test the rule&auto-fix inside the docs folder. I attempted to rebuild multiple times but currently still doesn't work...

[nmn]

Great start so far!

Left a bunch of comments to complete the PR.

[nmn]

You should also look for any top level consts so you can resolve objects passed into stylex.create that uses a local const.

[Samantha-Zhan]

I don't think I understand you completely, do you mean something like:

const field = {
  backgroundColor: 'white',
};

const styles = stylex.create({
  main: {
    height: 4,
  },
  field,
});

[nmn]

Yes. Something like that.

Or even the entire object that's passed into stylex.create.

[Samantha-Zhan]

Got it, however, when testing it out inside doc folder, I realize both of the format are actually illegal:

[nmn]

Yeah, we need to fix that rule too. We can punt on this for now.

[mellyeliu]

do we want to use warn or error here?

[Samantha-Zhan]

If we follow the behavior in internal codebase, then this should be error; i agree we should change it to error(will update this after figuring out the definition not found error, @nmn is helping investigating this)

[nmn]

I will enable this after this PR lands. There are some issues with dependencies where this doesn't always work consistently.

[mellyeliu]

since this is repeated across a few rules, maybe we can extract this logic out into a utils

[Samantha-Zhan]

I think extracting getting sourcecode make sense, I will push up a PR after this PR is resolved

[Samantha-Zhan]

[PR UP] chore: extract eslint get souce code to util

[nmn]

This looks almost good enough to land. It needs one tiny change. I'll see if I can patch that and merge it if you can't update it in time.