v3.0.0-rc.5 (2 October 2022) Testing

[ben-rogerson]

The release candidate is ready to install - Found a bug/issue? Let us know below!

Try out the latest rc:

npm install twin.macro@rc

More info in the github release notes

[fini]

In DaisyUI, many things using ::before and ::after seems to not work when using twin.macro to render it.
As a simple example the Button component has a loading feature, this screenshot shows that it works when I just use static html, but it doesn't properly add the ::before selector to it when using my React styled component:

[fini]

Other examples are:

• Outlined Buttons (btn-outline)
• Steps component (step-vertical, step-primary, step-secondary etc. doesn't work)

[fini]

This issue is still also in RC.4

[ben-rogerson]

This is because of the way DaisyUI often styles their components based on classNames.

They've written their styles with another className in the selector:

"&.loading:before": {
  ...
}

Twin is smart enough to extract the .loading styles and use them when the loading tailwind class is used - but className="btn" still needs to be added:

<button tw="btn loading" className="btn">
  loading
</button>

I didn't find a way around this unfortunately but at least there's no need to duplicate all the classes - just the ones written this way.

[HynekS]

'content' attribute issue

tailwindcss": "3
twin.macro": "^3.0.0-rc.4.1
@tailwindcss/typography": "0.5.2

I've tried to migrate to the third major versions of twin.macro and tailwindcss.

I've ran into an issue with before:(…) and after:(…) pseudo elements.

You seem to be using a value for 'content' without quotes, try replacing it with `content: '"var(--tw-content)"'`

My twin code uses the deprecated syntax, e.g. backgound-color[#abc123], so I was expecting issues. I updated the config:

"babelMacros": {
    "twin": {
      "preset": "emotion",
      "disableShortCss": false
    }
  }

But even if I changed the syntax of before and after declarations to e.g. tw="before:(content-[''])", the error still persists (and the site won't build).

[ben-rogerson]

That error showed on some older versions of Emotion - try updating the Emotion packages to latest.

Support for css variables was added in these versions:

• @emotion/[email protected]
• @emotion/[email protected]

[big-camel]

bg-clip-text does not generate compatible -webkit-background-clip styles

tailwindcss": "^3.1.5",
twin.macro": "^3.0.0-rc.4.2"

Past related issues

#375

[ben-rogerson]

Thanks for testing this - The issue will be fixed in the next release.

[lukesmurray]

not-prose seems to be missing.

<div css={tw`not-prose`}>

✕ not-prose was not found

    "@tailwindcss/typography": "^0.5.7",
    "tailwindcss": "^3.1.8",
    "twin.macro": "^3.0.0-rc.5",

[ben-rogerson]

That one is added as a className:

<div tw="prose">
  prosed
  <div className="not-prose">not prosed</div>
</div>

I'll add a fallback message to explain this difference.

[mattots]

Hi Ben, I've been using twin with styled components for several months and pinning my projects to the latest rc of late. However, I just updated to rc5 (from rc3) and suddenly my styling is broken.

I'm using the nested square bracket syntax as documented here e.g.

const Styled = tw.div`
   bg-gray-200
   [> div]:(
      flex items-center justify-between
      [.logo]:(ml-2 w-[173px])
      [.nav]:(
         flex gap-2 items-center justify-end
         [> span]:(font-bold inline-block p-2 text-sm)
      )
   )`;

Up until now this has been working just fine, but with the update to rc5 for some reason everything from the .logo styles onwards is being ignored. I've tried removing line breaks, referencing the elements directly instead of using classnames, and various other things to see if I can spot any obvious cause but to no avail.

Has something changed in the way tw style blocks are parsed that is causing this, and is it something that can be addressed in twin itself or will I need to update my syntax? (I have a LOT of components with a lot of styling written in this way!!)

EDIT: I just checked and it's broken with rc4 as well, so it must be something that changed between rc3 and rc4.

[ben-rogerson]

Cheers for testing the rc.
Looks like there's an adjustment I need to make to the automatic parent selector feature in arbitrary variants.
The next version will fix this issue.

[lightyen]

BUG: \t is not acceptable in rc.5

tw`
md:(
\tinline\ttext-black
)
`

[ben-rogerson]

Thanks for that one - it will be fixed in the next version
fix commit

[OnkelTem]

Hi! Thank you for the great job you have done!

I'm not sure if it's related to the updated code or it's just me making a wrong thing.
I stylized an existing component:

import tw from 'twin.macro'
import Buttom from 'ourlibrary'

const ActionButton = tw(Button)`rounded-none bg-white text-black text-opacity-80 !px-4 `

and it's triggered this error:

Is there a way to apply tw to existing components?

[OnkelTem]

No, it doesn't.

[OnkelTem]

Maybe there's something wrong with @stitches/react?

This is how it's configured in our package.json:

  ...
  "babelMacros": {
    "twin": {
      "preset": "stitches",
      "stitchesConfig": "./node_modules/@hnbi/canvas2-library/stitches.config.ts"
    }
  }

And this is the config we seem to be using:

import { createStitches, CSS as StitchesCSS } from "@stitches/react";

export type { CSS } from "@stitches/react/types/css-util";

export const stitches = createStitches({
  prefix: "",
  theme: {},
  utils: {},
});

export const { css, styled, globalCss, theme, keyframes, getCssText } = stitches;

[zax-xyz]

I also had this problem using stitches, I believe the problem is probably that twin.macro is transpiling it down into something like styled(Button)({ ...styles }), which while it works in libraries like styled-components, stitches uses a slightly different syntax of styled(Button, { ...styles }).

I've just been doing stuff like styled(Button, tw`...`) as a workaround - I kind of wanted to see if I could try fixing this myself but I kind of forgot about it, and the internals of twin.macro is a bit outside the scope of what I'm used to 😅

[OnkelTem]

Michael, thanks again! This is how I did it

import tw from 'twin.macro'
import { styled } from '@stitches/react'

import { Button } from 'ourlibrary'
// ...


const ActionButton = styled(Button, tw`rounded-none bg-white text-black text-opacity-80 !px-4 `)

Cool, so both questions are resolved now.

I take it, this particular one still seems to require some change at the twin.macro side, doesn't it?

[zax-xyz]

Yeah, I believe this will need some changes to twin.macro to not need the workaround with Stitches - maybe it might be good to raise an official issue for this?

Some more information, it's also not related to 3.0.0, I had this issue on 2.8.2. I wanted to see if happened to be any different with the latest 3.0.0 rc, but I guess I don't need to anymore haha

[OnkelTem]

There is also a problem with the css property type compatibility:

<Button
    css={[tw`bg-green-400`, approved(record.status) && tw`bg-opacity-50`]}
  //^^^^ - error
    title={t('Approve')}
    size="s"
>
    <CheckOutlined />
</Button>

triggers an error:

Type '(false | TwStyle)[]' is not assignable to type '(false | TwStyle)[] & {} & { alignContent?: Globals | ScaleValue | Index | AlignContent | undefined; alignItems?: Globals | ScaleValue | Index | AlignItems | undefined; ... 425 more ...; vectorEffect?: Globals | ... 3 more ... | undefined; } & {} & {} & { ...; }'.
  Type '(false | TwStyle)[]' is not assignable to type '{ alignContent?: Globals | ScaleValue | Index | AlignContent | undefined; alignItems?: Globals | ScaleValue | Index | AlignItems | undefined; ... 425 more ...; vectorEffect?: Globals | ... 3 more ... | undefined; }'.
    Types of property 'filter' are incompatible.
      Type '{ <S extends false | TwStyle>(predicate: (value: false | TwStyle, index: number, array: (false | TwStyle)[]) => value is S, thisArg?: any): S[]; (predicate: (value: false | TwStyle, index: number, array: (false | TwStyle)[]) => unknown, thisArg?: any): (false | TwStyle)[]; }' is not assignable to type 'Globals | ScaleValue | Index | Filter | undefined'.ts(2322)
products.tsx(284, 15): The expected type comes from property 'css' which is declared here on type 'IntrinsicAttributes & { children: Element; css: (false | TwStyle)[]; theme: "success"; title: string; size: "s"; onClick: () => void; } & StitchesProps & { ...; }'

[ben-rogerson]

The recommended types config has been updated by @zaxutic - https://github.com/ben-rogerson/twin.examples/blob/master/next-stitches-typescript/types/twin.d.ts
Could you let me know if that fixes the problem?

[OnkelTem]

I placed the twin.d.ts file in the src/types directory where I pointed my tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "strictNullChecks": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "dev"],   
  "types": ["src/types"] // <<< HERE
}

Also I fixed the path to Stitches in the import section of twin.d.ts:

import { stitches as config, css as cssImport, styled as stitchesStyled } from './stitches.config'

placing this guy next to twin.d.ts.

However after all this the message didn't seem to go:

Type '(false | TwStyle)[]' is not assignable to type '(false | TwStyle)[] & {} & { alignContent?: Globals | ScaleValue | Index | AlignContent | undefined; alignItems?: Globals | ScaleValue | Index | AlignItems | undefined; ... 425 more ...; vectorEffect?: Globals | ... 3 more ... | undefined; } & {} & {} & { ...; }'.
  Type '(false | TwStyle)[]' is not assignable to type '{ alignContent?: Globals | ScaleValue | Index | AlignContent | undefined; alignItems?: Globals | ScaleValue | Index | AlignItems | undefined; ... 425 more ...; vectorEffect?: Globals | ... 3 more ... | undefined; }'.
    Types of property 'filter' are incompatible.
      Type '{ <S extends false | TwStyle>(predicate: (value: false | TwStyle, index: number, array: (false | TwStyle)[]) => value is S, thisArg?: any): S[]; (predicate: (value: false | TwStyle, index: number, array: (false | TwStyle)[]) => unknown, thisArg?: any): (false | TwStyle)[]; }' is not assignable to type 'Globals | ScaleValue | Index | Filter | undefined'.ts(2322)
products.tsx(342, 15): The expected type comes from property 'css' which is declared here on type 'IntrinsicAttributes & { children: Element; css: (false | TwStyle)[]; tw: string; size: "s"; style: { opacity: number; }; title: string; onClick: () => void; } & StitchesProps & { ...; }'

Here is why I was describing how exactly I placed twin.d.ts as I'm still not sure if it was applied or not.

[zax-xyz]

Oh, Stitches uses a different syntax here in that it only accepts an object and not an array, so you'll need to change it to something like css={{ ...tw`bg-green-400`, ...approved(record.status) && tw`bg-opacity-50` }} to spread them all into the same object

[OnkelTem]

It worked, zaxutic! Thank you very much.

[OnkelTem]

So this one is not connected with some issue of 3.0.0.
Very good!

[mosesoak]

@ben-rogerson Wanted to let you know that Lightyen has officially released v3 of his VS Code plugin, but that he says he is going to stop maintaining it now as he no longer uses twin. lightyen/vscode-tailwindcss-twin#30 (comment)

When you set disableShortCss: true, his plugin renders strikethrough with a warning that the syntax is deprecated, which seems great.

We're now using rc.5 with Emotion and the new short-CSS syntax and it's working perfectly for us -- no issues to report so far! 🎉

[ben-rogerson]

Thanks for the info on Lightyen's vscode plugin and great to hear the rc is running smoothly 👍
You'll find there's some issues with variant ordering which will be fixed in the next version.

[ajmnz]

👋 @ben-rogerson

Awesome work with Tailwind CSS v3!

Just found what I think is a bug when using the theme function and accessing DEFAULT values.

With the following Tailwind configuration:

colors: {
  black: {
    DEFAULT: "#171717",
    pure: "#000000",
  },
},

If using it correctly (?) (not adding .DEFAULT)

const customStyles = {
  body: {
    "background-color": theme("colors.black"),
    // output: 'background-color': { DEFAULT: '#171717', pure: '#000000' }
    // expected: 'background-color': '#171717'
  },
};

export const initStyles = () => {
  globalCss(globalStyles as any)();
  globalCss(customStyles)();
};

Thanks!

[ben-rogerson]

Hey there 👋

You're right, the theme import no longer defaults to the DEFAULT value, so here you'll need to use theme("colors.black.DEFAULT").
I had to make this change so the theme function is more predictable when it's used to grab objects from the config.
I know having to write DEFAULT is both annoying to write and look at so I want to add an elegant way to return the default key - perhaps you could suggest something?

[ajmnz]

Sure, I'll pull the repo and try to PR a fix for it!

[ajmnz]

@ben-rogerson There you go! #749

[victorfrederiknielsen]

Hey Ben,

Thank you for your hard work. I am currently trying to move to RC.5 from 2.8, and hit a bit of a blocker on using arbitrary variants to select class names.

When trying to style child classes like this, using styled-components:

    [.re-select__menu-list]:(
      flex flex-col gap-2
      p-2
    )

The arbitrary selector translates all _ characters into spaces, which means it cannot select these prefixed classes. The library I am using is not exposing the components themselves, so this is the workaround to style it with twin.

This was seemingly working before the upgrade.

The workaround is to convert to a standard styled component with tw to build styles.

  .re-select__menu-list {
    ${tw`flex flex-col gap-2 p-2`}
  }

Is this change documented anywhere, I was not able to find it.

[ben-rogerson]

Hey Victor

Thanks for testing the rc.
If you'd like to keep any underscores in arbitrary variants you'll just need to escape them (this is the same as vanilla tailwind):

tw`
    [& .re-select\_\_menu-list]:(
        flex flex-col gap-2
        p-2
    )
`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "& .re-select__menu-list": {
    "display": "flex",
    "flexDirection": "column",
    "gap": "0.5rem",
    "padding": "0.5rem"
  }
});

