chore: rename react to styled (#16)

examples/ladle/package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@casablanca/core": "0.0.1",
-    "@casablanca/react": "0.0.1",
+    "@casablanca/styled": "0.0.1",
     "@ladle/react": "^4.0.2",
     "@styled/typescript-styled-plugin": "^1.0.1",
     "@types/react": "^18.2.55",
@@ -31,7 +31,7 @@
       },
       "dependencies": [
         "../../packages/core:build",
-        "../../packages/react:build"
+        "../../packages/styled:build"
       ]
     }
   }

examples/ladle/src/components/button.tsx

@@ -1,5 +1,5 @@
 import { css } from "@casablanca/core";
-import { styled } from "@casablanca/react";
+import { styled } from "@casablanca/styled";
 import type { FC } from "react";
 import { useState } from "react";
 

examples/ladle/vite.config.ts

@@ -1,9 +1,9 @@
 import { casablanca } from "@casablanca/core/vite";
-import { casablancaReact } from "@casablanca/react/vite";
+import { casablancaStyled } from "@casablanca/styled/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [tsconfigPaths(), react(), casablancaReact(), casablanca()],
+  plugins: [tsconfigPaths(), react(), casablancaStyled(), casablanca()],
 });

examples/rakkas/package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@casablanca/core": "0.0.1",
-    "@casablanca/react": "0.0.1",
+    "@casablanca/styled": "0.0.1",
     "@styled/typescript-styled-plugin": "^1.0.1",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.18",
@@ -34,7 +34,7 @@
       },
       "dependencies": [
         "../../packages/core:build",
-        "../../packages/react:build"
+        "../../packages/styled:build"
       ]
     },
     "build": {
@@ -44,7 +44,7 @@
       },
       "dependencies": [
         "../../packages/core:build",
-        "../../packages/react:build"
+        "../../packages/styled:build"
       ],
       "files": [
         "./src/",

examples/rakkas/src/components/link.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@casablanca/react";
+import { styled } from "@casablanca/styled";
 import { StyledLink } from "rakkasjs";
 
 export const LinkWithBorder = styled(StyledLink)`

examples/rakkas/src/routes/counter/index.page.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@casablanca/react";
+import { styled } from "@casablanca/styled";
 import { type Page, StyledLink } from "rakkasjs";
 import { useState } from "react";
 

examples/rakkas/src/routes/index.page.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@casablanca/react";
+import { styled } from "@casablanca/styled";
 import { modularScale } from "polished";
 import type { Page } from "rakkasjs";
 import { LinkWithBorder } from "#@/components/link";

examples/rakkas/vite.config.ts

@@ -1,5 +1,5 @@
 import { casablanca } from "@casablanca/core/vite";
-import { casablancaReact } from "@casablanca/react/vite";
+import { casablancaStyled } from "@casablanca/styled/vite";
 import react from "@vitejs/plugin-react";
 import rakkas from "rakkasjs/vite-plugin";
 import { defineConfig } from "vite";
@@ -9,7 +9,7 @@ export default defineConfig({
   plugins: [
     tsconfigPaths(),
     react(),
-    casablancaReact(),
+    casablancaStyled(),
     casablanca(),
     rakkas(),
   ],

examples/vite-react-ts/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@casablanca/core": "0.0.1",
-    "@casablanca/react": "0.0.1",
+    "@casablanca/styled": "0.0.1",
     "@styled/typescript-styled-plugin": "^1.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "postcss-nested": "^6.0.1",
@@ -36,7 +36,7 @@
       ],
       "dependencies": [
         "../../packages/core:build",
-        "../../packages/react:build"
+        "../../packages/styled:build"
       ],
       "output": [
         "./dist/**"
@@ -50,7 +50,7 @@
       },
       "dependencies": [
         "../../packages/core:build",
-        "../../packages/react:build"
+        "../../packages/styled:build"
       ]
     },
     "preview": {

examples/vite-react-ts/src/App.tsx

@@ -1,4 +1,5 @@
-import { styled } from "@casablanca/react";
+import { css } from "@casablanca/core";
+import { styled } from "@casablanca/styled";
 import { modularScale } from "polished";
 import { type FC, useState } from "react";
 import { Button } from "./Button";
@@ -18,6 +19,10 @@ const StyledH1 = styled("h1")`
   font-size: ${modularScale(2)};
 `;
 
+const fontSize = css`
+  font-size: 3rem;
+`;
+
 const ContainerDiv = styled("div")`
   display: grid;
   grid-template-columns: auto;
@@ -48,6 +53,7 @@ export const App: FC = () => {
       >
         ChangeColor
       </button>
+      <p className={fontSize}>Foobar</p>
     </ContainerDiv>
   );
 };

examples/vite-react-ts/vite.config.ts

@@ -1,12 +1,13 @@
 import { casablanca } from "@casablanca/core/vite";
-import { casablancaReact } from "@casablanca/react/vite";
+import { casablancaStyled } from "@casablanca/styled/vite";
 import react from "@vitejs/plugin-react";
 import postcssNested from "postcss-nested";
 import { defineConfig } from "vite";
 
 export default defineConfig({
   css: {
     postcss: { plugins: [postcssNested()] },
+    devSourcemap: true,
   },
-  plugins: [react(), casablancaReact(), casablanca()],
+  plugins: [react(), casablancaStyled(), casablanca()],
 });

examples/vite-vanilla-ts/src/main.ts

@@ -15,7 +15,7 @@ const h1Style = css`
   border: 1px solid red;
 `;
 
-const divStyle = css`
+const divStyle: string = css`
   composes: ${grid};
   grid-template-columns: auto;
   justify-content: center;

examples/vite-vanilla-ts/vite.config.ts

@@ -3,4 +3,5 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [casablanca()],
+  css: { devSourcemap: true },
 });