exhibitionist-digital · deckchairlabs · Nov 22, 2022 · Nov 22, 2022 · Nov 22, 2022 · Nov 22, 2022
diff --git 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, <App />);
diff --git 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
@@ -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
@@ -14,7 +14,7 @@ export default function App() {
         <link rel="shortcut icon" href="/favicon.ico" />
       </head>
       <body>
-        <div className={tw`flex flex-col gap-4`}>
+        <div className={tw(`flex flex-col gap-4`)}>
           <Suspense>
             <Post />
             <Post />

diff --git 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 (
-    <div className={tw`text(3xl white) bg-${color || "blue"}-500 p-3`}>
+    <div className={tw(`text(3xl white) bg-${color || "blue"}-500 p-3`)}>
       Hello with-twind!
     </div>
   );

diff --git a/examples/with-twind/src/twind.config.js 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
@@ -1,22 +1,30 @@
-import { cssomSheet, setup, tw } from "twind";
+// @see https://twind.style/library-mode
+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<string>()) => {
-  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) =>
+  `<style id="${styleElementId}">${stringify$(target)}</style>`;
+
+//@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
@@ -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",