I’ll include a note on this in the v3 release notes 👍

[victorfrederiknielsen]

I feel like I tried this yesterday with no success, but I tried to reproduce it and it works like a charm, thank you! ;)

[JonasRothmann]

I am using stitches and I have a component which conditionally renders something different. I see that the elements get classes, but there is no style tag where the class is resolved... I am using nextjs + stitches + twin.macro@rc5, I tried to replicate it in codesandbox but I am unable too - any idea what could cause this? Do I need to change something in the _document for rc5?

[JonasRothmann]

When i remove the stitches stuff in _document.tsx the initial render is unstyled, then every subsequent it's the same.

[ben-rogerson]

I'm unsure what would cause that issue - I'm testing the rc on the stitches example without seeing this issue.
To investigate further I'd need to see the bug in action, could you provide a minimum reproduction repo on this?

[JonasRothmann]

Related to this maybe? stitchesjs/stitches#863

[zax-xyz]

twin.macro@rc and the combination of dependencies I have don't seem to play nicely together - upgrading to the release candidate causes this error:

Error: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': ENOENT: no such file or directory, open '/path/to/repo/node_modules/fast-glob/node_modules/glob-parent/index.js'
    Referenced from: /path/to/repo/.eslintrc.json

(note that glob-parent exists in the outer node_modules)

