Question: :pseudo + sibling

[sarbbottam]

Is it possible to something like http://codepen.io/sarbbottam/pen/YGjXjq?editors=0100 with glamor?

If so, a working example would be great.

Thanks!

[threepointone]

sure, something like this should work.

let rule = {
  opacity: 0,
  '& + label': {
    position: 'relative'
  },
  '& + label:before, & + label:after': {
    content: '""',
    position: 'absolute' 
  } 
  // etc...
}

// ...
<input type="checkbox" id="toggle" className={rule} />
<label htmlFor="toggle">Toggle </label>

[sarbbottam]

Awesome. I would give it a try.

Would you consider to showcase such complex use case in the readme/docs? I would be happy to raise a PR.

[threepointone]

Well... I've started a complete rewrite of the docs, mind if I ping you when I have something to share there? Would be happy to take docs PRs into that.

[sarbbottam]

Not at all. Would love to contribute to this awesome project.

I have been looking around for the perfect CSS solution. Wasn't happy with the existing ones, so created Sheer. It is good but far from my desired one, no scoping, specificity issues. I looked at atomizer, which addressed those issues but would create a readability concern with the example I provided above. I loved css-module, but it does not seem to be in active development, tried few more ... and then gave up, went back to Sheer.

I did come across glamor earlier but did not quite follow/like the syntax

<div 
  {...style({ color: 'red' })} 
  {...hover({ color: 'pink' })}>
>

Visited again a while back, directed from Next.js. And guess what, the current syntax is so intuitive. I guess this is the CSS Solution rather Presentation Solution I have been looking for.

More than happy to contribute, if I may be of any help.

Thanks for reading!

[threepointone]

Sheer looks great! I'll loop you in if I need any help, thanks! Lemme know how using glamor goes for you.

[yougotashovel]

Did anybody get this method to work? Trying to style a checkbox label but having difficulty implementing.

[jguffey]

So, as I've recently discovered content: '', and content: '""', are not the same. content: '', will not work, since JS needs quotes in a string literal. I struggled with this for a good half hour before tweaking the right knob.

(This may be a good gotcha to note in the readme?)

Hope this helps!

[abeaclark]

Wow @jguffey Took me forever to find this post, but so glad I did. Had the exact same problem. Thank you!