styled-jsx

Patches

• Add support for Node 4 (#218)

Patches

• Fix at-rules nesting (#216)

Huge thanks to @cheeaun and @thysultan for their help!

Patches

• Update Stylis to fix some issues with global styles (#213)

New Features

• Introduce support for styles in separate files (#148) [@giuseppeg]

// component.js
import styles from './styles'
export default () => (
  <p>
     Hello World ▲
     <style jsx>{styles}</style>
  </p>
)

// styles.js
const color = 'red'
export default `
  p { color: ${color} }
`

Patches

• Fix join :global selectors (#158) [@giuseppeg]
• Fix :not() does not seem to be adding prefix (#146) [@giuseppeg]
• Fix expressions scope check (#204) [@giuseppeg]
• Fix global styles are not processed and minified (#194) [@giuseppeg]
• Fix expressions namespacing inside animation shorthand (#189) [@giuseppeg]
• Fix global breaks when the selector has a combinator (#144) [@thysultan]
• Fix animation without semicolon as last property closes a rule block with ; instead of } (#144) [@thysultan]
• Remove batched styles updates (#139) [@giuseppeg]

Breaking changes

• Make rendering order deterministic (#187) [@Rowno] - styled-jsx/style's flush now returns a Map<styleId: number, component: React$Component> instead of an Array.

Chore

• Add prettier (#196) [@giuseppeg]
• Rewritten tests using ava snapshot (#200) [@tdeschryver]
• Rewrite css compiler (#134) [@thysultan]

Huge thanks to @phtoussaint, @timneutkens, @pixelass, and @xekri for improving the docs!

Patches

• Peer dependencies shouldn't be pinned: 6b85d2477c6cecc7945b0bac3d20e47feadc8f30

Patches

• Allow whitespace in expressions inside template literals: #129
• Add section on Syntax Highlighting: #131
• Pinned dependencies: 9b025e4b6c25d52d9023882e962b13b063da946c
• Moved dependencies to bottom in package.json: 634b05e72c568581c5aba8506d544c07bcf61315
• Updated lockfile for Yarn: 773aa814584a63ba524bfab9b0552b388bb33b0c
• Lowercased text files: 03335b674dfe2d7c0911f8af128506502ca7e7f4
• Proper code style for gulpfile: c388ab564a64bd212d66fd768687c73c440fe6b7
• Ignore logs: 291d9ce446a390e0a07817f30ba95fe41da7e459
• Let Travis decide whether or not to use sudo: d38d78667a58450bd5b63e27bc661d67c3c5adee

Credits

Huge thanks to @nikvm for his help!

Patches

• Accurately document what it transcompiles to: #110
• Fix expressions for the autoprefixed properties: #116
• Docs(README): fix casing on link to dynamic styles: #119
• Fix issue when using cubic-bezier: #124

Credits

Huge thanks to @sheerun, @fatfisz, @adjohnson916 and @thysultan for their help!

Patches

• Fix jsx id bug when using interpolation in template string.: #108

Credits

Huge thanks to @lixiaoyan for the help!

Patches

• Fix inline-flex: #101
• Don't debounce rendering on Safari: #102

Credits

Huge thanks to @cgood92 and @nkzawa for their help!

Patches

• Fix global selectors transform: #98
• Fix multiple animations: #97

Credits

Huge thanks to @nkzawa for their help!

Patches

• Skip non-styled-jsx style elements (#94): [@nkzawa]
• Add section about constants (#87): [@giuseppeg]

Minor Changes

• Add support for expressions within template literals: #80

Credits

Huge thanks to @giuseppeg for his help!

Patches

• Add support for spread attributes (#86): [@giuseppeg]

Patches

• <style> as a top-level component (#75) [@giuseppeg]
• Benchmark Babel transform (#79) [@giuseppeg]

Patches

• Fixes animation namespacing #78 [@thysultan]

Patches

• Fixes https://github.com/zeit/next.js/issues/743: #76

Credits

Huge thanks to @arunoda for their help!

Patches

• Feed babel number, but pass string to css compiler: fac8c6a54c59d50cbd0667902b74ae91920c32a1

Patches

• Don't add the data-jsx attribute to components instances: #71 [@giuseppe]
• Fix animations: 5377347e877aeb94ca74a8935922d6aa56ed4fc7 #68 [@rauchg]

Patches

• Fix FOUC in Safari (#52, PR #63) [@ericf]

Feature

Simplify external API, fix flush (zeit/next.js#496, PR #59) [@nkzawa]