threepointone/glamor

Proposal: Pass template literals instead of object to style()

Closed this issue · 4 comments

sarbbottam commented

pass template literals instead of object

let rule = style(`
  // always use hard coded string "selector"
  selector {
    color: 'red',
    & :hover: {
      color: 'pink'
    }
  }

  @media(max-width: 300px) {
    // always use hard coded string "selector"
    selector: {
      color: 'green',
      & :hover: {
        color: 'yellow'
      }
    }
  }
`)
  • pass this template literal to postCSS to generate CSS
  • hashify generated CSS to create dynamic selector name.
  • replace hard coded "selector" w/ dynamic selector name returned by hashify
  • rest of the stuff, business as usual

Benefit:

  • leverage postCSS
  • let people write the way they write plain old CSS (quite similar to styled-components)

Not sure if I am

  • over-simplifying stuff
  • reiterating something which has already been thought of
threepointone commented

I'm working on a tagged literal version already.

  • 👍2
  • 🎉1
threepointone commented

I'll close this, will ping when I have something to share.

sarbbottam commented

Wow, it's like a resonance. I guess glamor is the best thing, happening in CSS in JS.