Add specificity to css selector

.gitignore

@@ -4,3 +4,4 @@ npm-debug.log.*
 dist
 .DS_Store
 bundle-stats.html
+.vscode

CHANGELOG.md

@@ -6,7 +6,10 @@ All notable changes to this project will be documented in this file. If a contri
 
 ## Unreleased
 
-- N/A
+- Prevent `withTheme` HOC from breaking when passing a theme from `defaultProps`, thanks to [@kutyel](https://github.com/kutyel) (see [#1130](https://github.com/styled-components/styled-components/pull/1130))
+- Refactor out theme logic in StyledComponent's componentWillMount & componentWillReceiveProps (see [#1130](https://github.com/styled-components/styled-components/issues/1130))
+- Add onReset to valid react props list (see [#1234](https://github.com/styled-components/styled-components/pull/1234))
+- Add support for ServerStyleSheet PropType in both StyleSheetManager and StyledComponent (see [#1245](https://github.com/styled-components/styled-components/pull/1245))
 
 ## [v2.2.1] - 2017-10-04
 

dangerfile.js

@@ -2,6 +2,9 @@
 
 import { danger, warn, fail, message } from 'danger'
 import fs from 'fs'
+import jest from 'danger-plugin-jest'
+
+jest()
 
 const jsModifiedFiles = danger.git.modified_files.filter(path => path.startsWith('src') && path.endsWith('js'))
 const vendorModifiedFiles = danger.git.modified_files.filter(path => path.startsWith('src/vendor') && path.endsWith('js'))

package.json

@@ -67,7 +67,7 @@
     "is-function": "^1.0.1",
     "is-plain-object": "^2.0.1",
     "prop-types": "^15.5.4",
-    "stylis": "^3.2.1",
+    "stylis": "3.x",
     "supports-color": "^3.2.3"
   },
   "devDependencies": {
@@ -90,6 +90,7 @@
     "bundlesize": "^0.13.2",
     "chokidar": "^1.6.0",
     "danger": "^0.16.0",
+    "danger-plugin-jest": "^1.0.1",
     "enzyme": "^2.8.2",
     "eslint": "^3.15.0",
     "eslint-config-airbnb": "^13.0.0",
@@ -102,6 +103,7 @@
     "flow-bin": "^0.47.0",
     "flow-watch": "^1.1.1",
     "jest": "^20.0.4",
+    "jest-json-reporter": "^1.2.2",
     "jsdom": "^9.10.0",
     "lint-staged": "^3.3.0",
     "node-watch": "^0.4.1",
@@ -136,7 +138,8 @@
     "testPathIgnorePatterns": [
       "<rootDir>/src/native",
       "<rootDir>/src/primitives"
-    ]
+    ],
+    "testResultsProcessor": "jest-json-reporter"
   },
   "lint-staged": {
     "*.js": [
@@ -148,7 +151,7 @@
   "bundlesize": [
     {
       "path": "./dist/styled-components.min.js",
-      "threshold": "14kB"
+      "threshold": "14.5kB"
     }
   ]
 }

src/constructors/test/injectGlobal.test.js

@@ -10,9 +10,9 @@ import { expectCSSMatches, resetStyled } from '../../test/utils'
 const injectGlobal = _injectGlobal(stringifyRules, css)
 
 let styled = resetStyled()
-const rule1 = 'width: 100%;'
-const rule2 = 'padding: 10px;'
-const rule3 = 'color: blue;'
+const rule1 = 'width:100%;'
+const rule2 = 'padding:10px;'
+const rule3 = 'color:blue;'
 
 describe('injectGlobal', () => {
   beforeEach(() => {

src/constructors/test/keyframes.test.js

@@ -41,19 +41,19 @@ describe('keyframes', () => {
     expectCSSMatches(`
       @-webkit-keyframes ${name} {
         0% {
-          opacity: 0;
+          opacity:0;
         }
         100% {
-          opacity: 1;
+          opacity:1;
         }
       }
 
       @keyframes ${name} {
         0% {
-          opacity: 0;
+          opacity:0;
         }
         100% {
-          opacity: 1;
+          opacity:1;
         }
       }
     `)

src/hoc/withTheme.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types'
 import hoistStatics from 'hoist-non-react-statics'
 import { CHANNEL, CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE } from '../models/ThemeProvider'
 import _isStyledComponent from '../utils/isStyledComponent'
+import determineTheme from '../utils/determineTheme'
 
 const wrapWithTheme = (Component: ReactClass<any>) => {
   const componentName = (
@@ -31,17 +32,29 @@ const wrapWithTheme = (Component: ReactClass<any>) => {
     unsubscribeId: number = -1
 
     componentWillMount() {
+      const { defaultProps } = this.constructor
       const styledContext = this.context[CHANNEL_NEXT]
-      if (styledContext === undefined) {
+      const themeProp = determineTheme(this.props, undefined, defaultProps)
+      if (styledContext === undefined && themeProp === undefined && process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error('[withTheme] Please use ThemeProvider to be able to use withTheme')
-        return
+        console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps')
+      } else if (styledContext === undefined && themeProp !== undefined) {
+        this.setState({ theme: themeProp })
+      } else {
+        const { subscribe } = styledContext
+        this.unsubscribeId = subscribe(nextTheme => {
+          const theme = determineTheme(this.props, nextTheme, defaultProps)
+          this.setState({ theme })
+        })
       }
+    }
 
+    componentWillReceiveProps(nextProps: { theme?: ?Object, [key: string]: any }) {
+      const { defaultProps } = this.constructor
+      this.setState((oldState) => {
+        const theme = determineTheme(nextProps, oldState.theme, defaultProps)
 
-      const { subscribe } = styledContext
-      this.unsubscribeId = subscribe(theme => {
-        this.setState({ theme })
+        return { theme }
       })
     }
 

src/models/ComponentStyle.js

@@ -4,6 +4,7 @@ import hashStr from '../vendor/glamor/hash'
 import type { RuleSet, NameGenerator, Flattener, Stringifier } from '../types'
 import StyleSheet from './StyleSheet'
 import isStyledComponent from '../utils/isStyledComponent'
+import getComponentCssSelector from '../utils/getComponentCssSelector'
 
 const isStaticRules = (rules: RuleSet): boolean => {
   for (let i = 0; i < rules.length; i += 1) {
@@ -33,7 +34,6 @@ export default (nameGenerator: NameGenerator, flatten: Flattener, stringifyRules
     isStatic: boolean
     lastClassName: ?string
 
-
     constructor(rules: RuleSet, componentId: string) {
       this.rules = rules
       this.isStatic = isStaticRules(rules)
@@ -49,7 +49,11 @@ export default (nameGenerator: NameGenerator, flatten: Flattener, stringifyRules
      * Hashes it, wraps the whole chunk in a .hash1234 {}
      * Returns the hash to be injected on render()
      * */
-    generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet) {
+    generateAndInjectStyles(
+      executionContext: Object,
+      styleSheet: StyleSheet,
+      options: Object = {},
+    ) {
       const { isStatic, lastClassName } = this
       if (isStatic && lastClassName !== undefined) {
         return lastClassName
@@ -74,7 +78,9 @@ export default (nameGenerator: NameGenerator, flatten: Flattener, stringifyRules
         return name
       }
 
-      const css = `\n${stringifyRules(flatCSS, `.${name}`)}`
+      const selector = getComponentCssSelector(name, options)
+
+      const css = `\n${stringifyRules(flatCSS, selector)}`
       // NOTE: this can only be set when we inject the class-name.
       // For some reason, presumably due to how css is stringifyRules behaves in
       // differently between client and server, styles break.

src/models/StyleSheet.js

@@ -31,7 +31,7 @@ export default class StyleSheet {
   deferredInjections: { [string]: string } = {}
   componentTags: { [string]: Tag }
   // helper for `ComponentStyle` to know when it cache static styles.
-  // staticly styled-component can not safely cache styles on the server
+  // statically styled-component can not safely cache styles on the server
   // without all `ComponentStyle` instances saving a reference to the
   // the styleSheet instance they last rendered with,
   // or listening to creation / reset events. otherwise you might create

src/models/StyleSheetManager.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import StyleSheet, { CONTEXT_KEY } from './StyleSheet'
+import ServerStyleSheet from './ServerStyleSheet'
 
 class StyleSheetManager extends Component {
   getChildContext() {
@@ -18,11 +19,17 @@ class StyleSheetManager extends Component {
 }
 
 StyleSheetManager.childContextTypes = {
-  [CONTEXT_KEY]: PropTypes.instanceOf(StyleSheet).isRequired,
+  [CONTEXT_KEY]: PropTypes.oneOfType([
+    PropTypes.instanceOf(StyleSheet),
+    PropTypes.instanceOf(ServerStyleSheet),
+  ]).isRequired,
 }
 
 StyleSheetManager.propTypes = {
-  sheet: PropTypes.instanceOf(StyleSheet).isRequired,
+  sheet: PropTypes.oneOfType([
+    PropTypes.instanceOf(StyleSheet),
+    PropTypes.instanceOf(ServerStyleSheet),
+  ]).isRequired,
 }
 
 export default StyleSheetManager