ThemeProvider: Add nesting support

.babelrc

@@ -1,6 +1,12 @@
 {
-  "presets": ["env", "react", "flow"],
+  "presets": [
+    "./scripts/babel-preset-env",
+    "react",
+    "flow"
+  ],
   "plugins": [
+    "transform-class-properties",
+    "transform-flow-strip-types",
     "transform-object-rest-spread"
   ]
 }

.npmignore

@@ -4,3 +4,4 @@ stories
 node_modules
 coverage
 src
+__tests__

README.md

@@ -2,7 +2,7 @@
 
 > A simple way to include CSS with React Components.
 
-- **Tiny**, around 3 KB gzipped
+- **Tiny**, around 4 KB gzipped
 - **One dependency** - ([Stylis](https://github.com/thysultan/stylis.js))
 - **Write** plain ol' CSS. Period.
 - **Pre-processing** when you need it. Powered by [Stylis](https://github.com/thysultan/stylis.js).

docs/README.md

@@ -5,6 +5,7 @@
 - [Dynamic styles](./dynamic-styles.md)
 - [Dynamic classNames](./dynamic-classnames.md)
 - [Theming](./theming.md)
+- [Scoping](./scoping.md)
 - [HTML primitives](./primitives.md)
 - [Component styling](./component-styling.md)
 - [Style interpolation](./style-interpolation.md)

docs/scoping.md

@@ -0,0 +1,20 @@
+# Scoping
+
+Fancy comes with a special `ScopeProvider` that allows you to define additional selectors to scope your fancy `styled` component CSS under.
+
+### Example
+
+```jsx
+<ScopeProvider scope="html #App">
+  <StyledCard />
+</ScopeProvider>
+```
+
+If the hashed CSS classes for `StyledCard` was `.Card__213jdhx`, they will now render as `html #App .Card__213jdhx`.
+
+## See also
+
+- [Primitives](./primitives.md)
+- [Component styling](./component-styling.md)
+- [Style interpolation](./style-interpolation.md)
+- [Theming](./theming.md)

docs/theming.md

@@ -1,8 +1,8 @@
 # Theming
 
-Fancy comes with `Theme.Provider`. Added to the top-level of your app, it can modify fancy styled components via a special `props.theme` prop.
+Fancy comes with `ThemeProvider`. Added to the top-level of your app, it can modify fancy styled components via a special `props.theme` prop.
 
-Define your theme props to `Theme.Provider` as `theme`.
+Define your theme props to `ThemeProvider` as `theme`.
 
 ### Example
 
@@ -38,22 +38,9 @@ const App = () => (
 )
 ```
 
-## Scoping
-
-`Theme.Provider` has another special `scope` prop that allows you to define additional selectors to scope your fancy `styled` component CSS under.
-
-### Example
-
-```jsx
-<ThemeProvider scope="html #App">
-  <StyledCard />
-</ThemeProvider>
-```
-
-If the hashed CSS classes for `StyledCard` was `.Card__213jdhx`, they will now render as `html #App .Card__213jdhx`.
-
 ## See also
 
 - [Primitives](./primitives.md)
 - [Component styling](./component-styling.md)
+- [Scoping](./scoping.md)
 - [Style interpolation](./style-interpolation.md)

package.json

@@ -3,12 +3,13 @@
   "private": false,
   "version": "1.0.5",
   "description": "A simple way to include CSS with React Components",
-  "main": "lib/index.js",
+  "main": "dist/index.js",
   "module": "lib/index.js",
   "source": "lib/index.js",
   "scripts": {
-    "babel:main": "babel --presets=react,flow,es2015 --plugins=transform-object-rest-spread --no-babelrc -d lib --ignore '*.test.js' src",
-    "babel": "npm run babel:main",
+    "babel:module": "BABEL_ENV=modules babel -d lib --ignore '*.test.js' src",
+    "babel:main": "babel -d dist --ignore '*.test.js' src",
+    "babel": "npm run babel:main && npm run babel:module",
     "build": "npm run lint && npm run clean && npm run babel",
     "bundle:prebuild": "npm run babel:module",
     "bundle:build": "microbundle build --external all --jsx React.createElement",
@@ -67,6 +68,8 @@
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
     "babel-jest": "22.4.3",
+    "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-flow-strip-types": "6.22.0",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-preset-env": "1.6.1",
     "babel-preset-es2015": "6.24.1",

scripts/babel-preset-env.js

@@ -0,0 +1,18 @@
+const env = require('babel-preset-env')
+
+const ENV = process.env.BABEL_ENV
+
+module.exports = {
+  presets: [
+    [
+      env,
+      {
+        targets: {
+          ie: 11,
+          node: '6.11',
+        },
+        modules: ENV === 'modules' ? false : 'commonjs',
+      },
+    ],
+  ],
+}

src/Fragment/index.js

@@ -0,0 +1,29 @@
+// Source:
+// https://github.com/donavon/render-fragment/blob/master/src/index.jsx
+
+import React from 'react'
+
+const [reactMajorVersion] = React.version.split('.')
+const canReturnArray = parseInt(reactMajorVersion, 10) >= 16
+
+const FragmentPolyfill = ({ children, as: Wrapper, ...others }) =>
+  Wrapper ? (
+    <Wrapper {...others}>{children}</Wrapper>
+  ) : (
+    /* istanbul ignore next */
+    React.Children.toArray(children)
+  )
+
+FragmentPolyfill.defaultProps = {
+  as: canReturnArray
+    ? /* istanbul ignore next */
+      undefined
+    : 'div',
+}
+
+const Fragment = React.Fragment
+  ? /* istanbul ignore next */
+    React.Fragment
+  : FragmentPolyfill
+
+export default Fragment