Skip to content

Commit eac556b

Browse files
TrySoundTrySound
authored
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.
1 parent 7b033e5 commit eac556b

9 files changed

Lines changed: 868 additions & 2689 deletions

File tree

‎.size-snapshot.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
{
22
"dist/system.esm.js": {
3-
"bundled": 11253,
4-
"minified": 6119,
5-
"gzipped": 1709,
3+
"bundled": 10778,
4+
"minified": 5886,
5+
"gzipped": 1650,
66
"treeshaked": {
77
"rollup": {
8-
"code": 4633,
9-
"import_statements": 286
8+
"code": 4474,
9+
"import_statements": 265
1010
},
1111
"webpack": {
12-
"code": 5929
12+
"code": 5707
1313
}
1414
}
1515
}

‎babel.config.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
module.exports = {
2-
presets: ["@babel/flow", "@babel/react", ["@babel/env", { loose: true }]],
3-
env: {
4-
next: {
5-
presets: ["next/babel"]
6-
}
7-
}
2+
presets: ["next/babel", "@babel/flow"]
83
};

‎jsdom.test.js‎

Lines changed: 29 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
// @flow
2+
// @jsx jsx
23

3-
import * as React from "react";
4+
import { jsx } from "@emotion/core";
45
import * as ReactDOM from "react-dom";
56
import TestRenderer from "react-test-renderer";
6-
import { renderToString } from "react-dom/server";
7-
import { css } from "emotion";
8-
import { renderStylesToString } from "emotion-server";
97
import { Box, Flex, useSystem, useResponsive } from "./src/system.js";
108

119
declare var jest: Function;
@@ -25,18 +23,18 @@ window.matchMedia = jest.fn().mockImplementation(query => {
2523
test("support width and height", () => {
2624
expect(TestRenderer.create(<Box width="100px" height="10em" />).toJSON())
2725
.toMatchInlineSnapshot(`
28-
.emotion-0 {
29-
box-sizing: border-box;
30-
min-width: 0;
31-
min-height: 0;
32-
width: 100px;
33-
height: 10em;
34-
}
35-
36-
<div
37-
className="emotion-0"
38-
/>
39-
`);
26+
.emotion-0 {
27+
box-sizing: border-box;
28+
min-width: 0;
29+
min-height: 0;
30+
width: 100px;
31+
height: 10em;
32+
}
33+
34+
<div
35+
className="emotion-0"
36+
/>
37+
`);
4038
});
4139

4240
test("support numbers in width and height", () => {
@@ -471,7 +469,7 @@ test("pass is prop to render element other than div", () => {
471469
`);
472470
});
473471

474-
test("css prop does not override props", () => {
472+
test("css prop overrides props", () => {
475473
expect(
476474
TestRenderer.create(
477475
<div>
@@ -488,70 +486,20 @@ test("css prop does not override props", () => {
488486
box-sizing: border-box;
489487
min-width: 0;
490488
min-height: 0;
491-
min-width: 100px;
492-
width: 200px;
493-
height: 300px;
494-
width: 50%;
495-
}
496-
497-
.emotion-1 {
498-
box-sizing: border-box;
499-
min-width: 0;
500-
min-height: 0;
501-
min-width: 100px;
502-
width: 200px;
503-
height: 300px;
504489
width: 50%;
505-
}
506-
507-
<div>
508-
<div
509-
className="emotion-0"
510-
/>
511-
<div
512-
className="emotion-1"
513-
/>
514-
</div>
515-
`);
516-
});
517-
518-
test("className does not override props", () => {
519-
expect(
520-
TestRenderer.create(
521-
<div>
522-
<Flex
523-
width={1 / 2}
524-
className={css({ minWidth: 100, width: 200, height: 300 })}
525-
/>
526-
<Box
527-
width={1 / 2}
528-
className={css({ minWidth: 100, width: 200, height: 300 })}
529-
/>
530-
</div>
531-
).toJSON()
532-
).toMatchInlineSnapshot(`
533-
.emotion-0 {
534-
display: -webkit-box;
535-
display: -webkit-flex;
536-
display: -ms-flexbox;
537-
display: flex;
538-
box-sizing: border-box;
539-
min-width: 0;
540-
min-height: 0;
541490
min-width: 100px;
542491
width: 200px;
543492
height: 300px;
544-
width: 50%;
545493
}
546494
547495
.emotion-1 {
548496
box-sizing: border-box;
549497
min-width: 0;
550498
min-height: 0;
499+
width: 50%;
551500
min-width: 100px;
552501
width: 200px;
553502
height: 300px;
554-
width: 50%;
555503
}
556504
557505
<div>
@@ -606,9 +554,7 @@ test("system media allow to pass responsive styles to css prop and emotion css()
606554
const { media } = useSystem();
607555

608556
return (
609-
<div
610-
className={css(media({ display: ["block", "none"], color: "#fff" }))}
611-
>
557+
<div css={media({ display: ["block", "none"], color: "#fff" })}>
612558
<Box css={media({ overflow: ["hidden", "auto"], color: "#000" })} />
613559
</div>
614560
);
@@ -656,13 +602,11 @@ test("system media allow to pass array of rules", () => {
656602

657603
return (
658604
<div
659-
className={css(
660-
media([
661-
{ display: "block", color: "#fff" },
662-
{ display: "none", color: "#000" },
663-
{ display: "flex", color: "#666" }
664-
])
665-
)}
605+
css={media([
606+
{ display: "block", color: "#fff" },
607+
{ display: "none", color: "#000" },
608+
{ display: "flex", color: "#666" }
609+
])}
666610
>
667611
<Box
668612
css={media([
@@ -749,9 +693,7 @@ test("media util allow to pass responsive styles to css prop and emotion css()",
749693
const App = () => {
750694
const { media } = useSystem();
751695
return (
752-
<div
753-
className={css(media({ display: ["block", "none"], color: "#fff" }))}
754-
>
696+
<div css={media({ display: ["block", "none"], color: "#fff" })}>
755697
<Box css={media({ overflow: ["hidden", "auto"], color: "#000" })} />
756698
</div>
757699
);
@@ -846,9 +788,9 @@ test("system paddings allows to use theme for any component", () => {
846788
const { pt, pr, pb, pl, px, py, p } = useSystem();
847789
return (
848790
<div>
849-
<div className={css([pt(1), pr(2), pb(3), pl(4)])} />
850-
<div className={css([px(1), py(2)])} />
851-
<div className={css([p(1)])} />
791+
<div css={[pt(1), pr(2), pb(3), pl(4)]} />
792+
<div css={[px(1), py(2)]} />
793+
<div css={[p(1)]} />
852794
</div>
853795
);
854796
};
@@ -893,9 +835,9 @@ test("system margins allows to use theme for any component", () => {
893835
const { mt, mr, mb, ml, mx, my, m } = useSystem();
894836
return (
895837
<div>
896-
<div className={css([mt(1), mr(2), mb(3), ml(4)])} />
897-
<div className={css([mx(1), my(2)])} />
898-
<div className={css([m(1)])} />
838+
<div css={[mt(1), mr(2), mb(3), ml(4)]} />
839+
<div css={[mx(1), my(2)]} />
840+
<div css={[m(1)]} />
899841
</div>
900842
);
901843
};

‎package.json‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-system",
3-
"version": "0.15.0",
3+
"version": "0.16.0-beta.1",
44
"description": "Flex box system for react based on emotion",
55
"main": "dist/system.cjs.js",
66
"module": "dist/system.esm.js",
@@ -9,7 +9,7 @@
99
"src"
1010
],
1111
"scripts": {
12-
"next": "NODE_ENV=next next",
12+
"next": "BABEL_ENV=next next",
1313
"types": "echo \"// @flow\n\nexport * from '../src/system.js';\" > dist/system.cjs.js.flow",
1414
"build": "rm -rf dist && rollup -c && yarn types",
1515
"test": "jest && yarn flow check",
@@ -24,16 +24,15 @@
2424
"author": "Bogdan Chadkin <trysound@yandex.ru>",
2525
"license": "MIT",
2626
"devDependencies": {
27-
"@babel/core": "^7.8.4",
28-
"@babel/plugin-transform-runtime": "^7.8.3",
29-
"@babel/preset-env": "^7.8.4",
30-
"@babel/preset-flow": "^7.8.3",
31-
"@babel/preset-react": "^7.8.3",
32-
"emotion-server": "^10.0.27",
27+
"@babel/core": "^7.9.0",
28+
"@babel/plugin-transform-runtime": "^7.9.0",
29+
"@babel/preset-env": "^7.9.5",
30+
"@babel/preset-flow": "^7.9.0",
31+
"@babel/preset-react": "^7.9.4",
3332
"flow-bin": "^0.118.0",
3433
"jest": "^25.1.0",
35-
"jest-emotion": "^10.0.27",
36-
"next": "^9.2.2",
34+
"jest-emotion": "^10.0.32",
35+
"next": "^9.3.4",
3736
"prettier": "^1.19.1",
3837
"react": "^16.12.0",
3938
"react-dom": "^16.12.0",
@@ -46,9 +45,9 @@
4645
"react": "^16.6.0"
4746
},
4847
"dependencies": {
49-
"@babel/runtime": "^7.8.4",
48+
"@babel/runtime": "^7.9.2",
49+
"@emotion/core": "^10.0.28",
5050
"csstype": "^2.6.9",
51-
"emotion": "^10.0.27",
5251
"facepaint": "^1.2.1"
5352
}
5453
}

‎pages/_app.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎pages/_document.js‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎rollup.config.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,30 @@ export default [
99
input: "./src/system.js",
1010
output: { file: pkg.main, format: "cjs" },
1111
external,
12-
plugins: [babel()]
12+
plugins: [
13+
babel({
14+
configFile: false,
15+
presets: [
16+
["@babel/env", { loose: true }],
17+
"@babel/react",
18+
"@babel/flow"
19+
]
20+
})
21+
]
1322
},
1423
{
1524
input: "./src/system.js",
1625
output: { file: pkg.module, format: "esm" },
1726
external,
1827
plugins: [
1928
babel({
29+
configFile: false,
2030
runtimeHelpers: true,
31+
presets: [
32+
["@babel/env", { loose: true }],
33+
"@babel/react",
34+
"@babel/flow"
35+
],
2136
plugins: [["@babel/transform-runtime", { useESModules: true }]]
2237
}),
2338
sizeSnapshot()

0 commit comments

Comments
 (0)