Forward slash in css is ignored creating invalid names about core HOT 9 CLOSED

Our CSS parser is an ad-hoc parser and there can be bugs like this, unfortunately. This one is fixed on main branch now. But I doubt this is the end of Tailwind related bugs. Let's collect Tailwind bugs under this issue.

from core.

I hope this is the last one for a while.

Property font-size: 100% results in size of the text to be 1px. Instead of 16px.

from core.

Also fixed.

from core.

@Muchaszewski some of these are inevitable differences between web and ReactUnity. Web has several different layout modes such as inline, block, flex, grid, table etc. For web the default is block/inline layout. ReactUnity only has flex. And ReactUnity's implementation of flex is also different from web. Also we have different defaults. For example the flex-direction is column by default. ReactUnity uses the defaults of Yoga, the layout engine we use.

Tailwind isn't aware of that and so that is why you are having problems. The before/after issue can be solved by setting the buttons flex-direction to row. And as you said you have incorrect width because element's width is stretched by default. You can change defaults in your CSS as:

* {
  flex-direction: row;
  align-items: start;
  justify-content: start;
}

We could also code different layout modes in the future but this is the least priority right now. Although web has so many different layouts, most of them can be emulated with flexbox layout. There are cases when each layout has its advantages though. For example, inline/block layout is best when text is more prevalent, or table layout is good for showing tabular data. For now, users will need to be aware that 1-to-1 conversion from web to ReactUnity is not possible and they need to watch out for layout differences. (Actually I deliberately do not have div/span in ReactUnity so that users are aware of it)

One thing we can fix is setting the width/height to 0 if text content is empty. I will check how it works.

As for border-radius, I will fix it. I think it can because it is a shorthand and our shorthand implementation is not too good to accept different units yet. Separate properties may work.

from core.

::before and ::after are considered elements with computed size (font size seems to be directly related to their size) even if they are empty.
Tailwind uses them to remove some default HTML styling form browser.

In browser
With before and after:

Without

In Unity

_before, _text and _after have computed height of 20

Notice the size diffrence

from core.

By default in HTML width of the element is assumed "0" unless it has some content. For example text. Then this text decides the size of that content.

Here whereas height is somewhat correct, width is assumed to be the width of the screen. This is easily fixable with styling, but might cause some issues for pure conversions from some examples

from core.

About the width of the elements, I could pinpoint this to alight-items and alight-self properties. They are by default set to Auto - which is internally set to Strech.
align-items and align-self should be FlexStart by default

from core.

Border radius (and maybe other properties?) Do not accept rem as a unit.
So eg: border-radius: 0.25rem doesn't work, whereas identical in function border-radius: 4px works as intended. Those two styles should behave identically

PS: I think I should create separate issues for all the things I find ;)

from core.

Fixed the issues with css variables and computed values like rem. Tailwind now works good enough as far as I am aware. However I am not a Tailwind user so I don't know if there are cases that are not supported yet. Let's open new issues in such a case.

from core.