Migrate "theming" library (#292)

* chore: ignore macOS garbage file * feat: add emotion-theming * chore: fix repo path * chore: fix syntax coloring in a few fenced code blocks * chore: remove duplicated devDeps * chore: use the common rollup build Had to add a babel plugin to silence a rollup warning. * refactor: update docs, add integration test, fix withTheme hoisting * test: add jest mapping * chore: remove unnecessary devDeps * Attach theming CHANNEL updates to styled components. * Update tests around theming. * Update rollup config and use omitAssign instead of spread * Remove hoist-non-react-statics since component selectors are gone * prettier * increase bundlesize * format * Use theming from s-c * Update macro react test * Update snapshots * Update theming.md * Add hoist-non-react-statics to external in rollup config * Fix a test * Change ThemeProvider tests * Increase coverage * Add another test * Fix site
emotion-js · Sep 28, 2017 · 361d060 · 361d060
1 parent b44540d
commit 361d060
Show file tree

Hide file tree

Showing 26 changed files with 1,702 additions and 107 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ node_modules/
 packages/site/build
 package-lock.json
 yarn.lock
+.DS_Store
diff --git a/docs/theming.md b/docs/theming.md
@@ -1,25 +1,26 @@
 ## Theming
 
-Themes are provided by the library [theming](https://github.com/iamstarkov/theming).
+Themes are provided by the library [`emotion-theming`](https://github.com/emotion-js/emotion/tree/master/packages/emotion-theming).
 
 
 ```bash
-npm install -S theming
+npm install -S emotion-theming
 ```
 
-Add `ThemeProvider` to the top level of your app and whenever you need the theme prop wrap your component in `withTheme`. The api is laid out in detail [here](https://github.com/iamstarkov/theming/blob/master/README.md#api).
+Add `ThemeProvider` to the top level of your app and access the theme with `props.theme` in a styled component. The api is laid out in detail [in the documentation](https://github.com/emotion-js/emotion/tree/master/packages/emotion-theming/README.md#api).
 
 ```jsx
-import { ThemeProvider, withTheme } from 'theming'
+import styled from 'react-emotion'
+import { ThemeProvider } from 'emotion-theming'
 
-const H1 = withTheme(styled(Heading)`
+const H1 = styled(Heading)`
   color: ${p => p.theme.purple};
-`)
+`
 
 
 const App = () => (
   <ThemeProvider theme={theme}>
-    <H1 scale={2} ref={refFunction}>
+    <H1>
       emotion
     </H1>
   </ThemeProvider>

diff --git a/example/src/main.js b/example/src/main.js
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "babel-jest": "^20.0.3",
     "babel-macros": "^1.0.2",
     "babel-plugin-codegen": "^1.2.0",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-env": "^1.5.1",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.24.1",
@@ -48,6 +49,7 @@
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "^7.3.0",
     "eslint-plugin-standard": "^3.0.1",
+    "hoist-non-react-statics": "^2.3.1",
     "jest": "^20.0.4",
     "jest-cli": "^20.0.4",
     "jest-glamor-react": "^3.1.0",
@@ -69,8 +71,7 @@
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^1.1.1",
     "rollup-plugin-uglify": "^2.0.1",
-    "rollup-watch": "^4.3.1",
-    "theming": "^1.1.0"
+    "rollup-watch": "^4.3.1"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://github.com/tkh44/emotion#readme",
@@ -134,6 +135,7 @@
       "^react-emotion$": "<rootDir>/packages/react-emotion/src",
       "^emotion-utils$": "<rootDir>/packages/emotion-utils/src",
       "^emotion-server$": "<rootDir>/packages/emotion-server/src",
+      "^emotion-theming$": "<rootDir>/packages/emotion-theming/src",
       "^babel-plugin-emotion": "<rootDir>/packages/babel-plugin-emotion/src"
     },
     "setupTestFrameworkScriptFile": "<rootDir>/test/testSetup.js",
@@ -151,7 +153,7 @@
     },
     {
       "path": "./packages/react-emotion/dist/DO-NOT-USE.min.js",
-      "threshold": "7 Kb"
+      "threshold": "8 Kb"
     }
   ]
 }
diff --git a/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap
@@ -69,21 +69,13 @@ exports[`styled change theme 1`] = `
       }
     }
   >
-    <WithTheme(Styled)>
-      <Styled
-        theme={
-          Object {
-            "primary": "green",
-          }
-        }
+    <Styled>
+      <div
+        className="glamor-0"
       >
-        <div
-          className="glamor-0"
-        >
-          this will be green then pink
-        </div>
-      </Styled>
-    </WithTheme(Styled)>
+        this will be green then pink
+      </div>
+    </Styled>
   </ThemeProvider>
 </TestComponent>
 `;
@@ -108,21 +100,13 @@ exports[`styled change theme 2`] = `
       }
     }
   >
