Make styled-jsx extensible

[giuseppeg]

I thought of a way to make styled-jsx a bit more flexible and let users manipulate the CSS both at compile and run time (if they want). This for example would make it possible to use SASS with styled-jsx or I could stop supporting styled-jsx-postcss.

The babel plugin could accept an option transformCss that is a module name. Such a module exports an object with two functions for runtime and compile time. Both signatures would be (css: string) => string (by default an identity function).

// my-styled-jsx-transform/index.js
export default {
  compile: (css) => sass.renderSync({ data: css }),
  runtime: (css) => css
}

and in .babelrc:

{
   "plugins": [
      ["styled-jsx/babel", { "transformCss": "my-styled-jsx-transform" }]
   ]
}

Which we will use as follow:

const {compile: _userCompile} = require(state.opts.transformCss)
// set compile to identity function if it is `undefined`

// TBD

const transformedCss = stylis(
   styleJsxId,
   _userCompile(css)
)

// or

const transformedCss = _userCompile(
  stylis(
     styleJsxId,
     css
  )
)

I am not sure about the runtime one (which for now could be postponed) but probably we would need to unshift an import like we do with _JSXStyle. The result would be:

import {runtime as _styledJsxTransformCss} from 'my-styled-jsx-transform'
// ...
<_JSXStyle id={1235435} css={_styledJsxTransformCss(`div { color: red }`)} />

cc @rauchg @nkzawa