not possible to style top-level element

[ahdinosaur]

want to be able to something like:

function render (props) {
  return h('div.' + prefix, {
    textContent: 'hello world!'
  })
}

:hover {
  color: green;
}

but instead had to do:

function render (props) {
  return h('div.' + prefix, [
    h('div.thing', {
      textContent: 'hello world'
    })
  ])
}

.thing:hover {
  color: green;
}

ran into this writing: js css

or am i missing something?

[yoshuawuyts]

Ah, it took me a while to understand what you're doing. sheetify was built with valid CSS in mind; adding namespaces to prevent conflicts after the fact but still able to be run standalone. It seems you've deviated a bit from that.

This might perhaps be an alternative:

// I think ES6 template strings make sense here, but they're always optional
function render (props) {
  return h(`div.${prefix}.thing`, [
    textContent: 'hello world'
  ])
}

/* .thing will be prefixed, mapping back to the top level element */
.thing: { color: green }
.thing:hover { color: blue }

Does this make sense / work for you?

[yoshuawuyts]

Closing for now, feel free to reopen if this doesn't work for you. I'm trying to be more decisive in issue-control, hah ✨

[wooorm]

@yoshuawuyts Are you sure :hover at the root is a syntax error / malformed CSS? I’ve always been under the impression that it’s perfectly valid (treated like *:hover). Although in the case of this pseudo-class it’s a bit weird though 😉

[yoshuawuyts]

Oh, I meant the linked example:

{
  flex: 1;
}

I ran it through csslint and it had no idea what to do with it. Wasn't aware that :hover at the root did that, though I don't think I'd ever write that on purpose to get that behavior (':

[wooorm]

Oh sorry, missed that! In that case, you’re def. right!

[ahdinosaur]

@yoshuawuyts thanks for the help, the approach for sheetify being built for valid CSS is great, sorry for deviating. 😃

still, the problem with what you suggest is that the css is then prefixed as:

.prefix .thing: { color: green }
.prefix .thing:hover { color: blue }

which doesn't match <div class="prefix thing">...</div>. (needs to be .prefix.thing)

here's this change implemented in the example js css.

[hughsk]

Might this be a candidate for :host as seen here? Only concern is that it would overload Shadow DOM stuff but that's already happening as a result of the prefixing.

/* This: */
:host { color: green; }
:host(:hover) { color: blue; }
/* Becomes: */
.prefix { color: green; }
.prefix:hover { color: blue; }

[yoshuawuyts]

@hughsk I like it

[ahdinosaur]

@hughsk 👍, here's an issue for postcss-prefix: stackcss/postcss-prefix#2.

[yoshuawuyts]

Closing this issue since stackcss/postcss-prefix#3 has been merged