search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 106 forks source link

text property being ignored #299

Closed ion-willo closed 3 years ago

ion-willo commented 3 years ago

🐛 Bug Report

It seems text="x" doesn't work as per the documentation.

To Reproduce

Steps to reproduce the behavior: Open the playground. At line 66 ad the line: <x.p text="xs">Small Text</x.p>

Note the text size of the new element.

Now change it to: <x.p text="7xl">Small Text</x.p> Note the text size of the new element does not change.

Expected behavior

The text size should change to be as large as the Theme specifies it to be.

I may be missing a key part as to how I'm supposed to setup text to make it work.

agriffis commented 3 years ago

Hmm, it seems to be working on the xstyled.dev website. Could you supply a codesandbox?

ion-willo commented 3 years ago

I must be doing something wrong then. I tried it here: https://codesandbox.io/s/xstyled-v2-playground-od6si?file=/src/App.js

Maybe I'm missing some part of how this should work? Could you share what you've done?

agriffis commented 3 years ago

Well, your sandbox is xstyled v2 and the text utility is a v3 feature. Are you using v2 or v3 in your application?

Regarding how the website works, it's in the repository here

ion-willo commented 3 years ago

Mmm... that may explain it. Looks like I was using v2. Did an npm install styled-components @xstyled/styled-components@latest and that gave me v3.0.3

ion-willo commented 3 years ago

Thanks! Can confirm that worked.