search

jantimon / next-yak

a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS
https://yak.js.org
108 stars 2 forks source link

introduce :yak-css-import #127

Closed jantimon closed 1 month ago

jantimon commented 1 month ago

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.:

import { colors } from "./my/theme";

export const Button = styled.button`
  color: ${colors.dark.brandA["button color"]}
`;

in our example a result looks like this:

.MyWrapper {
  :yak-css-import(../ClockHands:any:ClockHand) {
    background: #ffb134;
    animation: colorRotation :yak-css-import(./duration:any:verySlow) linear infinite;
  }
}

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

vercel[bot] commented 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
coderabbitai[bot] commented 1 month ago

Walkthrough

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.

Changes

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.
Recent review details **Configuration used: CodeRabbit UI** **Review profile: CHILL**
Commits Files that changed from the base of the PR and between 9ecc099fdfef79d5ac191e561b3bcb50ccb8e93b and c9023deb8b92b64b6592aae4eb78e36559cfd252.
Files selected for processing (1) * packages/next-yak/loaders/lib/resolveCrossFileSelectors.ts (7 hunks)
Additional context used
Biome
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)
Additional comments not posted (4)
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.
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)
--- 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 `getConstantFromResolved
--- Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): > :bangbang: **IMPORTANT** > Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged. - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
codspeed-hq[bot] commented 1 month ago

CodSpeed Performance Report

Merging #127 will not alter performance

Comparing feature/extend-css-module-import (c9023de) with main (d3cd4a4)

Summary

✅ 2 untouched benchmarks