idea: template string interpolation

Curious if interpolation for template strings is something of interest? For example:

var red = '#f00'
var cssString = '.upper { text-transform: uppercase }'

var prefix = css`
  :host {
    background: ${red}
  }

  ${cssString}
`

In Node, doing the interpolation itself isn’t tooo bad if we parse sheetify args and pass into a thing like:

// v simplified for example sake!
function sheetify () {
  var args = Array.prototype.slice.apply(arguments)
  var css = interpolate(args[0], args.slice(1))
  // ...etc
}

function interpolate (strs, vals) {
  return strs.map(function (str, i) {
    return str + (vals[i] || '')
  }).join('')
}

But! It seems like the complication is the browserify transform. Ideally the transform would actually execute the js so the insert-css() call has no additional overhead. But perhaps a transform like yo-yoify where calls to sheetify w/in the source are converted into plain functions could work too?

I took a look at implementing this today, but I’m quite unfamiliar with writing browserify transforms, and as I was banging head against wall figured I’d stop and check to see if this even falls within the sheetify radar 📡🖖

[yoshuawuyts]

Woot! Yeah, think this good to close (:

On Wed, Sep 20, 2017 at 12:18 AM Jon Gacnik [e-mail] wrote:

Hey all @ahdinosaur https://github.com/ahdinosaur @yoshuawuyts https://github.com/yoshuawuyts ! Jumping back in here since #134 https://github.com/stackcss/sheetify/pull/134 pretty much solves this for us! This added support to require node modules via the transform, something like:

style.js

var red = ‘#f00’ module.exports = :host { color: ${red} }

app.js

var css = require(‘sheetify’)var html = require(‘bel’) var prefix = css(‘./style.js’) document.body.appendChild(html <div class="${prefix}">bam!</div>)

wonder if we should call this closed 🤔 ?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/stackcss/sheetify/issues/128#issuecomment-330689992, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWleuHQYDM7AfKojC32XbMTyvZdzTKqks5skD24gaJpZM4OSQz_ .

[jongacnik]

Hey all @ahdinosaur @yoshuawuyts ! Jumping back in here since #134 pretty much solves this for us! This added support to require node modules via the transform, something like:

style.js

var red = '#f00'

module.exports = `
 :host {
    color: ${red}
  }
`

app.js

var css = require('sheetify')
var html = require('bel')

var prefix = css('./style.js')

document.body.appendChild(html`
  <div class="${prefix}">bam!</div>
`)

wonder if we should call this closed 🤔 ?