Suggestion: Adopt the j2c v1 backend API (and get automatic prefixes for free) about bss HOT 5 OPEN

Hi @pygy

That looks interesting.. I'm a bit behind with various stuff, so I hope its ok if I first take some time to look closer and grok this later on the week?

from bss.

@porsager sure take your time :-)

from bss.

Adding some clarifications, because there are j2c specific bits in the docs.

When you are ready, start here:

The backend/filter API provides a PostCSS-like system without a need to materialize the AST. Your engine calls it like this:

backend.init()
  backend.atrule('@-webkit-media', 'media', 'screen', 'rule' /*takes a block of rules*/)
    backend.rule('.foo')
      backend.decl('color', 'red')
    backend._rule()
  backend._atrule()
result = backend.done()

Which becomes with the default j2c backend the following string.

@-webkit-media screen {
  .foo {
    color: red;
  }
}

Plugins take the form of a decorator function that takes the backend as argument and return an object with a subset of the backend method:

function autoPxPlugin(next) { // next is the backend so far
  return {
    decl(prop, value) {
      next.decl(
        prop,
        needsPx(prop, value) ? value + 'px' : value
      )
  }
}

function needsPx(prop, value){
  // left as an exercise for the reader
}

The plugins are baked in when the lib is initialized:

const plugins = [autoPxPlugin]

const backend = plugins.reduce(
  (backend, plugin) => Object.assign({}, backend, plugin(backend),
  sink // the bare backend
)

The err() method allows one to display errors in context (try to add or remove a letter from an at-rule in the prefix-plugin playground), and the raw() method inserts raw text into the buffer. Not sure how useful they would be for bss.

Here's the default j2c sink:

let buf, err

const sink = {
  init: function () {buf=[], err=[]},
  done: function () {
    if (err.length != 0) throw new Error('j2c error(s): ' + JSON.stringify(err,null,2) + ', in context:\n' + buf.join(''))
    return buf.join('')
  },
  err: function (msg) {
    err.push(msg)
    buf.push('/* +++ ERROR +++ ' + msg + ' */\n')
  },
  raw: function (str) {buf.push(str, '\n')},
  atrule: function (rule, kind, param, takesBlock) {
    buf.push(rule, param && ' ', param, takesBlock ? ' {\n' : ';\n')
  },
  // close atrule
  _atrule: function () {buf.push('}\n')},
  rule: function (selector) {buf.push(selector, ' {\n')},
  // close rule
  _rule: function () {buf.push('}\n')},
  decl: function (prop, value) {buf.push(prop, ':', value, ';\n')}
}

Provided you are inserting rules using insertRule() may have to monitor the nesting level and insert when it reaches 0 when either _rule() or _atrule() are called (assuming it is possible for a single call to generate more than one rule).

from bss.

Hi @pygy .. Sorry for not getting back sooner.

bss already does automatic vendor prefixes and eg. px suffixing, but it is also browser only, relying on dom vendor prefix detection to do it.

I've been trying to wrap my head around this, and if I get it right implementing this would mainly be a benefit when generating actual stylesheets outside the browser for eg. SSR right?

I have some ideas for how to make SSR possible with bss, and they might fit well with the j2c backend api, but I also need to do a bit more, such as enabling the function calling style of writing css which bss provides.

I might be misunderstanding some things, so if it's easier to discuss on gitter we can also continue there ;)

from bss.

@porsager The prefix plugin is client-side only at the moment, for SSR, I have a PostCSS adapter that creates a PostCSS AST out of what you feed it, applies PostCSS plugins and walks the resulting tree to call the next part of the backend...

I had missed the vendor prefix detection in bss... AFAICS, it only prefixes properties. The prefix plugin linked above also prefixes values (keywords, functions, properties as values (transition: , will-change:, ...), selectors (pseudo elements, ...), and at-rules (the rules themselves and their parameters where needed e.g. @media (min-resolution: 2dppx) to whatever the browser supports: -webkit-min-resolution: 2 or min-resolution: 192dpi, etc. for old Firefox and Opera). It also translates the final flexbox spec to the older variants, sometimes expanding one shortcut property to multiple ones.

I may have missed some things, the full feature list is in the readme.

For gitter, sure, the j2c channel would seem appropriate unless you have one for bss (porsager/bss returns a 404)

https://gitter.im/j2css/j2c

from bss.