feat(transform, webpack-plugin): handle imported assets with asset tags#767
Merged
layershifter merged 1 commit intomicrosoft:mainfrom Mar 4, 2026
Merged
Conversation
📊 Bundle size report✅ No changes found |
6dea7be to
53d61c5
Compare
…-asset> tags When styles reference imported assets (`import logo from './logo.png'`), the VM Module class now wraps the resolved absolute path in `<griffel-asset>...</griffel-asset>` tags instead of returning the raw relative id. This allows the webpack plugin to reliably resolve asset paths when CSS is extracted to a different location. - Add ASSET_TAG_OPEN/ASSET_TAG_CLOSE constants and export from @griffel/transform - Module.require wraps non-JS/JSON assets in tags with absolute path - Add resolveAssetPathsInCSSRules utility in webpack-plugin to strip tags and resolve paths relative to source file before CSS generation - Update fixture snapshots with normalized hashes for cross-machine stability - Add unit tests for Module asset handling and resolveAssetPaths Closes microsoft#313 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
53d61c5 to
f1d3fd9
Compare
YuanboXue-Amber
approved these changes
Mar 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
import logo from './logo.png'), the VMModuleclass now wraps the resolved absolute path in<griffel-asset>...</griffel-asset>tags instead of returning the raw relative idresolveAssetPathsInCSSRulesutility strips the tags and resolves paths relative to the source file before CSS generationChanges
@griffel/transformconstants.mtswithASSET_TAG_OPEN/ASSET_TAG_CLOSE, exported from package indexModule.requirewraps non-JS/JSON assets:<griffel-asset>/abs/path/file.jpg</griffel-asset>module.test.mtswith 3 unit tests for asset handling@griffel/webpack-pluginresolveAssetPaths.mtsutility — walksCSSRulesByBucket, replaces tagged paths with relative paths (usesindexOf/slice, no regex)webpackLoader.mtscallsresolveAssetPathsInCSSRulesbeforegenerateCSSRulesresolveAssetPaths.test.mtswith 6 unit testsTest infrastructure
transformSync.test.mts— addednormalizeAssetFixtureOutput()to make asset fixture snapshots machine-independent (absolute paths → relative, hashes → ordered placeholders)GriffelPlugin.test.mts— addednormalizeGriffelHashes()for asset integration test stabilityTest plan
nx run @griffel/transform:type-checknx run @griffel/transform:test— 56/56 passnx run @griffel/transform:buildnx run @griffel/webpack-plugin:type-checknx run @griffel/webpack-plugin:test— 45/45 pass (including all asset integration tests)🤖 Generated with Claude Code