stylex icon indicating copy to clipboard operation
stylex copied to clipboard

[Good First Issue] Handle absolute paths for alternate inject source

Open nmn opened this issue 6 months ago • 5 comments

A relatively easy task to get started

For anyone looking to make a contribution to the core Babel plugin, this is a small self-contained task.

Background

By default, when runtimeInjection is true, the function inject styles at runtime is imported as the default import from '@stylexjs/stylex/lib/stylex-inject'.

A recent change has added support for string and objects to be used as the value of runtimeInjection as well.

  • A string is used as the alternate import source for the inject function.
  • An object of the form {from: string, as: string} can be used for a named import from a custom source.

Current behaviour

Today, any custom import source for the inject function is used as a literal string. This doesn't work well when relative file paths are needed which will be different in each file in a project.

Expected Change

The StateManager class should be updated to detect relative or absolute paths and automatically generate the relative paths necessary from the file being transformed.

Here are the steps involved:

  1. If the file is a relative file path. (Starts with ./ or ../)
    • Convert to an absolute file path by path.join with the rootDir passed in.
  2. Update the get runtimeInjection() getter function in state-manager.js to automatically convert any absolute file paths to relative file paths from the current file.
    • NOTE: Absolute file paths start with / on Unix systems, but may start with C:\\ on Windows.

Stretch Goal: The same fix should also be made for importSources.

The importSources option can also accept custom import paths. However, in this case, existing imports need to be verified as coming from a given location.

nmn avatar Dec 19 '23 03:12 nmn