Migrate to emotion code and use jsx pragma (#18)

This may solve performance issue with cache provider. Emotion core does not require cache provider to be installed.
realadvisor · Jul 4, 2020 · eac556b · eac556b
1 parent 7b033e5
commit eac556b
Show file tree

Hide file tree

Showing 9 changed files with 868 additions and 2,689 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,15 +1,15 @@
 {
   "dist/system.esm.js": {
-    "bundled": 11253,
-    "minified": 6119,
-    "gzipped": 1709,
+    "bundled": 10778,
+    "minified": 5886,
+    "gzipped": 1650,
     "treeshaked": {
       "rollup": {
-        "code": 4633,
-        "import_statements": 286
+        "code": 4474,
+        "import_statements": 265
       },
       "webpack": {
-        "code": 5929
+        "code": 5707
       }
     }
   }

diff --git a/babel.config.js b/babel.config.js
@@ -1,8 +1,3 @@
 module.exports = {
-  presets: ["@babel/flow", "@babel/react", ["@babel/env", { loose: true }]],
-  env: {
-    next: {
-      presets: ["next/babel"]
-    }
-  }
+  presets: ["next/babel", "@babel/flow"]
 };
diff --git a/jsdom.test.js b/jsdom.test.js
@@ -1,11 +1,9 @@
 // @flow
+// @jsx jsx
 
-import * as React from "react";
+import { jsx } from "@emotion/core";
 import * as ReactDOM from "react-dom";
 import TestRenderer from "react-test-renderer";
-import { renderToString } from "react-dom/server";
-import { css } from "emotion";
-import { renderStylesToString } from "emotion-server";
 import { Box, Flex, useSystem, useResponsive } from "./src/system.js";
 
 declare var jest: Function;
@@ -25,18 +23,18 @@ window.matchMedia = jest.fn().mockImplementation(query => {
 test("support width and height", () => {
   expect(TestRenderer.create(<Box width="100px" height="10em" />).toJSON())
     .toMatchInlineSnapshot(`
-.emotion-0 {
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: 0;
-  width: 100px;
-  height: 10em;
-}
-
-<div
-  className="emotion-0"
-/>
-`);
+    .emotion-0 {
+      box-sizing: border-box;
+      min-width: 0;
+      min-height: 0;
+      width: 100px;
+      height: 10em;
+    }
+
+    <div
+      className="emotion-0"
+    />
+  `);
 });
 
 test("support numbers in width and height", () => {
@@ -471,7 +469,7 @@ test("pass is prop to render element other than div", () => {
 `);
 });
 
-test("css prop does not override props", () => {
+test("css prop overrides props", () => {
   expect(
     TestRenderer.create(
       <div>
@@ -488,70 +486,20 @@ test("css prop does not override props", () => {
   box-sizing: border-box;
   min-width: 0;
   min-height: 0;
-  min-width: 100px;
-  width: 200px;
-  height: 300px;
-  width: 50%;
-}
-
-.emotion-1 {
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: 0;
-  min-width: 100px;
-  width: 200px;
-  height: 300px;
   width: 50%;
-}
-
-<div>
-  <div
-    className="emotion-0"
-  />
-  <div
-    className="emotion-1"
-  />
-</div>
-`);
-});
-
-test("className does not override props", () => {
-  expect(
-    TestRenderer.create(
-      <div>
-        <Flex
-          width={1 / 2}
-          className={css({ minWidth: 100, width: 200, height: 300 })}
-        />
-        <Box
-          width={1 / 2}
-          className={css({ minWidth: 100, width: 200, height: 300 })}
-        />
-      </div>
-    ).toJSON()
-  ).toMatchInlineSnapshot(`
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: 0;
   min-width: 100px;
   width: 200px;
   height: 300px;
-  width: 50%;
 }
 
 .emotion-1 {
   box-sizing: border-box;
   min-width: 0;
   min-height: 0;
+  width: 50%;
   min-width: 100px;
   width: 200px;
   height: 300px;
-  width: 50%;
 }
 
 <div>
@@ -606,9 +554,7 @@ test("system media allow to pass responsive styles to css prop and emotion css()
     const { media } = useSystem();
 
     return (
-      <div
-        className={css(media({ display: ["block", "none"], color: "#fff" }))}
-      >
+      <div css={media({ display: ["block", "none"], color: "#fff" })}>
         <Box css={media({ overflow: ["hidden", "auto"], color: "#000" })} />
       </div>
     );
@@ -656,13 +602,11 @@ test("system media allow to pass array of rules", () => {
 
     return (
       <div
-        className={css(
-          media([
-            { display: "block", color: "#fff" },
-            { display: "none", color: "#000" },
-            { display: "flex", color: "#666" }
-          ])
-        )}
+        css={media([
+          { display: "block", color: "#fff" },
+          { display: "none", color: "#000" },
+          { display: "flex", color: "#666" }
+        ])}
       >
         <Box
           css={media([
@@ -749,9 +693,7 @@ test("media util allow to pass responsive styles to css prop and emotion css()",
   const App = () => {
     const { media } = useSystem();
     return (
-      <div
-        className={css(media({ display: ["block", "none"], color: "#fff" }))}
-      >
+      <div css={media({ display: ["block", "none"], color: "#fff" })}>
         <Box css={media({ overflow: ["hidden", "auto"], color: "#000" })} />
       </div>
     );
@@ -846,9 +788,9 @@ test("system paddings allows to use theme for any component", () => {
     const { pt, pr, pb, pl, px, py, p } = useSystem();
     return (
       <div>
-        <div className={css([pt(1), pr(2), pb(3), pl(4)])} />
-        <div className={css([px(1), py(2)])} />
-        <div className={css([p(1)])} />
+        <div css={[pt(1), pr(2), pb(3), pl(4)]} />
+        <div css={[px(1), py(2)]} />
+        <div css={[p(1)]} />
       </div>
     );
   };
@@ -893,9 +835,9 @@ test("system margins allows to use theme for any component", () => {
     const { mt, mr, mb, ml, mx, my, m } = useSystem();
     return (
       <div>
-        <div className={css([mt(1), mr(2), mb(3), ml(4)])} />
-        <div className={css([mx(1), my(2)])} />
-        <div className={css([m(1)])} />
+        <div css={[mt(1), mr(2), mb(3), ml(4)]} />
+        <div css={[mx(1), my(2)]} />
+        <div css={[m(1)]} />
       </div>
     );
   };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-system",
-  "version": "0.15.0",
+  "version": "0.16.0-beta.1",
   "description": "Flex box system for react based on emotion",
   "main": "dist/system.cjs.js",
   "module": "dist/system.esm.js",
@@ -9,7 +9,7 @@
     "src"
   ],
   "scripts": {
-    "next": "NODE_ENV=next next",
+    "next": "BABEL_ENV=next next",
     "types": "echo \"// @flow\n\nexport * from '../src/system.js';\" > dist/system.cjs.js.flow",
     "build": "rm -rf dist && rollup -c && yarn types",
     "test": "jest && yarn flow check",
@@ -24,16 +24,15 @@
   "author": "Bogdan Chadkin <trysound@yandex.ru>",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-flow": "^7.8.3",
-    "@babel/preset-react": "^7.8.3",
-    "emotion-server": "^10.0.27",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-flow": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
     "flow-bin": "^0.118.0",
     "jest": "^25.1.0",
-    "jest-emotion": "^10.0.27",
-    "next": "^9.2.2",
+    "jest-emotion": "^10.0.32",
+    "next": "^9.3.4",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -46,9 +45,9 @@
     "react": "^16.6.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.8.4",
+    "@babel/runtime": "^7.9.2",
+    "@emotion/core": "^10.0.28",
     "csstype": "^2.6.9",
-    "emotion": "^10.0.27",
     "facepaint": "^1.2.1"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
diff --git a/pages/_document.js b/pages/_document.js
diff --git a/rollup.config.js b/rollup.config.js
@@ -9,15 +9,30 @@ export default [
     input: "./src/system.js",
     output: { file: pkg.main, format: "cjs" },
     external,
-    plugins: [babel()]
+    plugins: [
+      babel({
+        configFile: false,
+        presets: [
+          ["@babel/env", { loose: true }],
+          "@babel/react",
+          "@babel/flow"
+        ]
+      })
+    ]
   },
   {
     input: "./src/system.js",
     output: { file: pkg.module, format: "esm" },
     external,
     plugins: [
       babel({
+        configFile: false,
         runtimeHelpers: true,
+        presets: [
+          ["@babel/env", { loose: true }],
+          "@babel/react",
+          "@babel/flow"
+        ],
         plugins: [["@babel/transform-runtime", { useESModules: true }]]
       }),
       sizeSnapshot()