styled-jsx

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

Patches

• Fix external styles not supporting nested objects for constants #321

Minor changes

• Add React 16 as peer dependency to remove warnings #314

Features

• Introduce a plugin system to preprocess styles 🎉 #291

Plugins are regular JavaScript modules that export a simple function with the following signature:

(css: string, options: Object) => string

They accept a CSS string in input, optionally modify it and finally return it.

Plugins make it possible to use popular preprocessors like SASS, Less, Stylus, PostCSS or apply custom transformations to the styles at compile time.

Details and usage can be found in the CSS Preprocessing via Plugins section of README.md

Patches

• Switch to stylis-rule-sheet to split CSS rules into array of rules for optimizeForSpeed #313. This also fixes #305 - huge thank you to @thysultan for his help!

Patches

• Fix buggy tagged template literals detection transpiled unrelated non-css strings #304

We are excited to release the v2 🎉

Features

• Dynamic styles support
• Switch from data attributes to className
• Add optimizeForSpeed mode for fast styles injection when in production

Breaking changes

• External styles rework - now external styles must be tagged with css

Details at #288 and the README.