search

chainlift / liftkit-css

https://www.chainlift.io/liftkit
GNU Affero General Public License v3.0
60 stars 8 forks source link

Feature request: add css modules compatibility #11

Open Arctomachine opened 1 month ago

Arctomachine commented 1 month ago

Hello. I decided to try this in react app and follow guide in docs. It suggests importing library and using classes as plain strings. But with how many classes there are and without auto complete hints it looks very unrealistic to use it for anything serious.

Instead or in addition I suggest adding css modules support. So the usage would be like this

import liftkit from '...'
...
<div className={liftkit.section__default}/>

Also I think there is error in docs on this page. It suggests using import liftkit from '@chainlift/liftkit-css', but it is not working. And import '@chainlift/liftkit-css' is working.

chainlift commented 1 month ago

What's your stack? Just react? React native? Etc?

𝗚𝗮𝗿𝗿𝗲𝘁𝘁 𝗠𝗮𝗰𝗸 Founder, Chainlift • (714) 584-5371

On Sun, Aug 4, 2024, 8:42 AM Alexander @.***> wrote:

Hello. I decided to try this in react app and follow guide in docs. It suggests importing library and using classes as plain strings. But with how many classes there are and without auto complete hints it looks very unrealistic to use it for anything serious.

Instead or in addition I suggest adding css modules support. So the usage would be like this

import liftkit from '...'...

Also I think there is error in docs on this page. It suggests using import liftkit from @./liftkit-css', but it is not working. And import @./liftkit-css' is working.

— Reply to this email directly, view it on GitHub https://github.com/chainlift/liftkit-css/issues/11, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXXQ7JXLM26GIEY7AVNHLJLZPZDWPAVCNFSM6AAAAABL66AEECVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ2DOMJYG42DGMA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

Arctomachine commented 1 month ago

Nextjs, app router.

chainlift commented 1 month ago

That's so bizarre, it should already work like that, but clearly it doesn't. Thanks for the note!

𝗚𝗮𝗿𝗿𝗲𝘁𝘁 𝗠𝗮𝗰𝗸 Founder, Chainlift • (714) 584-5371

On Sun, Aug 4, 2024, 9:27 AM Alexander @.***> wrote:

Nextjs, app router.

— Reply to this email directly, view it on GitHub https://github.com/chainlift/liftkit-css/issues/11#issuecomment-2267597399, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXXQ7JWZY3H7J33DFTJYXO3ZPZI6BAVCNFSM6AAAAABL66AEECVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRXGU4TOMZZHE . You are receiving this because you commented.Message ID: @.***>

Arctomachine commented 1 month ago

About lack of auto complete hints it was possibly false alarm. My editor picked up imported options after restart, but looks like not all of them correct. Can you verify? In particular, it suggests wrong class names for containers. For comparison, background colors are correct - and there is no doubt it imports them from right source because of specific color names. I manually opened file containers.css and there are really no classes like container__default image image

chainlift commented 1 month ago

Oh hell okay that's a discrepancy. Yeah, thank you.

𝗚𝗮𝗿𝗿𝗲𝘁𝘁 𝗠𝗮𝗰𝗸 Founder, Chainlift • (714) 584-5371

On Sun, Aug 4, 2024, 2:59 PM Alexander @.***> wrote:

About lack of auto complete hints it was possibly false alarm. My editor picked up imported options after restart, but looks like not all of them correct. Can you verify? In particular, it suggests wrong class names for containers. For comparison, background colors are correct - and there is no doubt it imports them from right source because of specific color names. I manually opened file containers.css and there are really no classes like container__default image.png (view on web) https://github.com/user-attachments/assets/11886565-eea3-4a72-aa00-45ff61aa7254 image.png (view on web) https://github.com/user-attachments/assets/31a3e52e-d0b3-489f-af07-eb54d3233408

— Reply to this email directly, view it on GitHub https://github.com/chainlift/liftkit-css/issues/11#issuecomment-2267750338, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXXQ7JSIB7YPILGRCKLTSBLZP2P25AVCNFSM6AAAAABL66AEECVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRXG42TAMZTHA . You are receiving this because you commented.Message ID: @.***>

chainlift commented 1 month ago

Alrighty I've corrected this by changing the container suffixes to match the correct class names as seen in the LiftKit docs. The previous class names for containers seen in the screenshots provided here are from an upcoming tailwind plugin project. Investigating the autofill next.