special selectors

[ph4un00b]

Hello, congrats on the awesome idea! I support yielding the minimal for the user as well.
I have a blocker in my way, what is the simplest approach to get selectors like this to work the stylify way?

     <!--- nth-of-type(even) --->
     article:nth-of-type(even) {
        display: flex;
        flex-flow: column;
        flex-direction: row-reverse;
      }
      
      <!--- ~ * --->
      details[open] summary ~ * {
        animation: open 0.3s ease-in-out;
      }

     <!--- ::-webkit-details-marker --->
      details summary::-webkit-details-marker {
        display: none;
      }

[Machy8]

Hi @ph4un00b,

Thanks a lot! I am very glad that you like the idea! ❤️

I have made an example on codepen - https://codepen.io/Machy8/pen/wvXrxze

A bit of explanation

• The selectors you see [li:nth-of-type(even)]{color:blue} has this structure [<cssSelectors>]{<stylifySelectors>}
  • <cssSelectors>: Are the same like in CSS. Except without space use _ and for a quote ^. You can use more like in CSS using ,.
  • <stylifySelectors>: Normal Stylify selectors. You can add more using ; that splits the content within the {}
• The & characters always refers to upper level, like in SCSS
  • Selector: [div]{font-size:24px} => CSS: [div]{font-size:24px} div {font-size:24px}
  • Selector: [div_&]{font-size:24px} => CSS: div [div_&]{font-size:24px} {font-size:24px}
  • Selector: [&[open]_div]{font-size:24px} => CSS: [&[open]_div]{font-size:24px}[open] div {font-size:24px}

In stylify-components: You can write the CSS selector with spaces and you can use & to chain selectors like in SCSS. But to keep things simple, only nesting and chaining work here.

More about Components.

Selectors

stylify-components
button: `
 font-size:24px
 &--active { color:red }
 header & { font-size:12px }
`
/stylify-components

CSS

.button { font-size:24px }
.button--active { color:red }
header .button { font-size:12px }

There are also custom selectors that have the same syntax as components but are used for selecting things like article, details, div and etc.

Hope this helps. If you have any other questions, let me know :)!

[ph4un00b]

pretty useful, thanks a lot!

[Machy8]

For later viewers: You might want to check out Syntax Cheat Sheet.