Using twind standalone #65
-
|
I've been trying to find a way to do this but I'm hitting a wall. What I'm trying to do is pass twind some markup with twind classes in it, and have it return the CSS for it. Thanks |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments
-
|
Hey 👋 good question and yes it is possible! We do our tests like this.. you will need to use a custom import { create } from 'twind'
import { virtualSheet } from 'twind/sheets'
const sheet = virtualSheet()
const { tw } = create({
sheet: sheet,
// Fail tests on unknown rules or theme values
mode: 'strict',
// Prevent preflight rules to be added into sheet
preflight: false,
// Do not prefix properties and values
prefix: false,
});
tw`text(2xl black)`
console.log(sheet.target)
// => .text-2xl{font-size:2rem}.text-black{color:black} |
Beta Was this translation helpful? Give feedback.
-
|
To expand on what Luke wrote... Sync with default tw import { setup } from 'twind'
import { virtualSheet, shim, getStyleTag, getStyleTagProperties } from 'twind/server'
const sheet = virtualSheet()
setup({ sheet })
function render() {
// Start with a fresh sheet every render
sheet.reset()
// Replace class attributes and create styles
const body = shim('<div class="text(2xl black)"></div>')
// => <div class="text-2xl text-black"></div>
console.log(sheet.target)
// => [".text-2xl{font-size:2rem}", "text-black{color:black}"]
console.log(getStyleTagProperties(sheet))
// => {id: "__twind", textContent: ".text-2xl{font-size:2rem}text-black{color:black}"}
// Create a style tag with all generated CSS rules
const styleTag = getStyleTag(sheet)
// <style id="__twind">.text-2xl{font-size:2rem}text-black{color:black}</style>
// Generate the response html
return `<!DOCTYPE html>
<html lang="en">
<head>${styleTag}</head>
<body>${body}</body>
</html>
`
}Sync with custom tw import { create } from 'twind'
import { virtualSheet, shim, getStyleTag, getStyleTagProperties } from 'twind/server'
const sheet = virtualSheet()
const { tw } = create({ sheet })
function render() {
// Start with a fresh sheet every render
sheet.reset()
// Replace class attributes and create styles
const body = shim('<div class="text(2xl black)"></div>', tw)
// => <div class="text-2xl text-black"></div>
console.log(sheet.target)
// => [".text-2xl{font-size:2rem}", "text-black{color:black}"]
console.log(getStyleTagProperties(sheet))
// => {id: "__twind", textContent: ".text-2xl{font-size:2rem}text-black{color:black}"}
// Create a style tag with all generated CSS rules
const styleTag = getStyleTag(sheet)
// <style id="__twind">.text-2xl{font-size:2rem}text-black{color:black}</style>
// Generate the response html
return `<!DOCTYPE html>
<html lang="en">
<head>${styleTag}</head>
<body>${body}</body>
</html>
`
}Here are the relevant docs: |
Beta Was this translation helpful? Give feedback.
-
|
@mateomorris Could we help to resolve your issue? |
Beta Was this translation helpful? Give feedback.
-
|
Awesome, thanks guys! |
Beta Was this translation helpful? Give feedback.
-
|
@sastan @lukejacksonn bit of a tangent, but related to the code above: is there any way to get twind to inline the produced styles onto a |
Beta Was this translation helpful? Give feedback.
To expand on what Luke wrote...
Sync with default tw