Rewrite styled-jsx/css

[giuseppeg]

Since when we introduced it in v1 tagging a string with css would generate both scoped and global styles because there was no way for us to guess what were the user intentions. This sucks because you'd get twice as much code in your bundles (ok gzip probably made this suck less but still it is not optimal).

I rewrote the entire external and outside of component styles plugin to finally generate only scoped or global styles based on how the css string is tagged. Basically now css by default generates scoped styles and global styles can be created using css.global:

import css from 'styled-jsx/css'

// Scoped styles
export const button = css`button { color: hotpink; }`

// Global styles
export const body = css.global`body { margin: 0; }`

// Works also with default exports
export default css`div { color: green; }`

In addition to reduce the bundle size this change allows for one awesome thing that is... we could write a Webpack loader or use an existing one (I can talk to this guy) to let people write CSS in external .css files. This means that they'd get all the tools they are used to and they could do all the kind of transformations they want before running the styled-jsx transformation.

This branch introduces another neat feature that is a style resolver: css.resolve yields an object that contains the scoped className and the scoped styles (a react element):

import css from 'styled-jsx/css'

// Resolved styles
export const link = css.resolve`a { color: green; }`
// link.className -> scoped className to apply to `a` elements e.g. jsx-123
// link.styles -> styles element to render inside of your component

This solution was basically already possible in user land but now we have a proper API for it, and it can also work with dynamic styles:

function getStyles(color) {
  return css.resolve`
    a { color: ${color} }
  `
}

Final bonus. I created a Babel macro for resolve which should allow people to use this last feature in Create React App.

Since these are breaking changes, I'd say we release v3.

For more details take a look at the README.md, I am not expecting you to review this all :)

[ebramanti]

@giuseppeg Question about this PR. Does css.resolve still have the same behavior where nested selectors are prefixed?

Use case question I have is when passing a className to a third-party component, and I want only the top-level selector prefixed and everything within it not prefixed.

[giuseppeg]

@jadengore yes every selector in the css string is scoped.

Use case question I have is when passing a className to a third-party component, and I want only the top-level selector prefixed and everything within it not prefixed.

For this you don't need styled-jsx I guess. You can just generate a unique classname that you would use like in ID to style the third party component with global styles

[nkzawa]

LGTM 👍

[timneutkens]

we could write a Webpack loader or use an existing one (I can talk to this guy) to let people write CSS in external .css files.

cc @hanford is currently using https://github.com/traveloka/styled-modules

[giuseppeg]

@timneutkens @coox is going to adapt https://www.npmjs.com/package/styled-jsx-css-loader

[timneutkens]

Awesome!

[ebramanti]

When will this be released?

[giuseppeg]

we are kinda blocked by thysultan/stylis#101

[jkjustjoshing]

What does "N.B." mean here?