Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Typescript syntax, typos #13

Merged
merged 1 commit into from
Oct 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions text/000-css-literals.md
Original file line number Diff line number Diff line change
Expand Up @@ -519,9 +519,9 @@ const secondary = css([base, { background: "aqua" }]);

Backward compatibility with [Vanilla Extract's `style()`](https://vanilla-extract.style/documentation/api/style/) must be preserved.

- `css()` is alised to `style()`
- `css()` is aliased to `style()`
- Should be support [`vars: `](https://vanilla-extract.style/documentation/styling#css-variables) and [`selectors: `](https://vanilla-extract.style/documentation/styling#complex-selectors) properties
- `cssVariants()` is alised to [`styleVariants()`](https://vanilla-extract.style/documentation/api/style-variants/)
- `cssVariants()` is aliased to [`styleVariants()`](https://vanilla-extract.style/documentation/api/style-variants/)

```tsx
// Definition
Expand Down Expand Up @@ -612,17 +612,17 @@ Fortunately, the color picker extension([VS Code](https://marketplace.visualstud
That it inherits all of Vanilla Extract's constraints.
```typescript
const invalid = css({
// ❌ ERROR: Targetting `a[href]`
// ❌ ERROR: Targeting `a[href]`
"& a[href]": {...},

// ❌ ERROR: Targetting `.otherClass`
// ❌ ERROR: Targeting `.otherClass`
"& ~ div > .otherClass": {...}
});

// Also Invalid example:
export const child = css({});
export const parent = css({
// ❌ ERROR: Targetting `child` from `parent`
// ❌ ERROR: Targeting `child` from `parent`
[`& ${child}`]: {...}
});

Expand Down
4 changes: 2 additions & 2 deletions text/001-css-nesting.md
Original file line number Diff line number Diff line change
Expand Up @@ -581,7 +581,7 @@ I also don't think it's in any order that is significantly less readable.

This decision can be overturned later based on benchmark results, ease of debugging, etc.

### Exmaples
### Examples

You can now answer the question.

Expand Down Expand Up @@ -613,7 +613,7 @@ export const myCss = style({
});
```

It sounds complicated, but it's always transfiled with the following structure:
It sounds complicated, but it's always transpiled with the following structure:

**Convert to Vanilla Extract:**
```typescript
Expand Down
20 changes: 10 additions & 10 deletions text/002-css-rules.md
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,7 @@ You can think of use cases as those that are statically extracted and those that
```typescript
const myCSS = css([
myRule({ color: "red", background: "blue", size: "5px" }),
{ borderRadis: 999 }
{ borderRadius: 999 }
]);
```

Expand Down Expand Up @@ -722,8 +722,8 @@ const button = rules({
compoundVariants: [
{
variants: {
color: brand,
size: small,
color: "brand",
size: "small"
},
style: {
fontSize: "16px"
Expand Down Expand Up @@ -871,7 +871,7 @@ const myRule = rules([
myRule(["rounded", { color: "brand", size: "small" }]);
```

## 9. rulesVarints
## 9. rulesVariants

Inspired by the [PandaCSS's `defineSlotRecipe()`](https://panda-css.com/docs/concepts/slot-recipes#config-slot-recipe).
And at the same time, We refer to [Vanilla Extract's `styleVariants`](https://vanilla-extract.style/documentation/api/style-variants/) for code style for now. It could be change to [sub functions](https://github.com/mincho-js/mincho/issues/59).
Expand All @@ -892,7 +892,7 @@ const contents = rulesVariants({
},
size: {
large: { fontSize: "24px" },
medium: { fontSize: "18px" }
medium: { fontSize: "18px" },
small: { fontSize: "12px" }
}
},
Expand All @@ -902,7 +902,7 @@ const contents = rulesVariants({
}
},
image: {
width: '100%',
width: "100%",
border: "1px solid #ccc",
borderRadius: "5px",

Expand All @@ -912,8 +912,8 @@ const contents = rulesVariants({
width: "50px"
},
detail: {
width: '80%';
marginBottom: '10px';
width: "80%",
marginBottom: "10px"
}
}
}
Expand Down Expand Up @@ -998,7 +998,7 @@ const myCss = css([base, myRules]); // Same as [base, myRules()]

# Reference-level explanation

The default implementation starts with the [Vainilla Extracts's recipes package](https://vanilla-extract.style/documentation/packages/recipes/) [code](https://github.com/vanilla-extract-css/vanilla-extract/tree/master/packages/recipes).
The default implementation starts with the [Vanilla Extracts's recipes package](https://vanilla-extract.style/documentation/packages/recipes/) [code](https://github.com/vanilla-extract-css/vanilla-extract/tree/master/packages/recipes).

See also [Rainbow Sprinkles](https://github.com/wayfair/rainbow-sprinkles).

Expand Down Expand Up @@ -1047,7 +1047,7 @@ const Flex = rules((props) => ({
}));
```

## Programatically generated styles
## Programmatically generated styles

You might have styles that are generated at runtime.

Expand Down