Skip to content

Resolve imports from CSS file#15010

Merged
RobinMalfait merged 8 commits into
nextfrom
feat/resolve-import-tree
Nov 15, 2024
Merged

Resolve imports from CSS file#15010
RobinMalfait merged 8 commits into
nextfrom
feat/resolve-import-tree

Conversation

@RobinMalfait

@RobinMalfait RobinMalfait commented Nov 15, 2024

Copy link
Copy Markdown
Member

This PR adds an improvement to the upgrade tool to make sure that if you pass a single CSS file, that the upgrade tool resolves all the imports in that file and processes them as well.

Test plan:

Created a project where index.css imports other.css. Another leave-me-alone.css is created to proof that this file is not changed. Running the upgrade guide using index.css also migrates other.css but not leave-me-alone.css.

Here is a video so you don't have to manually create it:

Screen.Recording.2024-11-15.at.21.36.27.mov

@RobinMalfait RobinMalfait force-pushed the feat/resolve-import-tree branch 3 times, most recently from 8c4fd84 to 691b093 Compare November 15, 2024 17:00
@RobinMalfait RobinMalfait force-pushed the feat/resolve-import-tree branch from 58ac51a to ecca617 Compare November 15, 2024 17:51
Comment on lines +92 to +93
// We don't want to process ignored files (like node_modules)
if (isIgnored(file)) continue

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you don't pass any files, then we used globby with the gitignore: true option, so I wanted to add that here as well.

I added an explicitly ignored CSS file to the integration tests to make sure we don't touch it.

@RobinMalfait RobinMalfait marked this pull request as ready for review November 15, 2024 18:56
@RobinMalfait RobinMalfait requested a review from a team as a code owner November 15, 2024 18:56
//
// We can't use the `sheet.root` directly because this will mutate the
// `sheet.root`
let processed = await postcss().use(atImport()).process(sheet.root.toString(), { from: file })

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a chance this would fail and we'd want to just skip it? Or should it hard crash or w/e?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also shouldn't we be able to do some of this stuff in analyze() instead of using postcss-import or nah?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, hmm, let me try to move it. Might work indeed 🤔

This allows us to use a sync version in places where we can't use async
code.
if (sheet.file) {
stylesheetsByFile.set(sheet.file, sheet)
try {
let sheet = Stylesheet.loadSync(file)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a little sad this isn't async but that's a much larger change

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep exactly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants