Support Theming

README.md

@@ -48,6 +48,80 @@ const ButtonContainer = styled(Container)({
 })
 ```
 
+## Theming
+
+`styled-jss` has out of the box support for theme customization with the unified [theming](https://github.com/cssinjs/theming) package.
+
+```js
+import {ThemeProvider} from 'theming'
+import styled from 'styled-jss'
+
+const theme = {
+  primary: {
+    color: 'black',
+    backgroundColor: 'yellow',
+  },
+}
+
+const Button = styled('button')((props, {theme}) => ({
+  color: theme.color,
+  'background-color': theme.backgroundColor,
+  margin: props.margin,
+}))
+
+const App = () => (
+  <ThemeProvider>
+    <Button margin={20}>This is themed Button</Button>
+  </ThemeProvider>
+)
+
+export default App
+```
+
+## Composable styles
+
+You can compose your style-objects and style-functions.
+
+```js
+import colors from 'my-colors'
+
+/* let's declare some abstract mixins for example */
+
+const theme = ({theme}) => ({
+  color: colors[theme],
+  backgroundColor: colors.accent[theme],
+})
+
+const font = ({bold}) => ({
+  font: {weight: bold ? 'bold' : 'normal', family: 'Arial'}
+})
+
+const size = ({size}) => ({
+  s: {
+    fontSize: 12,
+    lineHeight: 15,
+  },
+  m: {
+    fontSize: 16,
+    lineHeight: 18
+  }
+})[size]
+
+const rounded = ({rounded}) => rounded && {borderRadius: 5}
+
+/* now we can mix them to our Button Component */
+
+const Button = styled('button')(theme, size, font, rounded)
+
+/* and that's it */
+
+<Button theme="action" size="s" rounded />
+
+/* we can also compose object-styles as well */
+
+const Button = styled('button')({margin: props => props.margin}, theme, size)
+```
+
 ## Base Style Sheet
 
 Using base Style Sheet we can reuse classes in the render function and inside of a styled component.

flow-typed/npm/prop-types_vx.x.x.js

@@ -0,0 +1,80 @@
+// flow-typed signature: 15f1dbaabcfdc41488335743c4ebcc75
+// flow-typed version: <<STUB>>/prop-types_v15.5.10/flow_v0.44.2
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'prop-types'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'prop-types' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'prop-types/checkPropTypes' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factory' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factoryWithThrowingShims' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factoryWithTypeCheckers' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/lib/ReactPropTypesSecret' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/prop-types' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/prop-types.min' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'prop-types/checkPropTypes.js' {
+  declare module.exports: $Exports<'prop-types/checkPropTypes'>;
+}
+declare module 'prop-types/factory.js' {
+  declare module.exports: $Exports<'prop-types/factory'>;
+}
+declare module 'prop-types/factoryWithThrowingShims.js' {
+  declare module.exports: $Exports<'prop-types/factoryWithThrowingShims'>;
+}
+declare module 'prop-types/factoryWithTypeCheckers.js' {
+  declare module.exports: $Exports<'prop-types/factoryWithTypeCheckers'>;
+}
+declare module 'prop-types/index' {
+  declare module.exports: $Exports<'prop-types'>;
+}
+declare module 'prop-types/index.js' {
+  declare module.exports: $Exports<'prop-types'>;
+}
+declare module 'prop-types/lib/ReactPropTypesSecret.js' {
+  declare module.exports: $Exports<'prop-types/lib/ReactPropTypesSecret'>;
+}
+declare module 'prop-types/prop-types.js' {
+  declare module.exports: $Exports<'prop-types/prop-types'>;
+}
+declare module 'prop-types/prop-types.min.js' {
+  declare module.exports: $Exports<'prop-types/prop-types.min'>;
+}

flow-typed/npm/theming_vx.x.x.js

@@ -0,0 +1,165 @@
+// flow-typed signature: 0b2dbbd7a0e7a4a61efa8f5cb564e5d5
+// flow-typed version: <<STUB>>/theming_v1.1.0/flow_v0.44.2
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'theming'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'theming' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'theming/dist/cjs/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-listener.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-provider.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-with-theme.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/index.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/test-helpers' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'theming/dist/cjs/channel.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/channel'>;
+}
+declare module 'theming/dist/cjs/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-theme-listener'>;
+}
+declare module 'theming/dist/cjs/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-theme-provider'>;
+}
+declare module 'theming/dist/cjs/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-with-theme'>;
+}
+declare module 'theming/dist/cjs/index.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/index'>;
+}
+declare module 'theming/dist/esm/channel.js' {
+  declare module.exports: $Exports<'theming/dist/esm/channel'>;
+}
+declare module 'theming/dist/esm/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-theme-listener'>;
+}
+declare module 'theming/dist/esm/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-theme-provider'>;
+}
+declare module 'theming/dist/esm/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-with-theme'>;
+}
+declare module 'theming/dist/esm/index.js' {
+  declare module.exports: $Exports<'theming/dist/esm/index'>;
+}
+declare module 'theming/src/channel.js' {
+  declare module.exports: $Exports<'theming/src/channel'>;
+}
+declare module 'theming/src/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-listener'>;
+}
+declare module 'theming/src/create-theme-listener.test.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-listener.test'>;
+}
+declare module 'theming/src/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-provider'>;
+}
+declare module 'theming/src/create-theme-provider.test.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-provider.test'>;
+}
+declare module 'theming/src/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/src/create-with-theme'>;
+}
+declare module 'theming/src/create-with-theme.test.js' {
+  declare module.exports: $Exports<'theming/src/create-with-theme.test'>;
+}
+declare module 'theming/src/index.js' {
+  declare module.exports: $Exports<'theming/src/index'>;
+}
+declare module 'theming/src/index.test.js' {
+  declare module.exports: $Exports<'theming/src/index.test'>;
+}
+declare module 'theming/src/test-helpers.js' {
+  declare module.exports: $Exports<'theming/src/test-helpers'>;
+}

package.json

@@ -38,10 +38,12 @@
   },
   "homepage": "https://github.com/cssinjs/styled-jss#readme",
   "dependencies": {
+    "deep-extend": "^0.5.0",
     "is-observable": "^0.2.0",
     "is-react-prop": "^1.0.0",
     "jss": "^9.5.1",
-    "jss-preset-default": "^4.0.0"
+    "jss-preset-default": "^4.0.0",
+    "theming": "^1.3.0"
   },
   "peerDependencies": {
     "react": ">=14"

src/createStyled.js

@@ -2,6 +2,7 @@ import styled from './styled'
 
 import type {
   BaseStylesType,
+  ComponentStyleType,
   StyledType,
   StyledElementType,
 } from './types'
@@ -21,7 +22,7 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
   }
 
   const styledWrapper = element =>
-    (ownStyle): StyledElementType =>
+    (...ownStyle: ComponentStyleType[]): StyledElementType =>
       styled({element, ownStyle, mountSheet, jss})
 
   Object.defineProperty(styledWrapper, 'sheet', ({

src/errors/index.js

@@ -0,0 +1,10 @@
+export default class StyledJssError extends Error {
+  constructor(message: string) {
+    super(message)
+
+    this.message = message
+    this.name = 'StyledJssError'
+
+    Error.captureStackTrace(this, StyledJssError)
+  }
+}