Update docs #254
Open
Update docs #254
Conversation
This file contains 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
🦋 Changeset detectedLatest commit: d4bc2fd The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Mad-Kat
changed the base branch from
fix-css-prop-in-exported-component
to
main
Mad-Kat
changed the base branch from
main
to
fix-css-prop-in-exported-component
jantimon
reviewed
Jan 6, 2025
| @@ -1,514 +1,582 @@ | |||
| --- | |||
| title: Migration from styled-components | |||
| description: We tried to keep the changes you need to know if you're already familiar with styled-components to a minimum. | |||
| description: We tried to keep the changes you need to know if you're already familiar with styled-components to a minimum. | |||
There was a problem hiding this comment.
Suggested change
| description: We tried to keep the changes you need to know if you're already familiar with styled-components to a minimum. | |
| description: `next-yak` provides a RSC compatible API which is very similar to the `styled-components` API. In most cases the only change necessary is the import. However there are some edge cases which have to be migrated manually. |
There was a problem hiding this comment.
maybe we could also mention that this was one of the core goals of yak so we can switch from styled-components without losing all the know-how and dev tooling
jantimon
reviewed
Jan 6, 2025
packages/docs/content/docs/migration-from-styled-components.mdx
Outdated
Show resolved
Hide resolved
jantimon
reviewed
Jan 6, 2025
| Otherwise it will be treated as a part of the styles and our parser has no way to differentiate between the two. | ||
| </Callout> | ||
|
|
||
| ### Attrs |
jantimon
reviewed
Jan 6, 2025
|
|
||
| In order to create a selector that includes another component, you can just reference it in the tagged | ||
| template literal. | ||
| Other usages of styled-components need a bit more work. Yak files are special files that are evaluated during build time and can be used to store static values that are extracted during build time. You can create a `.yak.ts` file everywhere in your project and it will be picked up by next-yak. |
There was a problem hiding this comment.
Suggested change
| Other usages of styled-components need a bit more work. Yak files are special files that are evaluated during build time and can be used to store static values that are extracted during build time. You can create a `.yak.ts` file everywhere in your project and it will be picked up by next-yak. | |
| Migrating `styled-components` with complex logic might need a bit more work. Yak files are special files that are evaluated during build time and can be used to store static values that are extracted during build time. You can create a `.yak.ts` or `.yak.tsx` file everywhere in your project and it will be picked up by next-yak. | |
| <Callout> | |
| **Important note on `.yak.tsx` files**: | |
| As yak files are evaluated on every code change, they will slow down your dev experience and your production build times. They should only be used as a last resort. | |
| </Callout> |
jantimon
reviewed
Jan 6, 2025
| import styled, { css } from 'styled-components'; | ||
| Another use case for yak files is to store shared values that are used across your application. | ||
| Next-yak tries to optimize each file individually and doesn't share values between files. | ||
| So if you have a value that is used in multiple files, you should move it to a yak file so that it can be optimized across all files. | ||
|
|
There was a problem hiding this comment.
We should explain that everything but calculations and string concatenations work WITHOUT yak files and should be preferred to keep the compilation fast
jantimon
reviewed
Jan 6, 2025
|
|
||
| Change the import from `styled-components` to `next-yak` and change the import of `styled` from a default import | ||
| to a named import. | ||
| ### CSS prop |
There was a problem hiding this comment.
Suggested change
| ### CSS prop | |
| ### CSS prop (optional) |
jantimon
reviewed
Jan 6, 2025
| }; | ||
| ``` | ||
|
|
||
| You can then use these values in your styled components. | ||
| Unfortunately, you can't use dynamic values in the css prop. If you need to use dynamic values, you should create a styled component with the styles from the css prop. |
There was a problem hiding this comment.
Instead show an example how dynamic runtime props work here
jantimon
reviewed
Jan 6, 2025
| ```tsx | ||
| import { styled } from 'next-yak'; | ||
| import { colors, breakpoints } from './constants.yak'; | ||
| ### Dynamic component styles |
There was a problem hiding this comment.
Maybe we should move this up (before yak files) under a Performance section
jantimon
reviewed
Jan 6, 2025
Comment on lines
+399
to
+402
| const Button = (props) => props.$primary | ||
| ? <button className="next-yak-1">Click me</button> | ||
| : <button className="next-yak-2">Click me</button> | ||
| ``` |
There was a problem hiding this comment.
Suggested change
| const Button = (props) => props.$primary | |
| ? <button className="next-yak-1">Click me</button> | |
| : <button className="next-yak-2">Click me</button> | |
| ``` | |
| const Button = (props) => | |
| <button className={props.$primary ? "next-yak-1" : "next-yak-2"}> | |
| Click me | |
| </button> |
jantimon
reviewed
Jan 6, 2025
| color: ${props => props.$primary ? "white" : "#BF4F74"}; | ||
|
|
||
| /* Alternative syntax */ | ||
| ${props => props.$primary ? "color: white;" : "color: #BF4F74;"} |
There was a problem hiding this comment.
here css`...` is missing - which is also important when migrating - should we also mention this somewhere?
rvetere
reviewed
Jan 7, 2025
|
|
||
| ```tsx title="util.yak.ts" | ||
| export const allColors = { // [!code ++] | ||
| "red": { // [!code ++] |
There was a problem hiding this comment.
is it ok to use css objects like this or should this also be wrapped with "css``"?
There was a problem hiding this comment.
I believe it's a constant in this case - so that should be fine
Mad-Kat
force-pushed
the
fix-css-prop-in-exported-component
branch
from
7b7ead0 to
1e840a7
Compare
jantimon
reviewed
Jan 8, 2025
| }; // [!code --] | ||
| ``` | ||
|
|
||
| ```tsx title="util.yak.ts" |
There was a problem hiding this comment.
I don't think this needs to be a .yak file
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Updated docs
next-yakPreview: https://next-yak-docs-9njrd6pud-jan-nicklas-projects.vercel.app/