Perf: bail out fast if input doesn't contain stylex

[SukkaW]

The PR applies performance improvements similar to johanholmerin/style9#74.

Currently, when the stylex babel plugin collects no stylex import, the babel plugin will bail out the transformation.

IMHO we can push that even further. The entire babel.transformAsync can be avoided for better performance if the input code doesn't contain the string stylex.

I've confirmed that after the changes, npm run test passed on my machine.

[necolas]

FWIW we're planning to support configuration to process files using imports with names other than stylex, so at some point this probably wouldn't be a hardcoded string.

The last idea was had was to extend the importSources API (used to alias package name) to support defining custom specifiers too. For example

{
  importSources: [
    // name of package
    // `import * as styles from 'stylex'
    'stylex',
    // name of package and specifier
    // `import * as css from 'other-package'
    [ 'other-package', { specifier: 'css' } ]
  ]
}

[nmn]

This is a good idea, but needs to account for inputSources

[SukkaW]

@nmn @necolas Well, I found out that things are a little bit complicated:

• The stylex's webpack plugin has already implemented fast bail-out:

  • stylex/packages/webpack-plugin/src/index.js

    Lines 157 to 163 in fa2fd6e

    	if (
    	this.stylexImports.some((importName) => inputCode.includes(importName))
    	) {
    	const originalSource = this.babelConfig.babelrc
    	? await fs.readFile(filename, 'utf8')
    	: inputCode;
    	const { code, map, metadata } = await babel.transformAsync(

  • However, the bail-out was based on an option stylexImports, which is inconsistent as the Babel plugin's option name is importSources. The PR passes the webpack plugin's stylexImports to the Babel plugin's importSources.
  • Also, the default value of the webpack plugin's stylexImports is also wrong. The PR corrects that.
• The stylex's Rollup plugin hasn't implemented the fast bail-out:
  • The PR adds that.

I have also rebased the PR to clean up the changes. The npm run test still passes on my machine after those changes.

[nmn]

This looks good! Thanks for catching those mistakes.

[nmn]

👍

[nmn]

We can probably change this to just @stylexjs/stylex.

[SukkaW]

IMHO we could keep ['stylex', '@stylexjs/stylex'] to prevent any potential breaking changes.

[nmn]

👍

[nmn]

👍

[nmn]

Could you please run prettier so we can merge? Thanks!