v2.2.0 🔮

[danpacho]

New Features 🚀

• 66 redesign generic option @danpacho (66 redesign generic option #67)

What is cool thing about this update? 🧐

When customizing screens and aria attributes, we currently use a rather **strange syntax, such as conditionA and conditionB, **. Also, we can't fine-tune the approach of each nest conditions.

For example, break conditions must start with @, pseudo classes must start with :, and pseudo elements must start with ::. Changing the structure to allow users to customize these identifiers.

type MyTailwindest = Tailwindest<
    {
        color: "my-color1" | "my-color2"
        screens: {
            conditionA: "@weird1"
            conditionB: "@weird2"
        }
    },
    {
        aria: {
            conditionA: "my-aria1"
            conditionB: "my-aria2"
        }
        listStyleType: "emoji"
    }
>

Improve DX 🛠️

So now we can customize Tailwindest type like this same as ShortTailwindest

type MyTailwindest = Tailwindest<
    {
        color: "my-color1" | "my-color2"
        screens: "ipad" | "iphone13pro" | "iphone13proMax"
    },
    {
        aria: "my-aria1" | "my-aria2"
    },
    {
        breakIdentifier: "$"
        pseudoClassIdentifier: "_"
        pseudoElementIdentifier: "_"
    }
>

1. you can define custom screens and aria value more easily and without number limitations(previously up to 26).
2. you can customize each nest identifier keywords by 3rd generic option.

const tw = createTools<MyTailwindest>()

const box = tw.style({
     $md: {},
     _hover: {},
     _after: {},
   // nice!
})

Breaking api changes 🚨

There is three major api breaking changes. So you SHOULD check it before update!

1. group and peer, should access via group and peer property not @group and @peer
2. '@aria' and $aria is now removed, all aria properties should be access like aria-{condition}
3. Tailwindest type generic options is changed.
   • Add 3rd optional option for identifier customization
   • Change aria, screens option type to string literal, not object type

Full Changelog: v2.1.3...v2.2.0

---

This discussion was created from the release v2.2.0 🔮.