Update dependency twin.macro to v3

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
twin.macro	2.8.1 -> 3.4.1

---

Release Notes

ben-rogerson/twin.macro (twin.macro)

v3.4.1

Compare Source

• Add 'as' prop to types by @​klzns in https://github.com/ben-rogerson/twin.macro/pull/846
• Upgrade postcss-selector-parser from 6.0.10 to 6.0.13 by @​ben-rogerson in https://github.com/ben-rogerson/twin.macro/pull/845
• Upgrade @​babel/template from 7.18.10 to 7.22.15 by @​ben-rogerson in https://github.com/ben-rogerson/twin.macro/pull/844

v3.4.0

Compare Source

New preset

Not a fan of the virtual dom?
Try Twin's new SolidJS preset 🎉

• StackBlitz example
• Setup information

Read more at #​817

More updates

• Styled components v6 support added #​818
• Escape selectors containing forward slashes #​816
• Allow grabbing values containing a decimal with theme #​815

v3.3.1

Compare Source

• New: Add support for an esm/.ts tailwind.configs #​794
  thanks to @​albohlabs

Note: Twin will now autoload a tailwind.config.ts config file if found when a tailwind.config.[.js/.cjs] doesn't exist.

// tailwind.config.ts
// generate with: `npx tailwindcss init --ts`

import type { Config } from 'tailwindcss'

