Upgrade to Stylis 3

CHANGELOG.md

@@ -4,7 +4,11 @@ All notable changes to this project will be documented in this file. If a contri
 
 *The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).*
 
-## [Upcoming Major Release]
+## [Unreleased]
+
+- Upgrade stylis to v3.0.4. (see [#829](https://github.com/styled-components/styled-components/pull/829))
+
+## [v2.0.0] - 2017-05-25
 
 - Update css-to-react-native - you'll now need to add units to your React Native styles (see [css-to-react-native](https://github.com/styled-components/css-to-react-native/issues/20), [code mod](https://github.com/styled-components/styled-components-native-code-mod))
 - Update stylis to latest version (see [#496](https://github.com/styled-components/styled-components/pull/496)).
@@ -244,7 +248,8 @@ All notable changes to this project will be documented in this file. If a contri
 
 - Fixed compatibility with other react-broadcast-based systems (like `react-router` v4)
 
-[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.4.6...master
+[Unreleased]: https://github.com/styled-components/styled-components/compare/v2.0.0...master
+[v2.0.0]: https://github.com/styled-components/styled-components/compare/v1.4.6...v2.0.0
 [v1.4.6]: https://github.com/styled-components/styled-components/compare/v1.4.5...v1.4.6
 [v1.4.5]: https://github.com/styled-components/styled-components/compare/v1.4.4...v1.4.5
 [v1.4.4]: https://github.com/styled-components/styled-components/compare/v1.4.3...v1.4.4

package.json

@@ -66,7 +66,7 @@
     "is-function": "^1.0.1",
     "is-plain-object": "^2.0.1",
     "prop-types": "^15.5.4",
-    "stylis": "^2.0.0",
+    "stylis": "^3.0.4",
     "supports-color": "^3.2.3"
   },
   "devDependencies": {

src/test/css.test.js

@@ -29,7 +29,7 @@ describe('css features', () => {
     expectCSSMatches(`
       .sc-a {}
       .b {
-        display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+        display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
       }
     `)
   })

src/test/extending.test.js

@@ -76,12 +76,11 @@ describe('extending', () => {
 
     expectCSSMatches(`
       .sc-a {}
-      .c { color: blue; }
-      .c > h1 { font-size: 4rem; }
+      .c{ color: blue; }
+      .c > h1{ font-size: 4rem; }
       .sc-b {}
-      .d { color: blue; }
+      .d { color: blue; color: red; }
       .d > h1 { font-size: 4rem; }
-      .d { color: red; }
     `)
   })
 

src/test/rehydration.test.js

@@ -188,7 +188,7 @@ describe('rehydration', () => {
       expect(getStyleTags()).toEqual([
         { isLocal: 'false', css: '/* sc-component-id: sc-global-557410406 */ body { background: papayawhip; }', },
         { isLocal: 'true', css: '/* sc-component-id: TWO */ .TWO {} .b { color: red; }', },
-        { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body {color: tomato;}', },
+        { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body{color: tomato;}', },
       ])
     })
 
@@ -203,8 +203,8 @@ describe('rehydration', () => {
       expect(getStyleTags()).toEqual([
         { isLocal: 'false', css: '/* sc-component-id: sc-global-557410406 */ body { background: papayawhip; }', },
         { isLocal: 'true', css: '/* sc-component-id: TWO */ .TWO {} .b { color: red; }', },
-        { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body {color: tomato;}', },
-        { isLocal: 'true', css: '/* sc-component-id: ONE */ .ONE {} .a {color: blue;}', },
+        { isLocal: 'false', css: '/* sc-component-id: sc-global-2299393384 */ body{color: tomato;}', },
+        { isLocal: 'true', css: '/* sc-component-id: ONE */ .ONE {} .a{color: blue;}', },
       ])
     })
   })
@@ -268,10 +268,10 @@ describe('rehydration', () => {
       /* But it is identical, except for... */
       expect(styleTagsAfterAddition[1].outerHTML).toEqual(
         styleTags[1].outerHTML
-        /* ...the new data attribute for the new classname "c"... */
+          /* ...the new data attribute for the new classname "c"... */
           .replace(new RegExp(`${SC_ATTR}="a b"`), `${SC_ATTR}="a b c"`)
           /* ...and the new CSS before the closing tag.  */
-          .replace(/(?=<\/style>)/, '\n/* sc-component-id: THREE */\n.THREE {}\n.c {color: green;}')
+          .replace(/(?=<\/style>)/, '\n/* sc-component-id: THREE */\n.THREE {}\n.c{color: green;}')
       )
 
       /* Note: any future additions don't replace the style tag */

src/test/ssr.test.js

@@ -13,7 +13,10 @@ const keyframes = _keyframes(() => `keyframe_${index++}`, stringifyRules, css)
 
 let styled
 
-const format = css => stripWhitespace(css).replace(/(\*\/|[}>])/g, "$1\n").replace(/\n\s+/g, "\n")
+const format = css => stripWhitespace(css)
+  .replace(/ {/g, "{")
+  .replace(/(\*\/|[}>])/g, "$1\n")
+  .replace(/\n\s+/g, "\n")
 
 describe('ssr', () => {
   beforeEach(() => {
@@ -35,7 +38,7 @@ describe('ssr', () => {
       /* sc-component-id: sc-a */
       .sc-a {}
       .b { color: red; }
-      
+
       </style>
     `))
   })
@@ -57,13 +60,13 @@ describe('ssr', () => {
       <style type="text/css" data-styled-components="" data-styled-components-is-local="false">
       /* sc-component-id: sc-global-2303210225 */
       body { background: papayawhip; }
-      
+
       </style>
       <style type="text/css" data-styled-components="b" data-styled-components-is-local="true">
       /* sc-component-id: sc-a */
       .sc-a {}
       .b { color: red; }
-      
+
       </style>
     `))
   })
@@ -94,7 +97,7 @@ describe('ssr', () => {
       /* sc-component-id: TWO */
       .TWO {}
       .a {color: blue;}
-      
+
       </style>
     `))
   })

src/test/utils.js

@@ -54,8 +54,17 @@ const stripComments = (str: string) =>
 export const stripWhitespace = (str: string) =>
   str.trim().replace(/([;\{\}])/g, '$1  ').replace(/\s+/g, ' ')
 
-export const expectCSSMatches = (expectation: string, opts: { ignoreWhitespace: boolean } = { ignoreWhitespace: true }) => {
-  const css = Array.from(document.querySelectorAll('style')).map(tag => tag.innerHTML).join("\n")
+export const expectCSSMatches = (_expectation: string, opts: { ignoreWhitespace: boolean } = { ignoreWhitespace: true }) => {
+  // NOTE: This should normalise both CSS strings to make irrelevant mismatches less likely
+  const expectation = _expectation
+    .replace(/ {/g, '{')
+    .replace(/:\s+;/g, ':;')
+
+  const css = Array.from(document.querySelectorAll('style'))
+    .map(tag => tag.innerHTML)
+    .join('\n')
+    .replace(/ {/g, '{')
+    .replace(/:\s+;/g, ':;')
 
   if (opts.ignoreWhitespace) {
     const stripped = stripWhitespace(stripComments(css))

src/utils/stringifyRules.js

@@ -2,6 +2,15 @@
 import stylis from 'stylis'
 import type { Interpolation } from '../types'
 
+stylis.set({
+  global: false,
+  cascade: true,
+  keyframe: false,
+  prefix: true,
+  compress: false,
+  semicolon: true,
+})
+
 const stringifyRules = (
   rules: Array<Interpolation>,
   selector: ?string,
@@ -15,14 +24,7 @@ const stringifyRules = (
     `${prefix} ${selector} { ${flatCSS} }` :
     flatCSS
 
-  const css = stylis(
-    prefix || !selector ? '' : selector,
-    cssStr,
-    false,
-    false,
-  )
-
-  return css
+  return stylis(prefix || !selector ? '' : selector, cssStr)
 }
 
 export default stringifyRules

yarn.lock

@@ -5645,9 +5645,9 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-stylis@^2.0.0:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-2.0.12.tgz#547253055d170f2a7ac2f6d09365d70635f2bec6"
+stylis@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.4.tgz#fd7a0f6c10c09903704cc362bc23449afda33458"
 
 supports-color@^2.0.0:
   version "2.0.0"