tw-in-js/use-twind-with

Twind integration packages for frameworks & libraries with examples

use-twind-with's Issues

Integrated with angular

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.

How to wrap the `prerender` function exported from `withTwind`?

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
    }
  };
};

in WMR prerender: asyncVirtualSheet reset() is not a Promise, yet is awaited

use-twind-with/packages/wmr/prerender.ts

Line 25 in d40071a

await sheet.reset()

...but:

https://github.com/tw-in-js/twind/blob/15441649dcdfb97fba56e0cc8870f08485cfc1c6/src/server/index.ts#L73-L85

reset: () => { /* ... */ }

@twind/preact: tw and css options cannot be enabled without breakage

Reproduction

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!"

Explanation

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.

Solution?

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.

@twind/wmr: style tag does not populate with styles with prerender

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.

[UNKNOWN_THEME_VALUE] and [UNKNOWN_DIRECTIVE] on Nextjs 12 in extended theme values

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.

dyeXfP7XuB.mp4

WMR: Prerender doesn't always build full page styles

Summary

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.

Reproduce

• 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

Add React + Vite example

Mostly just raising this issue to remind myself to do it later 🙃

[WMR]: Stylesheets not clearing between pages being prerendered

@sastan: do you happen to remember the context of this comment?

use-twind-with/packages/wmr/prerender.ts

Lines 22 to 24 in d40071a

	// Ensure to start a new async scope
	return (data) =>
	Promise.resolve().then(async () => {

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 }
-})
+}
}

SSR of CSS not working > Can not prevent FOUC (NextJS)

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:

• Node.js v15.8.0,
• twind/next: ^1.0.9,
• next: ^10.0.0,
• using the tw function with no shim
• custom App component + custom twind config

twind.config.js

/** @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 {};

pages/_app.js

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);

pages/_document.tsx

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);

next.config.js

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!

@twind/next doesn't load custom twind.config.js

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

[@twind/preact,wmr] Can't re-render objects by `Cannot set property className of #<Object> which has only a getter`

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.

First time rendering

> s.__lookupGetter__('className')
undefined

Second time rendering

> 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.

LATE_SETUP_CALL error with Next.js

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.

package.json

  "dependencies": {
    "@twind/next": "^1.0.7",
    "next": "10.1.3",
    "next-mdx-remote": "^2.1.4",
    "twind": "^0.16.13",
  }

twind.config.js

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',
    },
  },
}

pages/_document.js

import withTwindDocument from '@twind/next/document'
import twindConfig from '../twind.config'
export default withTwindDocument(twindConfig)

pages/_app.js

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)

next.config.js

module.exports = {
  future: { webpack5: true },
}

@twind/next: unable to recover develo

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.

Reproduction

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)

@twind/next: unable to recover devel

Next.JS peer dependency needs to be updated to support Next12

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.

React 18 support for twind/next

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?

How to setup twind-next with new "app" folder from next.js 13?

Using shim and avoiding FOUC

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?