From 68779531b6d13685303cb65a219de4dce0b0d483 Mon Sep 17 00:00:00 2001 From: James Edmonds Date: Tue, 22 Nov 2022 05:26:27 +0000 Subject: [PATCH 1/3] update twind to 1.0 Fixes #211 --- examples/with-twind/client.tsx | 7 ++++- examples/with-twind/importMap.json | 5 +-- examples/with-twind/server.tsx | 9 +++--- examples/with-twind/src/app.tsx | 2 +- examples/with-twind/src/post.tsx | 2 +- examples/with-twind/src/twind.config.js | 8 +++++ examples/with-twind/src/twind.ts | 41 +++++++++++++++---------- importMap.dev.json | 5 +-- 8 files changed, 50 insertions(+), 29 deletions(-) create mode 100644 examples/with-twind/src/twind.config.js diff --git a/examples/with-twind/client.tsx b/examples/with-twind/client.tsx index 84386473..a2fa8504 100644 --- a/examples/with-twind/client.tsx +++ b/examples/with-twind/client.tsx @@ -1,5 +1,10 @@ -import "./src/twind.ts"; +import { setup } from "@twind/core"; import hydrate from "ultra/hydrate.js"; import App from "./src/app.tsx"; +import { sheet } from "./src/twind.ts"; +import config from "./src/twind.config.js"; + +//@ts-ignore twind types issue +setup(config, sheet); hydrate(document, ); diff --git a/examples/with-twind/importMap.json b/examples/with-twind/importMap.json index ceef3703..12790e6c 100644 --- a/examples/with-twind/importMap.json +++ b/examples/with-twind/importMap.json @@ -6,7 +6,8 @@ "react-dom/server": "https://esm.sh/react-dom@18.2.0/server?dev", "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev", "ultra/": "https://deno.land/x/ultra@v2.1.3/", - "twind": "https://esm.sh/twind@0.16.17", - "twind/sheets": "https://esm.sh/twind@0.16.17/sheets" + "@twind/core": "https://esm.sh/@twind/core@1.0.1", + "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.1", + "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.0.1" } } diff --git a/examples/with-twind/server.tsx b/examples/with-twind/server.tsx index aaca49e5..e2dd0b93 100644 --- a/examples/with-twind/server.tsx +++ b/examples/with-twind/server.tsx @@ -1,9 +1,8 @@ -import { sheet } from "./src/twind.ts"; import { serve } from "https://deno.land/std@0.164.0/http/server.ts"; -import { getStyleTag } from "twind/sheets"; import { createServer } from "ultra/server.ts"; import { createHeadInsertionTransformStream } from "ultra/stream.ts"; import App from "./src/app.tsx"; +import { stringify, tw } from "./src/twind.ts"; const server = await createServer({ importMapPath: Deno.env.get("ULTRA_MODE") === "development" @@ -20,11 +19,11 @@ server.get("*", async (context) => { // Inject the style tag into the head of the streamed response const stylesInject = createHeadInsertionTransformStream(() => { - if (sheet.target instanceof Set) { - return Promise.resolve(getStyleTag(Array.from(sheet.target))); + if (Array.isArray(tw.target)) { + return Promise.resolve(stringify(tw.target)); } - throw new Error("Expected sheet.target to be an instance of Set"); + throw new Error("Expected tw.target to be an instance of an Array"); }); const transformed = result.pipeThrough(stylesInject); diff --git a/examples/with-twind/src/app.tsx b/examples/with-twind/src/app.tsx index 4801072f..ace04afc 100644 --- a/examples/with-twind/src/app.tsx +++ b/examples/with-twind/src/app.tsx @@ -14,7 +14,7 @@ export default function App() { -
+
diff --git a/examples/with-twind/src/post.tsx b/examples/with-twind/src/post.tsx index 20cb0f60..58dd14b5 100644 --- a/examples/with-twind/src/post.tsx +++ b/examples/with-twind/src/post.tsx @@ -2,7 +2,7 @@ import { tw } from "./twind.ts"; export default function Post({ color }: { color?: string }) { return ( -
+
Hello with-twind!
); diff --git a/examples/with-twind/src/twind.config.js b/examples/with-twind/src/twind.config.js new file mode 100644 index 00000000..1beb4543 --- /dev/null +++ b/examples/with-twind/src/twind.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from "@twind/core"; +import presetAutoprefix from "@twind/preset-autoprefix"; +import presetTailwind from "@twind/preset-tailwind"; + +export default defineConfig({ + theme: {}, + presets: [presetAutoprefix(), presetTailwind()], +}); diff --git a/examples/with-twind/src/twind.ts b/examples/with-twind/src/twind.ts index a9bc9643..69d424e1 100644 --- a/examples/with-twind/src/twind.ts +++ b/examples/with-twind/src/twind.ts @@ -1,22 +1,29 @@ -import { cssomSheet, setup, tw } from "twind"; +import { + cssom, + injectGlobal as injectGlobal$, + keyframes as keyframes$, + stringify as stringify$, + twind, + tx as tx$, + virtual, +} from "@twind/core"; +import config from "./twind.config.js"; -const serverSheet = (target = new Set()) => { - return { - target, - insert: (rule: string) => { - target.add(rule); - }, - }; -}; +const styleElementId = "__twind"; -// Create a "CSSStyleSheet" on the client and a "ServerSheet" when server side -export const sheet = typeof Deno === "undefined" ? cssomSheet() : serverSheet(); +export const sheet = typeof Deno === "undefined" + ? cssom(`style#${styleElementId}`) + : virtual(); -setup({ +export const stringify = (target: unknown) => + ``; + +//@ts-ignore twind type issue +export const tw = twind( + config, sheet, - preflight: true, - theme: {}, - plugins: {}, -}); +); -export { tw }; +export const tx = tx$.bind(tw); +export const injectGlobal = injectGlobal$.bind(tw); +export const keyframes = keyframes$.bind(tw); diff --git a/importMap.dev.json b/importMap.dev.json index 2feb2368..3f76f1be 100644 --- a/importMap.dev.json +++ b/importMap.dev.json @@ -20,8 +20,9 @@ "zod": "https://deno.land/x/zod@v3.19.1/mod.ts", "@mdx-js/run": "https://esm.sh/@mdx-js/mdx@2.1.3/lib/run.js", "@mdx-js/react": "https://esm.sh/@mdx-js/react@2.1.3?external=react", - "twind": "https://esm.sh/twind@0.16.17", - "twind/sheets": "https://esm.sh/twind@0.16.17/sheets", + "@twind/core": "https://esm.sh/@twind/core@1.0.1", + "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.1", + "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.0.1", "@emotion/react": "https://esm.sh/@emotion/react@11.10.0?external=react", "@emotion/styled": "https://esm.sh/@emotion/styled@11.10.0?external=react,@emotion/react", "@emotion/cache": "https://esm.sh/@emotion/cache@11.10.0", From 5af7a47724815a64900bfbbd0f589e273909d475 Mon Sep 17 00:00:00 2001 From: James Edmonds Date: Tue, 22 Nov 2022 05:28:31 +0000 Subject: [PATCH 2/3] docs: added comment --- examples/with-twind/src/twind.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/with-twind/src/twind.ts b/examples/with-twind/src/twind.ts index 69d424e1..79898b4d 100644 --- a/examples/with-twind/src/twind.ts +++ b/examples/with-twind/src/twind.ts @@ -1,3 +1,4 @@ +// @see https://twind.style/library-mode import { cssom, injectGlobal as injectGlobal$, From 0638abb3683fd3e5f62c88db40ed91e8a4884881 Mon Sep 17 00:00:00 2001 From: James Edmonds Date: Tue, 22 Nov 2022 07:18:30 +0000 Subject: [PATCH 3/3] fix: imports external --- examples/with-twind/importMap.json | 2 +- importMap.dev.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/with-twind/importMap.json b/examples/with-twind/importMap.json index 12790e6c..3b22bc3c 100644 --- a/examples/with-twind/importMap.json +++ b/examples/with-twind/importMap.json @@ -8,6 +8,6 @@ "ultra/": "https://deno.land/x/ultra@v2.1.3/", "@twind/core": "https://esm.sh/@twind/core@1.0.1", "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.1", - "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.0.1" + "@twind/preset-tailwind": "https://esm.sh/*@twind/preset-tailwind@1.0.1" } } diff --git a/importMap.dev.json b/importMap.dev.json index 3f76f1be..4096a159 100644 --- a/importMap.dev.json +++ b/importMap.dev.json @@ -22,7 +22,7 @@ "@mdx-js/react": "https://esm.sh/@mdx-js/react@2.1.3?external=react", "@twind/core": "https://esm.sh/@twind/core@1.0.1", "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.1", - "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.0.1", + "@twind/preset-tailwind": "https://esm.sh/*@twind/preset-tailwind@1.0.1", "@emotion/react": "https://esm.sh/@emotion/react@11.10.0?external=react", "@emotion/styled": "https://esm.sh/@emotion/styled@11.10.0?external=react,@emotion/react", "@emotion/cache": "https://esm.sh/@emotion/cache@11.10.0",