search

kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.2k stars 61 forks source link

feat(css-selector): use the same css selector approche used in radix-ui and headless-ui #34

Closed zirbest closed 1 year ago

zirbest commented 1 year ago

Can i make a PR(@kobalte/tailwindcss) to use the same API used in headless-ui and radix-ui ?

change attribute selector from:

<div data-checked>...</div>
.item[data-checked] { ... }

to:

<div data="checked">...</div>
.item[data='checked'] { ... }
jesseb34r commented 1 year ago

Isn't this totally different in that data-checked is a native html attribute whereas data="checked" is a custom attribute? I assume this is an intentional choice to do it this way.

fabien-ml commented 1 year ago

data= is not a valid HTML data-attribute. radix use data-state= which is valid, but hold only a single value. Headless UI put all the values in the same data-headlessui-state attribute but it will require to rewrite how the attributes are set in all components.

zirbest commented 1 year ago

It's lot of refactoring :100: 

data-state='hover checked'

I will close this issue :+1: