Closed deckchairlabs closed 1 year ago
I'm working on a blog post about Ultra with an example app based on the current create script and here's my guide how to upgrade what the create script produces when twind
is selected to twind
1.0:
replace the twind imports with:
"@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",
replace all content with:
// @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 styleElementId = "__twind";
export const sheet = typeof Deno === "undefined"
? cssom(style#${styleElementId}
)
: virtual();
export const stringify = (target: unknown) =>
<style id="${styleElementId}">${stringify$(target)}</style>
;
//@ts-ignore twind type issue export const tw = twind( config, sheet, );
export const tx = tx$.bind(tw); export const injectGlobal = injectGlobal$.bind(tw); export const keyframes = keyframes$.bind(tw);
## src/twind/TwindProvider.tsx
- delete this file
## src/twind/twind.config.js
- create this file and add the following content:
```js
import { defineConfig } from "@twind/core";
import presetAutoprefix from "@twind/preset-autoprefix";
import presetTailwind from "@twind/preset-tailwind";
export default defineConfig({
theme: {
// add theme styles here
},
presets: [presetAutoprefix(), presetTailwind()],
});
remove twind.ts import
add the following imports
import { createHeadInsertionTransformStream } from "ultra/stream.ts";
import { stringify, tw } from "./src/twind/twind.ts";
in server.get() replace context.body return with:
// Inject the style tag into the head of the streamed response
const stylesInject = createHeadInsertionTransformStream(() => {
if (Array.isArray(tw.target)) {
return Promise.resolve(stringify(tw.target));
}
throw new Error("Expected tw.target to be an instance of an Array");
});
const transformed = result.pipeThrough(stylesInject);
return context.body(transformed, 200, {
"content-type": "text/html; charset=utf-8",
});
replace tw and TwindProvider imports with:
import { tw } from "./twind/twind.ts";
remove <TwindProvider>
and </TwindProvider>
tags
change h1
element's className to use tw
function call:
<h1 className={tw(`text-8xl font-mono margin mb-8`)}>
replace tw
import with:
import { tw } from "../twind/twind.ts"; // path may differ
Use the function call when using tw
like here:
<div className={tw(`text-xl bold`)} >
hii can i work on this?
hii can i work on this?
Please do!
Yes, do it! I don't have time right now myself.
Created couple of prs, please check
This issue deals with updating the create.ts
script used to initialize a new Ultra project. The notes I put above are changes that need to be made inside the lib/create
folder.
We need to update the create script to use the new twind 1.0 release