tw-in-js / use-twind-with Goto Github PK
View Code? Open in Web Editor NEWTwind integration packages for frameworks & libraries with examples
License: MIT License
Twind integration packages for frameworks & libraries with examples
License: MIT License
I have a question.
How to integrated the library with angular ? I still failed to work with angular. except if I use it with remote dependency and I code in html file. thx for reply.
I would like to setup hoofd
with WMR as described in the docs.
In terms of setting this up with withTwind
would it be something like:
const { hydrate, prerender: internal } = withTwind({
// Options here...
});
export async function prerender(data) {
const result = await internal(data);
const head = toStatic();
const { links = [], metas = [], scripts = [] } = head;
const elements = new Set([
...links.map(props => ({ type: 'link', props })),
...metas.map(props => ({ type: 'meta', props })),
...scripts.map(props => ({ type: 'script', props }))
]);
return {
...result,
head: {
lang: head.lang,
title: head.title,
elements
}
};
};
The CodeSandbox linked in the ReadMe reproduces the error. You'll be met by cannot use 'in' operator to search for "tw" in "This is Twind!"
Errors are thrown when searching for the tw
and css
props on an element with text content, assuming those options are enabled. The text content will have props
of whatever the content is, i.e., "This is Twind!"
. Can't use the in
operator to search on a string.
I'm not sure why that method is used to begin with ("tw" in props
), but solution could be as simple as switching that to props.tw
or just checking to ensure props
is an object first. I don't have the background knowledge here, so you'll likely know better.
Apologies if this is intentional, though I'm not quite sure why it would be.
It appears the style tag that gets generated on prerender is not populated with the styles of the application. This can be seen using the example WMR app: https://github.com/tw-in-js/example-wmr. Simply build the application, remove the JS imports from the built HTML/disable JS and you'll see none of the styling is there to be applied.
Hello,
I'm aware the package was updated to support Nextjs 12, but when I upgrade Next, I get these errors.
I have a theme extended in twind.config.ts
(some part of the code deleted for legibility) and then used on theme.extend
.
The only difference between this happening or not is being on Next 11.1.2 or 120.3.
It causes styles to get messed up, adding styles to the wrong places, and some not being used at all. Interestingly, it seems similar to this issue but I'm unsure. tw-in-js/twind#47
If I navigate away from a page then return, then the styles are correct.
I'm running into an issue where the full styles for a page are not currently being created in the generated style
tag. For example, take this as the root:
export function App() {
return (
<LocationProvider>
<h1 class="text-purple-500">Should be purple</h1>
<div>
<Header />
<ErrorBoundary>
<Router>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route default component={NotFound} />
</Router>
</ErrorBoundary>
</div>
</LocationProvider>
);
}
text-purple-500
will be included in the route /
, however, it is not in /about
or /error
. This is mainly an issue as I'm using Twind without any runtime, so a style not in the style tags results in unstyled content.
Clone this repo I've set up: https://github.com/rschristian/twind-prerender-bug
Run a production build & then serve the content (yarn build && yarn serve)
Navigate to /
, notice the top text is purple
Navigate to /about
, notice the same text is not purple here
Mostly just raising this issue to remind myself to do it later ๐
@sastan: do you happen to remember the context of this comment?
use-twind-with/packages/wmr/prerender.ts
Lines 22 to 24 in d40071a
Running into an issue at the moment where previous styles aren't cleared from the stylesheet, and for whatever reason, this seems to be the culprit.
I've made a reproduction: https://github.com/rschristian/twind-uncleared-sheet-bug
This is just the WMR Example brought up to date and configured to also prerender a 'Not Found' page.
Once you build (npm run build
), if you look at the built file (dist/404/index.html
) you'll see that Twind has generated a rule for .bg-purple-400
, even though it doesn't exist on any content in the page. It does, however, exist in /
.
I'm not really sure what you're looking to do with that Promise.resolve().then(...)
. Replacing that and returning a plain async function seems to fix the issue.
// Ensure to start a new async scope
-return (data) =>
- Promise.resolve().then(async () => {
+return async (data) => {
await sheet.reset()
let { html, ...rest } = await prerender(render(data), options)
return { ...rest, html: getStyleTag(sheet) + html }
-})
+}
}
Hi there!
I really love what you're doing with Twind. I've been implementing it in our codebase and got really far, but ultimately got blocked on an SSR issue and am unable to move forward.
We're seeing a FOUC on the pages because the CSS isn't getting rendered on server-side, and the styles only come in later on client-side.
In the building stage, we're seeing the LATE_SETUP_CALL
notices and have not been able to resolve them. Looked through this open issue, but didn't seem to have a solution.
In the Twind Next JS Code Sandbox example, the styles are also missing from the head as well. It shows as an empty style tag: <style id="__tw-9"></style>
without styles. We're seeing the same thing our end as well. This suggests that React is correctly creating the style element and setting the id: '__' + hash
but not inserting any styles within or getting the textContent
.
In the Sandbox example, there is a data-next-hide-fouc="true"
but we don't want the page empty before the styles come in. We're assuming that SSR should work out of the box with the Twind integration, but is there something we've missed in the documentation that says otherwise? Bit of a loss as to what to do next, so any direction would be greatly appreciated!
Running on:
/** @type {import('twind').Configuration} */
import { setup } from 'twind';
import { withForms } from '@twind/forms';
setup({
preflight: withForms({
'@font-face': [
// fonts here
]
}),
theme: {
fontFamily: {
// fonts here
},
colors: {
// colors here
}
}
});
export default {};
import React from 'react';
import Head from 'next/head';
import withTwindApp from '@twind/next/app';
import twindConfig from 'twind.config';
import globalAppStyles from './app.global.scss?type=global';
function PastelApp({ Component, pageProps }) {
return (
<>
<Head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
</Head>
<>
<style jsx global>
{globalAppStyles}
</style>
</>
<Component {...pageProps} />
</>
);
}
export default withTwindApp(twindConfig, PastelApp);
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { tw } from 'twind';
import withTwindDocument from '@twind/next/document';
import twindConfig from '../twind.config';
class MyDocument extends Document {
static async getInitialProps(context) {
const initialProps = await Document.getInitialProps(context);
return { ...initialProps };
}
render() {
return (
<Html lang="en">
<Head />
<body className={tw`pastel-app bg-gray-100`}>
<Main />
<div className={tw`modal-root`} />
<NextScript />
</body>
</Html>
);
}
}
export default withTwindDocument(twindConfig, MyDocument);
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');
const path = require('path');
module.exports = {
webpack: (config, { _dev, defaultLoaders }) => {
config.plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
);
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack']
});
config.module.rules.push({
test: /\.(css|scss)$/,
use: [
defaultLoaders.babel,
{
loader: require('styled-jsx/webpack').loader,
options: {
type: (fileName, options) => options.query.type || 'scoped'
}
},
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [path.resolve(__dirname, './styles')]
}
}
}
]
});
return config;
}
};
Thanks in advance!
Hi! Thank you for the library, i don't know if i'm missing something or what but if i add a custom config for twind
the styles doesn't work anymore https://codesandbox.io/s/twind-nextjs-forked-l5r91?file=/twind.config.js
See https://codesandbox.io/s/rrjq1?file=/public/index.js
In summary, if you use @twind/wmr
and import preact/compat
, re-render is broken by the error Cannot set property className of #<Object> which has only a getter
Although I haven't investigated why preact/compat
causes this issue, the error itself is caused because the component having tw
has className
getter when re-render.
> s.__lookupGetter__('className')
undefined
> s.__lookupGetter__('className')
ฦ (){return this.class}
preact:formatted:25 Uncaught (in promise) TypeError: Cannot set property className of #<Object> which has only a getter
at Object.T.i.vnode (preact:formatted:25)
When I manually deleted the getter by debugger, the second time rendering succeeded. So, I guess we can implement that logic in @twind/preact
regardless of the issue caused by preact/compat
.
Hi there! Great work with Twind... it's an amazing concept and I am really loving the API.
I tried integrating it with Next.js + Webpack 5 and got this error:
info - ready on http://localhost:3000
Error: [LATE_SETUP_CALL] {}
at withTwindDocument (/home/rsc/@dev/@rstacruz/til-2021/node_modules/@twind/next/document/document.cjs:38:27)
at eval (webpack-internal:///./pages/_document.js:42:123)
at Object../pages/_document.js (/home/rsc/@dev/@rstacruz/til-2021/.next/server/pages/_document.js:22:1)
...
A lot of times it's not really causing any issues (pages continue to work) but sometimes they cause Internal Server Error
to show up for some pages.
"dependencies": {
"@twind/next": "^1.0.7",
"next": "10.1.3",
"next-mdx-remote": "^2.1.4",
"twind": "^0.16.13",
}
import * as colors from 'twind/colors'
/** @type {import('twind').Configuration} */
export default {
// mode: 'strict',
theme: {
extend: {
borderColor: {
line: colors.gray['200'],
},
textColor: {
mute: colors.gray['600'],
accent: colors.red['600'],
},
},
fontFamily: {
sans: ['Roboto', 'ui-sans', 'sans-serif'],
serif: ['Eczar', 'ui-serif', 'Georgia', 'Cambria', 'sans-serif'],
},
maxWidth: {
article: '580px',
},
},
}
import withTwindDocument from '@twind/next/document'
import twindConfig from '../twind.config'
export default withTwindDocument(twindConfig)
import twindConfig from '../twind.config'
import withTwindApp from '@twind/next/app'
import '../styles/globals.css'
import '@fontsource/eczar/400.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/700.css'
import { css, tw } from 'twind/css'
function MyApp({ Component, pageProps }) {
// tw(
// css({
// ':global': { body: { '@apply': 'font-sans', },
// },
// })
// )
return <Component {...pageProps} />
}
export default withTwindApp(twindConfig, MyApp)
module.exports = {
future: { webpack5: true },
}
Sorry for the opened issue, if it possible, can you delete #10 and #11. Look like the issue doesn't come from webpack 5, but somewhere else.
Creating a new Next.js project with webpack 5 enable, twind shim version, a cusom _app.js and a custom _document.js (same as the example in README). This is the setting in next.config.js:
module.exports = { future: { webpack5: true, } };
Changing the twind config file or any thrown errors (e.g. returning multiple components) , upon fixing will trigger this error from twind
Error: Error: [LATE_SETUP_CALL] {} at withTwindDocument (node_modules\@twind\next\document\document.cjs:38:27) at withTwindDocument (node_modules\@twind\next\shim\document\document.cjs:32:52)
Hey all, I'm trying to install @twind/next
in an app using NextJS v12. However, this is the error I'm facing during installation:
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR! next@"^12.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"10.x || 11.x" from @twind/[email protected]
npm ERR! node_modules/@twind/next
npm ERR! @twind/next@"*" from the root project
From the error, I'm guessing that the peer dep needs to be updated.
Next.js supports React 18 by default now, but @twind/next
is defined to max out at react ^17
I believe the library is compatible with react 18 as-is, so it should be an easy fix -- by modifying the react peerDependency in package.json to include ^18, like so:
- "react": "^16.6.0 || ^17",
+ "react": "^16.6.0 || ^17 || ^18",
How to setup twind-next with new "app" folder from next.js 13?
In twind docs, it recommends that we add hidden
to <html>
to avoid flash of unstyled content. The shim should auto-remove this once everything is good.
However, when using hidden
with @twind/next
, the hidden
will never be removed and the page will remain hidden forever
What should I do to avoid FOUC instead?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.