ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.92k stars 183 forks source link

Sync variants #721

Closed ben-rogerson closed 2 years ago

ben-rogerson commented 2 years ago

This PR contains a bunch of changes to sync the variants a little more closely with tailwind latest.

This included moving the variant definitions into corePlugins.js so they can now be found right next to the class definitions.

Task list

Not variants

Twin now automatically generates a full set of reversed not- variants from the list of pseudoVariants:

// Positional
tw`not-first:block`
tw`not-last:block`
tw`not-only:block`
tw`not-odd:block`
tw`not-even:block`
tw`not-first-of-type:block`
tw`not-last-of-type:block`
tw`not-only-of-type:block`

// State
tw`not-visited:block`
tw`not-target:block`
tw`not-open:block`

// Forms
tw`not-default:block`
tw`not-checked:block`
tw`not-indeterminate:block`
tw`not-placeholder-shown:block`
tw`not-autofill:block`
tw`not-optional:block`
tw`not-required:block`
tw`not-valid:block`
tw`not-invalid:block`
tw`not-in-range:block`
tw`not-out-of-range:block`
tw`not-read-only:block`

// Content
tw`not-empty:block`

// Interactive
tw`not-focus-within:block`
tw`not-hover:block`
tw`not-focus:block`
tw`not-focus-visible:block`
tw`not-active:block`
tw`not-enabled:block`
tw`not-disabled:block`

// Twin custom
tw`not-all:block`
tw`not-all-child:block`
tw`not-sibling:block`
tw`not-hocus:block`
tw`not-link:block`
tw`not-read-write:block`
tw`not-svg:block`
tw`not-even-of-type:block`
tw`not-odd-of-type:block`

// These `not-` classes also apply to the `group-not-` and `peer-not-` class sets:
tw`group-not-first:block`
tw`peer-not-first:block`