From 55ab16a3f934c059b4b4d7dd3953ebca290bb93c Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 2 Oct 2024 17:44:44 +0900
Subject: [PATCH] Fix: Typescript syntax, typos

---
 text/000-css-literals.md | 10 +++++-----
 text/001-css-nesting.md  |  4 ++--
 text/002-css-rules.md    | 20 ++++++++++----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/text/000-css-literals.md b/text/000-css-literals.md
index 76131c1..eb27565 100644
--- a/text/000-css-literals.md
+++ b/text/000-css-literals.md
@@ -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
@@ -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}`]: {...}
 });
 
diff --git a/text/001-css-nesting.md b/text/001-css-nesting.md
index a3865cb..18e61e0 100644
--- a/text/001-css-nesting.md
+++ b/text/001-css-nesting.md
@@ -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.
 
@@ -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
diff --git a/text/002-css-rules.md b/text/002-css-rules.md
index 3b0c4b0..07ec905 100644
--- a/text/002-css-rules.md
+++ b/text/002-css-rules.md
@@ -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 }
 ]);
 ```
 
@@ -722,8 +722,8 @@ const button = rules({
   compoundVariants: [
     {
       variants: {
-        color: brand,
-        size: small,
+        color: "brand",
+        size: "small"
       },
       style: {
         fontSize: "16px"
@@ -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).
@@ -892,7 +892,7 @@ const contents = rulesVariants({
       },
       size: {
         large: { fontSize: "24px" },
-        medium: { fontSize: "18px" }
+        medium: { fontSize: "18px" },
         small: { fontSize: "12px" }
       }
     },
@@ -902,7 +902,7 @@ const contents = rulesVariants({
     }
   },
   image: {
-    width: '100%',
+    width: "100%",
     border: "1px solid #ccc",
     borderRadius: "5px",
 
@@ -912,8 +912,8 @@ const contents = rulesVariants({
           width: "50px"
         },
         detail: {
-          width: '80%';
-          marginBottom: '10px';
+          width: "80%",
+          marginBottom: "10px"
         }
       }
     }
@@ -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).
 
@@ -1047,7 +1047,7 @@ const Flex = rules((props) => ({
 }));
 ```
 
-## Programatically generated styles
+## Programmatically generated styles
 
 You might have styles that are generated at runtime.