styled-jsx

Minor

• Adds support for styleModule to configure the module that the transpiled files should import (#629) - @arcanis

Patches

• Upgrade to @babel/types to remove transitive babel-runtime depenency (#621) - @tkalliom

docs

• Update readme to give reason for using macro (#601) - @wilsonpage
• Fix multiple typos (#600) - @ryanfitzer
• Clarify resolve tag + macro docs, add CRA section (#596) - @karlhorky

Minor

• Add support for inline object spreads {...{ className: 'foo' }} (#541) (@doniyor2109)

Patches

• Remove line breaks from production styles (#546)
• Fix source maps generation (#551) - Thanks to (@ijjk) for his feedback!
• Update dependencies (#550)

Minor

• Transition to Babel 7 and add support for JSX fragments shorthand <></> - Babel 6 is still supported (#535) (@ijjk)

Patches

• Switched to visiting the Program path and then start a traversal manually to solve conflicts with other Babel plugins. (#536) (@ijjk)
• Upgrade Stylis and fix some CSS preprocessing issues.

Huge thanks to @ijjk for his contributions! 🎉

Patches

• Do not use the css prop in JSXStyle (#534) (@shYkiSto)

styled-jsx converts style blocks to a custom JSXStyle component which takes css strings via a css prop. This prop conflicts with other libraries like styled-components. Since for us is just an implementation detail we are going to rename it to children and make theJSXStylecomponent work more like a regularstyle` element.

With this version you might need to update snapshot tests.

Patches

• Add missing filename opt for external files (#526)
• Fix styled-jsx/server readme link (#525) (@zgreen)
• Readme: Stylus syntax highlight in VScode (#519) (@samuelroy)
• Fix options type function to always execute (#522) (@danielr18)

Patches

• Fix issue with plugins info message flooding (#518) (@giuseppeg)
• Fix vendorPrefix typo to vendorPrefixes (#515) (@ryanfitzer)

Patches

• Readme: Update Atom instructions with support for css...: #473
• Fixed typo in FAQ: #475
• Fix JSXStyle renders styles too late: #484

Credits

Huge thanks to @rstacruz, @jasonkylefrank, and @giuseppeg for helping!

Patches

• e9964cece80f9a9a476e55429877c219a2f53663 - Whitelist missing files in package.json (@giuseppeg)

Patches

• 98164cd2a3cef21b556f17c6cdad5be20e5f67d4 - Update package-lock.json (@giuseppeg)

• Enables authoring of styles in actual css files via the new styled-jsx/webpack loader 🔥

• Introduces support for dynamic HTML elements

const Heading = `h${props.level}` 

• Simplifies styling of child components via the new css.resolve tag which returns the scoped className and styles

const { className, styles } = css.resolve`p { color: black }` 
// ...
<div>
  <ChildComponent className={className} />
  {styles}
<div/>

• React.StrictMode compliant

Breaking changes

• 051d0d182bace7b9d8db374ad783c54f97512e3d - Rewrote styled-jsx/css. External global styles should now be tagged with css.global`` (#422) (@giuseppeg)

Features

• bd7ae2a7f2ea755c54ecaabbd84b4337a14664f3 - Add webpack loader to load external CSS files (#466) (@giuseppeg)
• 051d0d182bace7b9d8db374ad783c54f97512e3d - Introduce css.resolve`` which returns a scoped className and styles (#422) (@giuseppeg)
• 051d0d182bace7b9d8db374ad783c54f97512e3d - Introduce styled-jsx/macro which allows to use css.resolve as a Babel macro (eg. in Create React App) (#422) (@giuseppeg)
• 8d9374a9e5ca8e22e2ef621e7c6488872c8a62b4 - Add support for dynamic html elements (#462) (@twltwl)
• a55c821a998b9a7210c03a30c4ae33de7ec94eb6 - Log a message when loading a plugin (#448) (@giuseppeg)

Patches

• 69c00d4ad8349b458316fee112931db162da5cad - Switch to async safe lifecycle methods (#464) (@giuseppeg)
• 8deb136be65fb53612ac7e6fcf8b943509c21f6c - Add FAQ about packaging with Rollup (@giuseppeg)
• 2831798e31646133296feaa9096f66a15f4672bc - Simplify build and clean up things a bit (#421) (@giuseppeg)

Patches

• Broken style transformation when there is a line break between selectors and :global(). (#411)
• Using @support inside @media discards a closing curly brace. (#370)

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

Patches

• Sanitize dynamic styles on the server. (#403)
• Better way to detect dynamic styles. (#401) [thanks @a-ignatov-parc]
• Pass filename from opts to plugin. (#399) [thanks @MarcoThePoro]

Patches

• Fixed dynamic styles detection when destructuring inside of the render method. (#397)

Huge thanks to @a-ignatov-parc for the fix!

Patches

• Fix nested style tags break compilation (#260)
• Fix null characters break Stylis compilation (#391)

Patches

• Fix complex spread props transpilation. (#356) (@pudility)
• Add dummy styled-jsx/css.js module. (#357)
• Fix minification issue with at-keywords that are not ruleset. (#353) (@thysultan)

Features

• Add support for css tagged template literals in component files #346

Fixes

• Selectors with line breaks don't work #348

Patches

• Fix multiple animation-name and animation-name not working #339
• Updated dependencies #339