feat: add global-css-to-css-module codemod POC

[valerybugakov]

Context

This PR adds a proof of concept codemod that can automatically convert React component's stylesheet from global scope to CSS module. Detailed documentation, more granular tests and interactive CLI will be added in subsequent PRs. This PR adds the core logic on which it will be possible to iterate with smaller PRs.

I shrank the scope of the PR to a minimum. All the repo setup is done separately. If you ignore a couple of big fixture files, it should be ~480 lines. 🙂

How it works

I've added a lot of comments to the source code about implementation details, and here's the high-level overview:

1. Find .tsx file. (At the moment, the file path is hardcoded for test purposes.)
2. Check if the corresponding .scss file exists in the same folder according to our naming convention.
3. Convert this .scss file into .module.scss.
4. Get info about CSS class names and matching export tokens that will be used in the React component markup.
5. Replace all matching class names with export tokens in the .tsx file.
6. Add classNames import to the .tsx file if needed.
7. Add .module.scss import to the .tsx file.

Closes https://github.com/sourcegraph/sourcegraph/issues/23011.

[5h1rU]

@valerybugakov, I'm wondering if you faced the situation where the SCCS files are using the styles directly in an HTML tag
e.g.

ul {
  margin: 0;
}

How will this be included in modules since it doesn't have a selector to convert?

[vovakulikov]

@5h1rU As I understand this case isn't a problem for the global styles to CSS modules migration. Example with tag (ul) selector will stay the same without any modifications in processed files. So by these changes, we won't change anything about these selectors which is good I think cause we won't break anything that currently works.

[valerybugakov]

Yep, @vovakulikov already answered the question. Top-level global tags are not the target of this codemod. This codemod targets only global styles defined for our React components. Global tag selectors will be partially extracted into Wildcard gradually as we add more components to it.

[valerybugakov]

Update: unit-tests in progress PR: #5
It might be easier to understand what's going after looking into it.

[vovakulikov]

@valerybugakov I left a couple of questions and comments. Besides this, LGTM. Nice naming of test classes btw.

[vovakulikov]

@valerybugakov is it possible that tsx file has more than one styles file? (I mean it should be possible but do we need support in this case?)

[vovakulikov]

Also, do we handle scss @imports in style files when we getting info about CSS class names and matching export tokens?

[valerybugakov]

is it possible that tsx file has more than one styles file?

Definitely, I saw components like that in our codebase, but decided to skip this use-case for now.

do we handle scss @imports in style files when we getting info about CSS class names and matching export tokens?

We don't touch them at the moment. Looking into our codebase it seems that having a whitelist of imports to keep (e.g., breakpoints import) and defaulting to delete all other imports would be a good solution. What do you think, @vovakulikov?