-    <WithTheme(Styled)>
-      <Styled
-        theme={
-          Object {
-            "primary": "pink",
-          }
-        }
+    <Styled>
+      <div
+        className="glamor-0"
       >
-        <div
-          className="glamor-0"
-        >
-          this will be green then pink
-        </div>
-      </Styled>
-    </WithTheme(Styled)>
+        this will be green then pink
+      </div>
+    </Styled>
   </ThemeProvider>
 </TestComponent>
 `;
@@ -255,6 +239,25 @@ exports[`styled function in expression 1`] = `
 </h1>
 `;
 
+exports[`styled glamorous style api & composition 1`] = `
+.glamor-0 {
+  font-size: 20px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+<h1
+  className="glamor-0"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled handles more than 10 dynamic properties 1`] = `
 .glamor-0 {
   text-decoration: underline;
@@ -293,6 +296,18 @@ exports[`styled higher order component 1`] = `
 />
 `;
 
+exports[`styled inline function return value is a function 1`] = `
+.glamor-0 {
+  font-size: 20px;
+}
+
+<h1
+  className="glamor-0"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled innerRef 1`] = `
 .glamor-0 {
   font-size: 12px;
@@ -416,6 +431,31 @@ exports[`styled no prop filtering on non string tags 1`] = `
 </a>
 `;
 
+exports[`styled null interpolation value 1`] = `
+.glamor-0 {
+  color: blue;
+  font-size: 20;
+}
+
+@media (min-width:520px) {
+  .glamor-0 {
+    color: green;
+  }
+}
+
+@media (min-width:420px) {
+  .glamor-0 {
+    color: blue;
+  }
+}
+
+<h1
+  className="glamor-0"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled object as style 1`] = `
 .glamor-0 {
   font-size: 20px;
@@ -596,7 +636,147 @@ exports[`styled themes 1`] = `
 </span>
 `;
 
+exports[`styled theming 1`] = `
+<TestComponent
+  renderChild={true}
+  theme={
+    Object {
+      "primary": "green",
+    }
+  }
+>
+  <ThemeProvider
+    theme={
+      Object {
+        "primary": "green",
+      }
+    }
+  >
+    <Styled>
+      <div
+        className="css-olgnlr"
+      >
+        this will be green then pink
+      </div>
+    </Styled>
+  </ThemeProvider>
+</TestComponent>
+`;
+
+exports[`styled theming 2`] = `
+<TestComponent
+  renderChild={true}
+  theme={
+    Object {
+      "primary": "pink",
+    }
+  }
+>
+  <ThemeProvider
+    theme={
+      Object {
+        "primary": "pink",
+      }
+    }
+  >
+    <Styled>
+      <div
+        className="css-olgnlr"
+      >
+        this will be green then pink
+      </div>
+    </Styled>
+  </ThemeProvider>
+</TestComponent>
+`;
+
+exports[`styled theming 3`] = `
+<TestComponent
+  renderChild={false}
+  theme={
+    Object {
+      "primary": "pink",
+    }
+  }
+>
+  <ThemeProvider
+    theme={
+      Object {
+        "primary": "pink",
+      }
+    }
+  />
+</TestComponent>
+`;
+
 exports[`styled throws if undefined is passed as the component 1`] = `
 "You are trying to create a styled element with an undefined component.
 You may have forgotten to import it."
 `;
+
+exports[`styled with higher order component that hoists statics 1`] = `
+.glamor-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  color: hotpink;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
+exports[`styled withComponent will replace tags but keep styling classes 1`] = `
+.glamor-0 {
+  color: green;
+}
+
+<article>
+  <Styled>
+    <h1
+      className="glamor-0"
+    >
+      My Title
+    </h1>
+  </Styled>
+  <Styled>
+    <h2
+      className="glamor-0"
+    >
+      My Subtitle
+    </h2>
+  </Styled>
+</article>
+`;
+
+exports[`styled withComponent with function interpolation 1`] = `
+.glamor-0 {
+  color: green;
+}
+
+.glamor-1 {
+  color: hotpink;
+}
+
+<article>
+  <Styled>
+    <h1
+      className="glamor-0"
+    >
+      My Title
+    </h1>
+  </Styled>
+  <Styled
+    color="hotpink"
+  >
+    <h2
+      className="glamor-1"
+      color="hotpink"
+    >
+      My Subtitle
+    </h2>
+  </Styled>
+</article>
+`;