Closed jantimon closed 1 month ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
next-yak-benchmark | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jul 16, 2024 7:58am |
yacijs | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jul 16, 2024 7:58am |
This update focuses on enhancing the Next-Yak package's handling of CSS imports and module selectors. Key changes include refining the CSS import syntax in components, introducing a new function for encoding module imports, and significantly refactoring the logic for resolving cross-file selectors. These improvements aim to streamline CSS module resolution, ensure compatibility with CSS parsers, and enhance the robustness of the Yak CSS loader.
File Path | Summary of Changes |
---|---|
.../__tests__/tsloader.test.ts |
Modified CSS import statement in the Button component, updating the syntax from :module-selector-import(Icon from './icon') to :yak-css-import(./icon:any:Icon) . |
.../babel-yak-plugin.ts |
Added encodeModuleImport import and updated transformYakExpressions to use encodeModuleImport for generating replaceValue under certain conditions. |
.../lib/encodeModuleImport.ts |
Introduced encodeModuleImport function to generate a special CSS selector for module imports, handling URL encoding for the import chain. |
.../lib/resolveCrossFileSelectors.ts |
Refactored resolveCrossFileSelectors function, updated regex pattern, structured match processing, identifier resolution, and added new helper functions and types. |
packages/next-yak/loaders/lib/resolveCrossFileSelectors.ts
[error] 10-10: Don't use '{}' as a type. Prefer explicitly define the object shape. '{}' means "any non-nullable value". (lint/complexity/noBannedTypes)
packages/next-yak/loaders/lib/resolveCrossFileSelectors.ts (4)
`8-8`: **Approved new regex pattern for module imports.** The regex pattern looks well-formed to match the new `:yak-css-import` syntax. --- `8-37`: **Review of the main resolution logic in `resolveCrossFileSelectors`.** The function handles the new import syntax well, splitting and decoding the parameters correctly. However, error handling is robust but could be more descriptive in the error messages to aid debugging.--- Line range hint `38-77`: **Ensure robust handling of empty matches and backward iteration.** The logic for handling no matches and constructing the result string in reverse is correct. This ensures that replacements do not affect the positions of yet-to-be-processed matches.Tools
Biome
[error] 10-10: Don't use '{}' as a type. Prefer explicitly define the object shape. '{}' means "any non-nullable value". (lint/complexity/noBannedTypes)--- `84-103`: **Review of `getConstantFromResolvedTools
Biome
[error] 10-10: Don't use '{}' as a type. Prefer explicitly define the object shape. '{}' means "any non-nullable value". (lint/complexity/noBannedTypes)
Comparing feature/extend-css-module-import
(c9023de) with main
(d3cd4a4)
✅ 2
untouched benchmarks
change
:module-selector-import(${constantValue.name} from '${constantValue.source}')
to:yak-css-import(${modulePath}:${kind}:${encodedChain})
this allows us to import member expressions e.g.:
in our example a result looks like this:
becomes
:yak-css-import(./my/theme:any:color:dark:brandA:button%20color)
which is easy to parse inside the css-loader as we have to look only for the closing bracket