A minimal example with twin.macro@rc and typescript-eslint doesn't seem to recreate the error though, so I guess it has something else to do with the specific combination I have here (from zaxutic/vite-react-ts-twin-stitches):

  "dependencies": {
    "@stitches/react": "^1.2.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@typescript-eslint/eslint-plugin": "^5.42.0",
    "@typescript-eslint/parser": "^5.42.0",
    "@vitejs/plugin-react": "^2.2.0",
    "autoprefixer": "^10.4.13",
    "babel-plugin-macros": "^3.1.0",
    "eslint": "^8.26.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^3.5.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.2.1",
    "twin.macro": "^3.0.0-rc.5",
    "typescript": "^4.8.4",
    "vite": "^3.2.2",
    "vite-tsconfig-paths": "^3.5.2"
  }

Disabling the typescript-eslint plugin (or going back to twin.macro@2 gets rid of the error, and removing node_modules and yarn.lock and reinstalling dependencies didn't help. Not sure what specifically is causing this interaction, I'll probably investigate further later to narrow down which dependencies are triggering it

[ben-rogerson]

hey did you get to the bottom of this?

[zax-xyz]

Hey Ben, sorry I was busy and forgot about this, but I actually don't seem to be able to reproduce this anymore 😅 Perhaps it was just some sort of issue with cache? I guess everything seems good haha - fine on my other device as well

[ben-rogerson]

[email protected] has now been released! 🥳 🎉

npm i twin.macro@latest

Thank you so so much to everyone who helped out with the bug testing 👋

[koniuszy]

thanks @ben-rogerson ,

is there a script we can run and migrate short-css syntax globally?

[ben-rogerson]

I haven't created one - just some small talk over at #746

[bumi001]

Some of you may want to try https://github.com/eskns/styledwindcss which allows you to use any version of tailwindcss with any version of @emotion/styled. In particular, I have tested it with:
$ grep tailwindcss package.json
"@tailwindcss/typography": "0.5.8",
"tailwindcss": "3.2.4",
$ grep styled package.json
"@emotion/styled": "11.10.5",

It is a simple-minded approach relying only on tagged template literals.

[ben-rogerson]

From the styledwindcss readme:

Unlike their approach (twin.macro), this package allows you to use the latest version of tailwindcss with the latest version of @emotion/styled without any waiting time. In fact, you need to install (whatever versions of) those packages independently in addition to styledwindcss.

Twin does this too now - since v3!

[bumi001]

That is wonderful!

…

On Mon, Dec 5, 2022, 1:44 PM Ben Rogerson ***@***.***> wrote: Unlike their approach (twin.macro), this package allows you to use the latest version of tailwindcss with the latest version of @emotion/styled without any waiting time. In fact, you need to install (whatever versions of) those packages independently in addition to styledwindcss. Twin does this too now - since v3! — Reply to this email directly, view it on GitHub <#679 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADL6IMH5XGCCUOSXZ7C42OLWLZA3XANCNFSM5U5EH6EA> . You are receiving this because you commented.Message ID: ***@***.***>