export default {
  content: ['*'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

// tailwind.config.js
// generate with: `npx tailwindcss init --esm`

/** @​type {import('tailwindcss').Config} */
export default {
  content: ['*'],
  theme: {
    extend: {},
  },
  plugins: [],
}

// Classic tailwind.config.js for comparison
// generate with: `npx tailwindcss init`

/** @​type {import('tailwindcss').Config} */
module.exports = {
  content: ['*'],
  theme: {
    extend: {},
  },
  plugins: [],
}

v3.3.0: v3.3

Compare Source

🎉 This version adds support for [email protected] - enjoy!

Read the official tailwind release notes for info on all the new goodies.

Install twin and tailwind latest:

npm i -D twin.macro@latest tailwindcss@latest
pnpm i -D twin.macro@latest tailwindcss@latest
yarn add -D twin.macro@latest tailwindcss@latest

Fixed

• Error: "Could not resolve "tailwindcss/stubs/defaultConfig.stub" https://github.com/ben-rogerson/twin.macro/issues/791

v3.1.0: v3.1

Compare Source

• 🌟 Add @apply support in plugins #​770
  Develop tailwindcss plugins quickly using twin-supported classes.
• 🌟 All Next.js examples were updated to make SWC run alongside Twin
• Add twin config types #​766
• New Jest + React Testing Library example
• Fix the @screen inability to grab complex theme.screens values #​763 - Thanks @​minzojian
• Fix pieces.some is not a function error #​767

v3.0.1

Compare Source

This patch contains a fix for stitches:

• Fixed stitches animation-x classes #​758

And mostly fixes for arbitrary variant usage:

• Fixed a variant ordering bug when using multiple variants #​759
• Fixed an error when non-media at-rules were used in arbitrary variants, eg: [@page]:m-0 #​759
• Fixed comma bug where arbitrary variants aren't visited individually for the auto parent selector #​757
• Fixed encoding bug in arbitrary variants when a number is added directly after a comma #​757
• Added error message when incorrect arbitrary variant combination containing commas is used #​757
• Removed a now unneeded error that notified us to add parent selectors #​759

Reminder: Update tailwind to latest also or you'll probably see a pieces.some is not a function error:

### `[email protected]` requires `tailwindcss@>=3.2.0`
npm i twin.macro@latest tailwindcss@latest

v3.0.0: v3.0: Support for tailwindcss v3.2.2+

Compare Source

Release changes

• 🌟 Added support for all new classes in Tailwind v3.2+
  Use new variants like aria-xxx, data-xxx and min-xxx - check the official tailwindcss release posts for more info
• 🌟 Added full Tailwind support for all plugin functions
  It's only taken three versions and a rewrite to achieve and now full plugin support is here!
• 🌟 Added tailwindcss to peerDependencies
  No more waiting for twin to support new Tailwind features, just update tailwindcss
• Improved style de-caching after adjusting values in tailwind.config.js https://github.com/ben-rogerson/twin.macro/pull/693
• Added additional not- versions of many common variants, eg: not-empty:,:not-focus:,:not-required: ref
• When working in a sub directory within a monorepo, twin will now look upwards for a missing tailwind.config.js
  https://github.com/ben-rogerson/twin.macro/pull/693/693
• A tailwind config object can now be passed in via config - more at docs/config
• tailwind.config.cjs has been added as a fallback ben-rogerson/twin.macro@9e7a7df
• Added support for the important ! prefix on groups, eg: first:!(block mt-5)
• New twin config option: hasLogColors: false to remove log coloring ben-rogerson/twin.macro@bbaec9d

Container queries

The new tailwind-container-queries plugin works with twin but there are some browser and version requirements:

• Styled components requires minimum of [email protected]
• Emotion requires minimum of @​emotion/[email protected]

Update notes

• Twin config option debugPlugins was removed and rolled into another existing option: debug: true
• Class ordering has been synced with tailwindcss
• container has been aligned with tailwind - no longer has a custom margin value

Short Css deprecated

Twins custom "short css" has been deprecated in favour of Tailwind arbitrary properties:

tw`backgroundColor[red]` // short css (no dash next to the `[`)
tw`[backgroundColor:red]` // Updated to an arbitrary property

Emotion error: Value for 'content' without quotes

In Emotion, using before: or after: variants may trigger a console error like this:

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

Update one or both of the packages below to avoid this error (version is when error was fixed):

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

Arbitrary variants/properties without parent selectors

In arbitrary variants/properties without parent selectors, Twin now needs to add the parent selector for you in order to create a compatible class to run through tailwindcss.
If twin miscalculates where the parent selector should be added then you'll need to add the parent selector yourself.

Arbitrary variant escaping

Twin now replaces all spaces with underscores in arbitrary variants, so to keep any underscores in the output we can escape them:

// Bad
<div class="[.header__menu]:block">...</div>
// Good
<div class="[.header\_\_menu]:block">...</div>

General value escaping

Previously in many instances, escaping required a double backslash before the character (\\).
Now we'll only need a single backslash:

tw`after:content-['\a0']`

Theme values/import and DEFAULT

When theme is used within an arbitrary value or property and there is a DEFAULT value found, the theme value will now return the default value automatically:

// tailwind.config.js
module.exports = {
  theme: { colors: { black: { DEFAULT: "redish" } } },
}
// Usage
tw`bg-[theme(colors.black)]` // Arbitrary value
tw`[background-color:theme(colors.black)]` // Arbitrary property
// ↓ ↓ ↓ ↓ ↓ ↓
({ "backgroundColor": "redish" }); // < DEFAULT key returned
({ "backgroundColor": "redish" }); // < DEFAULT key returned

The theme import now won't return the DEFAULT option automatically.
We can still select the DEFAULT value by specifying it, eg: themecolors.black.DEFAULT.
This makes it possible to grab whole objects from the config without automatically returning the DEFAULT value:

// tailwind.config.js
module.exports = {
  theme: { colors: { black: { DEFAULT: "redish", another: 'greenish' } } },
}

// Usage
import { theme } from 'twin.macro'
theme`colors.black`
// ↓ ↓ ↓ ↓ ↓ ↓
// Whole object returned
({
  "DEFAULT": "redish",
  "another": "greenish"
});

Daisy UI tailwind plugin

DaisyUI often styles their components based on classNames, eg: .btn.loading { ... }
This means in some situations we have to add classNames to the jsx element to add their modifier styling

Some discussion here and at #​760

Vite build issue

If you're noticing build issues after upgrading, try updating your Vite config with the updated build target:

optimizeDeps: {
  esbuildOptions: {
    target: "es2020",
  },
},

Support

If you’re kicking ass with twin - especially if you’re in a team - then please consider supporting this project.
It will really help out with the continued development of twin - cheers! 🍻

Thanks

A huge thanks and shout out to all the rc contributors helping with features, fixes and bug testing over the past year - you folks are awesome 👋🙏

@​omaemae, @​ChrisEbert, @​Macksi, @​atxiii, @​mohammadsiyou, @​MatthiasDunker, @​lguima, @​EduardoBautista, @​HaidarEzio, @​ajmnz

Full Changelog: ben-rogerson/twin.macro@2.8.2...3.0.0

v2.8.2

Compare Source

This patch contains a few changes for those using the styled-components preset.

⚠️ Possible breaking changes

• Remove auto css prop
  The css prop can now be added with babel-plugin-styled-components - Setup info →
• Tweak the styled import preset
  The default import was changed from import "styled-components/macro" to import "styled-components" - More info →

Edit: Try the new rc with the latest changes npm i twin.macro@rc

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[renovate]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 3.x releases. But if you manually upgrade to 3.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.