CSS element > element selector is ignored

[carlosrovira]

Hi,
I'm finding another blocking problem with CSS compilation.

I have the following CSS rule:

.jewel.textfield > input {
...
}

this is ignored in the final App

(Note that other kind of selection like "> *" is working)

This is blocking and needed to continue with the theming effort, I'll try to use in the meanwhile a temporal selector to achieve the final results

[carlosrovira]

This occurs the same with the following

.jewel.checkbox > input[type="checkbox"] {
...
}

but seems the same as before

[aharui]

What do you mean by ignored? Is it not in the output .css file or is it not taking effect?

[carlosrovira]

It's not in final App.css, if I change to for example

.jewel.textfield .input {...}

it appears. I'm for now using dot notation, but I think selectors [1] should be working right since are very needed in CSS. Right now I think we only support a subset of them.

Thanks

[1] https://www.w3schools.com/cssref/css_selectors.asp

[aharui]

Are you sure your syntax is allowed? The documentation and examples seem to indicate that both sides have to be element names and not class names.

[Harbs]

Yes. That's allowed. I'm successfully using some CSS that looks like this:

        .tabs > li {
            transition-duration: .1s;
            display: table-cell;
            list-style: none;
            text-align: center;
            /* padding: 0px 20px 25px 20px; */
            position: relative;
            overflow: hidden;
            cursor: pointer;
            color: white; 
            z-index: 1;
        }
        .tabs > li:before {
            z-index: -1;
            position: absolute;
            content: "";
            width: 100%;
            height: 120%;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.3);
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            transition-duration: .1s;
            border-radius: 5px 5px 0 0;
        }

However, this syntax does work for me when the namespace is:
@namespace "http://www.w3.org/1999/xhtml";

Carlos, can you confirm that this does not work?

[aharui]

This seems to be working for me in the compiler test. Get the latest compiler and see if is better

[carlosrovira]

Thanks Alex, Harbs, I'll be on trip for the next several hours, I only could test #31, I expect to try this and #32 in about 8 hours from now. Thanks! since I think CSS bugs are so much important for me with theme feature but as well for any other trying to use Royale and working with CSS.

[carlosrovira]

Hi,

I tried but is not working for me. I'm sure I have the latest, since #31 is working now.

I tried with something basic like Harbs proposed

.tabs > li {
  cursor: pointer;
}

And this is not in App.css

btw, I was using

@namespace "http://www.w3.org/1999/xhtml";

since the beginning.

Maybe something around this is affecting this kind of rule. I'm trying to imagine what could be...

[aharui]

I added the above to the compiler test case and it worked as expected. Post a test case or get the compiler's test case to fail.

[Harbs]

Maybe post the full css block?

[carlosrovira]

Hi,

I think I see where is the problem. If I declare something in the final Application with or without a "dot" (i.e: .div or div), all goes ok.

The problem is declaring in a library! when I tried to create that on a library, dot notation is ok but without dot (i.e: h1, div, span) all rules are always ignored in the final app css.

Make this more sense now?, hope we could get to the end of this since is somehow blocking

Thanks

[aharui]

6b56762

[carlosrovira]

As I commented on #32 this fix solves all the problems. Thanks!