diff --git a/.babelrc b/.babelrc index 43a1e303c..0a75fe9d0 100644 --- a/.babelrc +++ b/.babelrc @@ -10,5 +10,16 @@ "react", "flow" ], - "plugins": ["babel-plugin-preval"] + "plugins": ["babel-plugin-preval"], + "env": { + "test": { + "presets": [ + "flow", + "env", + "react", + "stage-2" + ], + "plugins": ["./babel-plugin-emotion-test", "preval"] + } + } } diff --git a/.flowconfig b/.flowconfig index ce334480f..4a58bdcde 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,22 +1,5 @@ [ignore] -/node_modules/[^s].* -/node_modules/s[^t].* -/node_modules/st[^y].* -/node_modules/sty[^l].* -/node_modules/styl[^e].* -/node_modules/style[^d].* -/node_modules/styled[^\-].* -/node_modules/styled-[^c].* -/node_modules/styled-c[^o].* -/node_modules/styled-co[^m].* -/node_modules/styled-com[^p].* -/node_modules/styled-comp[^o].* -/node_modules/styled-compo[^n].* -/node_modules/styled-compon[^e].* -/node_modules/styled-compone[^n].* -/node_modules/styled-componen[^t].* -/node_modules/styled-component[^s].* -/node_modules/styled-components.+ + [include] [libs] diff --git a/.gitignore b/.gitignore index ce4890432..4e097fd12 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,10 @@ /coverage /demo/dist -/dist -/lib -/es -/node_modules -/umd -/es -npm-debug.log +dist/ +lib/ +node_modules/ +*.log .idea /example/build -/example/node_modules package-lock.json yarn.lock diff --git a/.travis.yml b/.travis.yml index 920d55784..57df3b86b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,6 +10,9 @@ cache: before_install: - npm install codecov +before_script: + - npm run bootstrap + after_success: - cat ./coverage/lcov.info | ./node_modules/codecov/bin/codecov diff --git a/babel-plugin-emotion-test.js b/babel-plugin-emotion-test.js new file mode 100644 index 000000000..d7d274bd0 --- /dev/null +++ b/babel-plugin-emotion-test.js @@ -0,0 +1,7 @@ +require('babel-register') +const path = require('path') +require('module-alias').addAliases({ + 'emotion-utils': path.resolve(__dirname, './packages/emotion-utils/src') +}) + +module.exports = require('./packages/babel-plugin-emotion/src') diff --git a/babel.js b/babel.js deleted file mode 100644 index a43ad2e21..000000000 --- a/babel.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./lib/babel') diff --git a/docs/babel-macros.md b/docs/babel-macros.md index 836914194..2fc0d9051 100644 --- a/docs/babel-macros.md +++ b/docs/babel-macros.md @@ -3,7 +3,7 @@ Instead of using the emotion's babel plugin, you can use emotion with [`babel-macros`](https://github.com/kentcdodds/babel-macros). Add `babel-macros` to your babel config and import whatever you want from emotion but add `/macro` to the end. The macro is currently the same as inline mode. Currently every API except for the css prop is supported by the macro. ```jsx -import styled from 'emotion/react/macro' +import styled from 'react-emotion/macro' import { css, keyframes, fontFace, injectGlobal, flush, hydrate } from 'emotion/macro' ``` diff --git a/docs/composes.md b/docs/composes.md index 8bcb5ffb8..dfc29e6b9 100644 --- a/docs/composes.md +++ b/docs/composes.md @@ -4,7 +4,7 @@ The composes property is based on [css modules' composes property](https://githu ```jsx import { css } from 'emotion' -import styled from 'emotion/react' +import styled from 'react-emotion' // Define a class const flexCenter = css` diff --git a/docs/extract-static.md b/docs/extract-static.md index 0323b0b5b..350647646 100644 --- a/docs/extract-static.md +++ b/docs/extract-static.md @@ -10,7 +10,7 @@ Configure babel ```json { "plugins": [ - ["emotion/babel", { "extractStatic": true }] + ["emotion", { "extractStatic": true }] ] } ``` @@ -18,7 +18,7 @@ Configure babel This js file, `h1.js` ```jsx harmony -import styled from 'emotion/react' +import styled from 'react-emotion' const H1 = styled('h1')` color: #ffd43b; @@ -38,7 +38,7 @@ During babel compilation emotion will create `h1.emotion.css` and add `import '. ```jsx import './h1.emotion.css' -import styled from 'emotion/react' +import styled from 'react-emotion' const H1 = styled('h1', 'css-duiy4a') ``` diff --git a/docs/install.md b/docs/install.md index 78caa26ba..cd2b63c52 100644 --- a/docs/install.md +++ b/docs/install.md @@ -12,7 +12,7 @@ npm install -S emotion ```json { "plugins": [ - "emotion/babel" + "emotion" ] } ``` diff --git a/docs/keyframes.md b/docs/keyframes.md index 7276a377d..c310462bd 100644 --- a/docs/keyframes.md +++ b/docs/keyframes.md @@ -5,7 +5,7 @@ The `keyframes` function takes in the css keyframes definition and returns the a ```jsx import { keyframes, css } from 'emotion' -import styled from 'emotion/react' +import styled from 'react-emotion' const bounceHeight = 30; diff --git a/docs/ssr.md b/docs/ssr.md index 985936f65..8eb8193dd 100644 --- a/docs/ssr.md +++ b/docs/ssr.md @@ -7,7 +7,7 @@ This returns an object with the properties `html`, `ids` and `css`. It removes u ```jsx import { renderToString } from 'react-dom/server' -import { extractCritical } from 'emotion/server' +import { extractCritical } from 'emotion-server' import App from './App' diff --git a/docs/styled-with-object.md b/docs/styled-with-object.md index d63339889..f1502b92f 100644 --- a/docs/styled-with-object.md +++ b/docs/styled-with-object.md @@ -5,7 +5,7 @@ *The same caveats to using objects with css apply to this.* ```jsx harmony -import styled from 'emotion/react' +import styled from 'react-emotion' const H1 = styled.h1( { diff --git a/docs/styled.md b/docs/styled.md index 51c27847d..788216876 100644 --- a/docs/styled.md +++ b/docs/styled.md @@ -1,7 +1,7 @@ ## Styled ```jsx -import styled from 'emotion/react' +import styled from 'react-emotion' const H1 = styled('h1')` color: blue; @@ -55,7 +55,7 @@ function Greeting ({ name }) { *The same caveats to using objects with css apply to this.* ```jsx -import styled from 'emotion/react' +import styled from 'react-emotion' const H1 = styled.h1({ fontSize: 20 diff --git a/lerna.json b/lerna.json new file mode 100644 index 000000000..a76e7e0e5 --- /dev/null +++ b/lerna.json @@ -0,0 +1,7 @@ +{ + "lerna": "2.0.0", + "packages": [ + "packages/*" + ], + "version": "7.0.13" +} diff --git a/macro.js b/macro.js deleted file mode 100644 index f6c4f6cfa..000000000 --- a/macro.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./lib/macro') diff --git a/package.json b/package.json index 7b2af1fa8..5fa210691 100644 --- a/package.json +++ b/package.json @@ -1,44 +1,23 @@ { - "name": "emotion", + "private": true, "version": "7.0.13", - "description": "high performance css-in-js", - "main": "lib/index.js", - "files": [ - "babel.js", - "src", - "dist", - "lib", - "react", - "server.js", - "macro.js" - ], "scripts": { - "build": "rimraf lib && babel src -d lib", "build:watch": "npm run build -- -w", - "test:size": "npm-run-all clean rollup size", - "clean": "rimraf dist", + "build": "lerna run build --parallel", + "test:size": "npm-run-all clean rollup:umd size", + "clean": "lerna run clean --parallel", "test": "npm-run-all -p lint:check coverage test:size", "coverage": "jest --coverage --no-cache --ci --runInBand", "lint:check": "eslint .", "test:watch": "jest --watch --no-cache", - "rollup": "rollup -c && IMPORT=react rollup -c", + "rollup": "lerna run rollup --parallel", + "rollup:umd": "lerna run rollup:umd --parallel", "size": "bundlesize", - "release": "npm run test && npm run build && npm run rollup && npm version patch && npm publish && git push --tags", - "lint": "eslint . --fix" - }, - "dependencies": { - "@arr/filter.mutate": "^1.0.0", - "@arr/foreach": "^1.0.0", - "@arr/map": "^1.0.0", - "@arr/reduce": "^1.0.0", - "autoprefixer": "^7.1.2", - "babel-plugin-syntax-jsx": "^6.18.0", - "fbjs": "^0.8.12", - "postcss": "^6.0.8", - "postcss-js": "^1.0.0", - "postcss-nested": "^2.1.0", - "touch": "^1.0.0" + "release": "npm run test && npm run build && lerna publish && git push --tags", + "lint": "eslint . --fix", + "bootstrap": "lerna bootstrap" }, + "dependencies": {}, "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.24.1", @@ -67,6 +46,8 @@ "jest": "^20.0.4", "jest-cli": "^20.0.4", "jest-glamor-react": "^3.1.0", + "lerna": "^2.0.0", + "module-alias": "^2.0.1", "npm-run-all": "^4.0.2", "polished": "^1.2.1", "prettier-eslint-cli": "^4.0.3", @@ -76,6 +57,7 @@ "react-test-renderer": "^15.6.1", "rimraf": "^2.6.1", "rollup": "^0.43.0", + "rollup-plugin-alias": "^1.3.1", "rollup-plugin-babel": "^2.7.1", "rollup-plugin-commonjs": "^8.0.2", "rollup-plugin-node-resolve": "^3.0.0", @@ -123,16 +105,29 @@ "react/no-unused-prop-types": 0, "standard/computed-property-even-spacing": 0, "no-template-curly-in-string": 0 - } + }, + "overrides": [ + { + "files": [ + "*.test.js" + ], + "env": { + "jest": true + } + } + ] }, "jest": { "transform": { - "\\.css$": "/test/styleTransform.js", + "\\.css$": "/styleTransform.js", "^.+\\.js?$": "babel-jest" }, "moduleNameMapper": { - "^emotion$": "/src", - "^emotion/react$": "/src/react" + "^emotion$": "/packages/emotion/src", + "^react-emotion$": "/packages/react-emotion/src", + "^emotion-utils$": "/packages/emotion-utils/src", + "^emotion-server$": "/packages/emotion-server/src", + "^babel-plugin-emotion": "/packages/babel-plugin-emotion/src" } }, "bugs": { @@ -140,11 +135,11 @@ }, "bundlesize": [ { - "path": "./dist/DO-NOT-USE.min.js", + "path": "./packages/emotion/dist/DO-NOT-USE.min.js", "threshold": "5 Kb" }, { - "path": "./dist/DO-NOT-USE-react.min.js", + "path": "./packages/emotion-react/dist/DO-NOT-USE.min.js", "threshold": "6 Kb" } ] diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json new file mode 100644 index 000000000..391b618cf --- /dev/null +++ b/packages/babel-plugin-emotion/package.json @@ -0,0 +1,43 @@ +{ + "name": "babel-plugin-emotion", + "version": "7.0.13", + "description": "The Next Generation of CSS-in-JS ", + "main": "lib/index.js", + "files": ["src", "lib"], + "scripts": { + "build": "npm-run-all clean babel", + "babel": "babel src -d lib", + "clean": "rimraf lib" + }, + "dependencies": { + "autoprefixer": "^7.1.2", + "babel-plugin-syntax-jsx": "^6.18.0", + "postcss": "^6.0.9", + "postcss-js": "^1.0.0", + "postcss-nested": "^2.1.1", + "touch": "^1.0.0", + "emotion-utils": "7.0.13" + }, + "devDependencies": { + "babel-cli": "^6.24.1", + "rimraf": "^2.6.1", + "npm-run-all": "^4.0.2" + }, + "author": "Kye Hohenberger", + "homepage": "https://github.com/tkh44/emotion#readme", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/tkh44/emotion.git" + }, + "keywords": [ + "styles", + "emotion", + "react", + "css", + "css-in-js" + ], + "bugs": { + "url": "https://github.com/tkh44/emotion/issues" + } +} diff --git a/src/ast-object.js b/packages/babel-plugin-emotion/src/ast-object.js similarity index 99% rename from src/ast-object.js rename to packages/babel-plugin-emotion/src/ast-object.js index 7cbbc77c1..f366abc34 100644 --- a/src/ast-object.js +++ b/packages/babel-plugin-emotion/src/ast-object.js @@ -1,8 +1,8 @@ import postcssJs from 'postcss-js' import Input from 'postcss/lib/input' import { expandCSSFallbacks, prefixer } from './parser' -import { forEach, reduce } from './utils' -import { getFilename } from './babel' +import { forEach, reduce } from 'emotion-utils' +import { getFilename } from './index' function prefixAst(args, t, path) { function isLiteral(value) { diff --git a/src/babel-utils.js b/packages/babel-plugin-emotion/src/babel-utils.js similarity index 97% rename from src/babel-utils.js rename to packages/babel-plugin-emotion/src/babel-utils.js index 38931888c..85b3e0882 100644 --- a/src/babel-utils.js +++ b/packages/babel-plugin-emotion/src/babel-utils.js @@ -1,4 +1,4 @@ -import { keys, forEach } from './utils' +import { keys, forEach } from 'emotion-utils' export function getIdentifierName(path, t) { const parent = path.findParent(p => p.isVariableDeclarator()) diff --git a/src/css-prop.js b/packages/babel-plugin-emotion/src/css-prop.js similarity index 100% rename from src/css-prop.js rename to packages/babel-plugin-emotion/src/css-prop.js diff --git a/src/babel.js b/packages/babel-plugin-emotion/src/index.js similarity index 99% rename from src/babel.js rename to packages/babel-plugin-emotion/src/index.js index 84be8b5a7..d76a30784 100644 --- a/src/babel.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -11,8 +11,7 @@ import { touchSync } from 'touch' import { inline, getName } from './inline' import { parseCSS } from './parser' import { getIdentifierName } from './babel-utils' -import { map } from './utils' -import { hashArray } from './hash' +import { hashArray, map } from 'emotion-utils' import cssProps from './css-prop' import ASTObject from './ast-object' diff --git a/src/inline.js b/packages/babel-plugin-emotion/src/inline.js similarity index 95% rename from src/inline.js rename to packages/babel-plugin-emotion/src/inline.js index f13e1f7a3..47776d517 100644 --- a/src/inline.js +++ b/packages/babel-plugin-emotion/src/inline.js @@ -1,5 +1,5 @@ // @flow -import { hashArray } from './hash' +import { hashArray } from 'emotion-utils' export function getName(identifierName?: string, prefix: string): string { const parts = [] diff --git a/src/macro-styled.js b/packages/babel-plugin-emotion/src/macro-styled.js similarity index 96% rename from src/macro-styled.js rename to packages/babel-plugin-emotion/src/macro-styled.js index acbac67ed..154bc8f97 100644 --- a/src/macro-styled.js +++ b/packages/babel-plugin-emotion/src/macro-styled.js @@ -1,10 +1,10 @@ import { buildStyledCallExpression, buildStyledObjectCallExpression -} from './babel' +} from './index' import { buildMacroRuntimeNode } from './babel-utils' import emotionMacro from './macro' -import { omit } from './utils' +import { omit } from 'emotion-utils' module.exports = function macro(options) { const { references, state, babel: { types: t } } = options diff --git a/src/macro.js b/packages/babel-plugin-emotion/src/macro.js similarity index 97% rename from src/macro.js rename to packages/babel-plugin-emotion/src/macro.js index c02340ef1..8e05765c0 100644 --- a/src/macro.js +++ b/packages/babel-plugin-emotion/src/macro.js @@ -1,9 +1,9 @@ import { replaceCssWithCallExpression, replaceCssObjectCallExpression -} from './babel' +} from './index' import { buildMacroRuntimeNode, addRuntimeImports } from './babel-utils' -import { forEach, keys } from './utils' +import { forEach, keys } from 'emotion-utils' module.exports = function macro({ references, state, babel: { types: t } }) { if (!state.inline) state.inline = true diff --git a/src/parser.js b/packages/babel-plugin-emotion/src/parser.js similarity index 97% rename from src/parser.js rename to packages/babel-plugin-emotion/src/parser.js index 773340305..25b8ed858 100644 --- a/src/parser.js +++ b/packages/babel-plugin-emotion/src/parser.js @@ -6,7 +6,7 @@ import postcssNested from 'postcss-nested' import postcssJs from 'postcss-js' import objParse from 'postcss-js/parser' import autoprefixer from 'autoprefixer' -import { processStyleName } from './glamor/CSSPropertyOperations' +import { processStyleName } from 'emotion-utils' export const prefixer = postcssJs.sync([autoprefixer, postcssNested]) diff --git a/packages/babel-plugin-emotion/test/.babelrc b/packages/babel-plugin-emotion/test/.babelrc new file mode 100644 index 000000000..25d6ef626 --- /dev/null +++ b/packages/babel-plugin-emotion/test/.babelrc @@ -0,0 +1,13 @@ +{ + "presets": [ + [ + "env", + { + "loose": true + } + ], + "stage-0", + "react", + "flow" + ] +} diff --git a/test/babel/__snapshots__/css-prop.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/css-prop.test.js.snap similarity index 100% rename from test/babel/__snapshots__/css-prop.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/css-prop.test.js.snap diff --git a/test/babel/__snapshots__/css.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/css.test.js.snap similarity index 100% rename from test/babel/__snapshots__/css.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/css.test.js.snap diff --git a/test/babel/__snapshots__/font-face.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/font-face.test.js.snap similarity index 100% rename from test/babel/__snapshots__/font-face.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/font-face.test.js.snap diff --git a/test/babel/__snapshots__/fs.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/fs.test.js.snap similarity index 100% rename from test/babel/__snapshots__/fs.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/fs.test.js.snap diff --git a/test/babel/__snapshots__/inject-global.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/inject-global.test.js.snap similarity index 100% rename from test/babel/__snapshots__/inject-global.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/inject-global.test.js.snap diff --git a/test/babel/__snapshots__/keyframes.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/keyframes.test.js.snap similarity index 100% rename from test/babel/__snapshots__/keyframes.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/keyframes.test.js.snap diff --git a/test/babel/__snapshots__/macro.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap similarity index 78% rename from test/babel/__snapshots__/macro.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap index 56b472951..83a2ca8f4 100644 --- a/test/babel/__snapshots__/macro.test.js.snap +++ b/packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`babel macro css 1`] = ` -"import { css as _css } from '../../src'; +"import { css as _css } from '../src'; /*#__PURE__*/_css([], [widthVar], function createEmotionStyledRules(x0) { return [{ @@ -17,13 +17,13 @@ exports[`babel macro css 1`] = ` `; exports[`babel macro css call with no args 1`] = ` -"import { css as _css } from '../../src'; +"import { css as _css } from '../src'; const cls1 = _css();" `; exports[`babel macro css object 1`] = ` -"import { css as _css } from '../../src'; +"import { css as _css } from '../src'; const cls1 = _css({ 'display': '-webkit-box; display: -ms-flexbox; display: flex' @@ -31,13 +31,13 @@ const cls1 = _css({ `; exports[`babel macro flush 1`] = ` -"import { flush as _flush } from '../../src'; +"import { flush as _flush } from '../src'; const someOtherVar = _flush;" `; exports[`babel macro fontFace 1`] = ` -"import { fontFace as _fontFace } from '../../src'; +"import { fontFace as _fontFace } from '../src'; _fontFace([], [], function createEmotionStyledRules() { return [{ @@ -49,13 +49,13 @@ _fontFace([], [], function createEmotionStyledRules() { `; exports[`babel macro hydrate 1`] = ` -"import { hydrate as _hydrate } from '../../src'; +"import { hydrate as _hydrate } from '../src'; const someOtherVar = _hydrate;" `; exports[`babel macro injectGlobal 1`] = ` -"import { injectGlobal as _injectGlobal } from '../../src'; +"import { injectGlobal as _injectGlobal } from '../src'; _injectGlobal([], [], function createEmotionStyledRules() { return [{ @@ -83,7 +83,7 @@ _injectGlobal([], [], function createEmotionStyledRules() { `; exports[`babel macro keyframes 1`] = ` -"import { keyframes as _keyframes } from '../../src'; +"import { keyframes as _keyframes } from '../src'; const rotate360 = /*#__PURE__*/_keyframes([], [], function createEmotionStyledRules() { return [{ @@ -100,7 +100,7 @@ const rotate360 = /*#__PURE__*/_keyframes([], [], function createEmotionStyledRu `; exports[`babel macro multiple imports 1`] = ` -"import { keyframes as _keyframes, css as _css } from '../../src'; +"import { keyframes as _keyframes, css as _css } from '../src'; const rotate360 = /*#__PURE__*/_keyframes([], [], function createEmotionStyledRules() { return [{ @@ -128,13 +128,13 @@ const thing = /*#__PURE__*/_css([], [widthVar], function createEmotionStyledRule `; exports[`babel macro some import that does not exist 1`] = ` -"import { thisDoesNotExist as _thisDoesNotExist } from '../../src'; +"import { thisDoesNotExist as _thisDoesNotExist } from '../src'; const someOtherVar = _thisDoesNotExist;" `; exports[`babel macro styled css from react 1`] = ` -"import { css as _css } from '../../src/react'; +"import { css as _css } from './styled'; const someCls = /*#__PURE__*/_css([], [], function createEmotionStyledRules() { return [{ @@ -144,31 +144,31 @@ const someCls = /*#__PURE__*/_css([], [], function createEmotionStyledRules() { `; exports[`babel macro styled object function 1`] = ` -"import _styled from '../../src/react'; +"import _styled from './styled'; -const SomeComponent = _styled('div', 'css-SomeComponent-1qt67l90', [{ +const SomeComponent = _styled('div', 'css-SomeComponent-bd6d1z0', [{ 'display': '-webkit-box; display: -ms-flexbox; display: flex' }]);" `; exports[`babel macro styled object member 1`] = ` -"import _styled from '../../src/react'; +"import _styled from './styled'; -const SomeComponent = _styled('div', 'css-SomeComponent-7m1noz0', [{ +const SomeComponent = _styled('div', 'css-SomeComponent-157yx80', [{ 'display': '-webkit-box; display: -ms-flexbox; display: flex' }]);" `; exports[`babel macro styled some import that does not exist 1`] = ` -"import { thisDoesNotExist as _thisDoesNotExist } from '../../src/react'; +"import { thisDoesNotExist as _thisDoesNotExist } from './styled'; const someOtherVar = _thisDoesNotExist;" `; exports[`babel macro styled tagged template literal function 1`] = ` -"import _styled from '../../src/react'; +"import _styled from './styled'; -const SomeComponent = /*#__PURE__*/_styled('div', 'css-SomeComponent-kctxs00', [], [], function createEmotionStyledRules() { +const SomeComponent = /*#__PURE__*/_styled('div', 'css-SomeComponent-1po9r1n0', [], [], function createEmotionStyledRules() { return { 'display': '-webkit-box; display: -ms-flexbox; display: flex' }; @@ -176,9 +176,9 @@ const SomeComponent = /*#__PURE__*/_styled('div', 'css-SomeComponent-kctxs00', [ `; exports[`babel macro styled tagged template literal member 1`] = ` -"import _styled from '../../src/react'; +"import _styled from './styled'; -const SomeComponent = /*#__PURE__*/_styled('div', 'css-SomeComponent-1mkpack0', [], [], function createEmotionStyledRules() { +const SomeComponent = /*#__PURE__*/_styled('div', 'css-SomeComponent-u780mp0', [], [], function createEmotionStyledRules() { return { 'display': '-webkit-box; display: -ms-flexbox; display: flex' }; diff --git a/test/__snapshots__/parser.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/parser.test.js.snap similarity index 100% rename from test/__snapshots__/parser.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/parser.test.js.snap diff --git a/test/babel/__snapshots__/styled.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap similarity index 100% rename from test/babel/__snapshots__/styled.test.js.snap rename to packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap diff --git a/test/browserslist/.browserslistrc b/packages/babel-plugin-emotion/test/browserslist/.browserslistrc similarity index 100% rename from test/browserslist/.browserslistrc rename to packages/babel-plugin-emotion/test/browserslist/.browserslistrc diff --git a/test/browserslist/__snapshots__/babel.test.js.snap b/packages/babel-plugin-emotion/test/browserslist/__snapshots__/index.test.js.snap similarity index 100% rename from test/browserslist/__snapshots__/babel.test.js.snap rename to packages/babel-plugin-emotion/test/browserslist/__snapshots__/index.test.js.snap diff --git a/test/browserslist/babel.test.js b/packages/babel-plugin-emotion/test/browserslist/index.test.js similarity index 94% rename from test/browserslist/babel.test.js rename to packages/babel-plugin-emotion/test/browserslist/index.test.js index 9b7e972cc..39d653584 100644 --- a/test/browserslist/babel.test.js +++ b/packages/babel-plugin-emotion/test/browserslist/index.test.js @@ -1,5 +1,5 @@ import * as babel from 'babel-core' -import plugin from '../../src/babel' +import plugin from 'babel-plugin-emotion' describe('babel css', () => { describe('inline', () => { diff --git a/test/babel/css-prop.test.js b/packages/babel-plugin-emotion/test/css-prop.test.js similarity index 98% rename from test/babel/css-prop.test.js rename to packages/babel-plugin-emotion/test/css-prop.test.js index 5207eb2ff..c40529c1c 100644 --- a/test/babel/css-prop.test.js +++ b/packages/babel-plugin-emotion/test/css-prop.test.js @@ -1,5 +1,5 @@ import * as babel from 'babel-core' -import plugin from '../../src/babel' +import plugin from 'babel-plugin-emotion' import * as fs from 'fs' jest.mock('fs') diff --git a/test/babel/css.test.js b/packages/babel-plugin-emotion/test/css.test.js similarity index 99% rename from test/babel/css.test.js rename to packages/babel-plugin-emotion/test/css.test.js index c31e83e4b..7b02c4746 100644 --- a/test/babel/css.test.js +++ b/packages/babel-plugin-emotion/test/css.test.js @@ -1,5 +1,5 @@ import * as babel from 'babel-core' -import plugin from '../../src/babel' +import plugin from 'babel-plugin-emotion' import * as fs from 'fs' jest.mock('fs') diff --git a/test/babel/font-face.test.js b/packages/babel-plugin-emotion/test/font-face.test.js similarity index 98% rename from test/babel/font-face.test.js rename to packages/babel-plugin-emotion/test/font-face.test.js index ede0c80a0..fb1e378e5 100644 --- a/test/babel/font-face.test.js +++ b/packages/babel-plugin-emotion/test/font-face.test.js @@ -1,5 +1,5 @@ import * as babel from 'babel-core' -import plugin from '../../src/babel' +import plugin from 'babel-plugin-emotion' import * as fs from 'fs' jest.mock('fs') diff --git a/test/babel/fs.test.js b/packages/babel-plugin-emotion/test/fs.test.js similarity index 90% rename from test/babel/fs.test.js rename to packages/babel-plugin-emotion/test/fs.test.js index 5282d4530..7bd66cc92 100644 --- a/test/babel/fs.test.js +++ b/packages/babel-plugin-emotion/test/fs.test.js @@ -1,7 +1,7 @@ import { transform } from 'babel-core' import fs from 'fs' import touch from 'touch' -import emotionPlugin from '../../src/babel' +import plugin from 'babel-plugin-emotion' jest.mock('fs').mock('touch') fs.statSync.mockReturnValue({ isFile: () => false }) @@ -27,7 +27,7 @@ describe('babel plugin fs', () => { test('creates and writes to the css file when it does not exist', () => { fs.existsSync.mockReturnValueOnce(false) const { code } = transform(basic, { - plugins: [[emotionPlugin, { extractStatic: true }]], + plugins: [[plugin, { extractStatic: true }]], filename: __filename, babelrc: false }) @@ -43,7 +43,7 @@ describe('babel plugin fs', () => { fs.existsSync.mockReturnValueOnce(true) fs.readFileSync.mockReturnValueOnce('') const { code } = transform(basic, { - plugins: [[emotionPlugin, { extractStatic: true }]], + plugins: [[plugin, { extractStatic: true }]], filename: __filename, babelrc: false }) @@ -58,7 +58,7 @@ describe('babel plugin fs', () => { fs.existsSync.mockReturnValueOnce(true) fs.readFileSync.mockReturnValueOnce(output) const { code } = transform(basic, { - plugins: [[emotionPlugin, { extractStatic: true }]], + plugins: [[plugin, { extractStatic: true }]], filename: __filename, babelrc: false }) diff --git a/test/babel/inject-global.test.js b/packages/babel-plugin-emotion/test/inject-global.test.js similarity index 98% rename from test/babel/inject-global.test.js rename to packages/babel-plugin-emotion/test/inject-global.test.js index 823dbe98b..ada48c583 100644 --- a/test/babel/inject-global.test.js +++ b/packages/babel-plugin-emotion/test/inject-global.test.js @@ -1,5 +1,5 @@ import * as babel from 'babel-core' -import plugin from '../../src/babel' +import plugin from 'babel-plugin-emotion' import * as fs from 'fs' jest.mock('fs') diff --git a/test/babel/keyframes.test.js b/packages/babel-plugin-emotion/test/keyframes.test.js similarity index 98% rename from test/babel/keyframes.test.js rename to packages/babel-plugin-emotion/test/keyframes.test.js index 5f053b204..5f7593c59 100644 --- a/test/babel/keyframes.test.js +++ b/packages/babel-plugin-emotion/test/keyframes.test.js @@ -1,5 +1,5 @@ import * as babel from 'babel-core' -import plugin from '../../src/babel' +import plugin from 'babel-plugin-emotion' import * as fs from 'fs' jest.mock('fs') diff --git a/test/babel/macro.test.js b/packages/babel-plugin-emotion/test/macro.test.js similarity index 88% rename from test/babel/macro.test.js rename to packages/babel-plugin-emotion/test/macro.test.js index a53b71e18..8c18ff713 100644 --- a/test/babel/macro.test.js +++ b/packages/babel-plugin-emotion/test/macro.test.js @@ -4,7 +4,7 @@ describe('babel macro', () => { describe('styled', () => { test('tagged template literal member', () => { const basic = ` - import styled from '../../src/react/macro' + import styled from './styled/macro' const SomeComponent = styled.div\` display: flex; \` @@ -18,7 +18,7 @@ describe('babel macro', () => { }) test('tagged template literal function', () => { const basic = ` - import styled from '../../src/react/macro' + import styled from './styled/macro' const SomeComponent = styled('div')\` display: flex; \` @@ -32,7 +32,7 @@ describe('babel macro', () => { }) test('object member', () => { const basic = ` - import styled from '../../src/react/macro' + import styled from './styled/macro' const SomeComponent = styled.div({ display: 'flex' }) @@ -46,7 +46,7 @@ describe('babel macro', () => { }) test('object function', () => { const basic = ` - import styled from '../../src/react/macro' + import styled from './styled/macro' const SomeComponent = styled('div')({ display: 'flex' }) @@ -60,7 +60,7 @@ describe('babel macro', () => { }) test('some import that does not exist', () => { const basic = ` - import { thisDoesNotExist } from '../../src/react/macro' + import { thisDoesNotExist } from './styled/macro' const someOtherVar = thisDoesNotExist ` const { code } = babel.transform(basic, { @@ -72,7 +72,7 @@ describe('babel macro', () => { }) test('css from react', () => { const basic = ` - import { css } from '../../src/react/macro' + import { css } from './styled/macro' const someCls = css\` display: flex; \` @@ -86,7 +86,7 @@ describe('babel macro', () => { }) test('throws correct error when imported with commonjs', () => { const basic = ` - const styled = require('../../src/react/macro') + const styled = require('./styled/macro') const SomeComponent = styled('div')\` display: flex; \` @@ -102,7 +102,7 @@ describe('babel macro', () => { }) test('injectGlobal', () => { const basic = ` - import { injectGlobal } from '../../src/macro' + import { injectGlobal } from '../src/macro' injectGlobal\` body { margin: 0; @@ -136,7 +136,7 @@ describe('babel macro', () => { }) test('fontFace', () => { const basic = ` - import { fontFace } from '../../src/macro' + import { fontFace } from '../src/macro' fontFace\` font-family: MyHelvetica; src: local("Helvetica Neue Bold"), @@ -153,7 +153,7 @@ describe('babel macro', () => { }) test('css', () => { const basic = ` - import { css } from '../../src/macro' + import { css } from '../src/macro' css\` margin: 12px 48px; color: #ffffff; @@ -171,7 +171,7 @@ describe('babel macro', () => { }) test('css object', () => { const basic = ` - import { css } from '../../src/macro' + import { css } from '../src/macro' const cls1 = css({ display: 'flex' }) ` const { code } = babel.transform(basic, { @@ -183,7 +183,7 @@ describe('babel macro', () => { }) test('hydrate', () => { const basic = ` - import { hydrate } from '../../src/macro' + import { hydrate } from '../src/macro' const someOtherVar = hydrate ` const { code } = babel.transform(basic, { @@ -195,7 +195,7 @@ describe('babel macro', () => { }) test('flush', () => { const basic = ` - import { flush } from '../../src/macro' + import { flush } from '../src/macro' const someOtherVar = flush ` const { code } = babel.transform(basic, { @@ -207,7 +207,7 @@ describe('babel macro', () => { }) test('css call with no args', () => { const basic = ` - import { css } from '../../src/macro' + import { css } from '../src/macro' const cls1 = css() ` const { code } = babel.transform(basic, { @@ -219,7 +219,7 @@ describe('babel macro', () => { }) test('some import that does not exist', () => { const basic = ` - import { thisDoesNotExist } from '../../src/macro' + import { thisDoesNotExist } from '../src/macro' const someOtherVar = thisDoesNotExist ` const { code } = babel.transform(basic, { @@ -231,7 +231,7 @@ describe('babel macro', () => { }) test('keyframes', () => { const basic = ` - import { keyframes } from '../../src/macro' + import { keyframes } from '../src/macro' const rotate360 = keyframes\` from { transform: rotate(0deg); @@ -249,7 +249,7 @@ describe('babel macro', () => { }) test('multiple imports', () => { const basic = ` - import { keyframes, css } from '../../src/macro' + import { keyframes, css } from '../src/macro' const rotate360 = keyframes\` from { transform: rotate(0deg); diff --git a/packages/babel-plugin-emotion/test/macro/.babelrc b/packages/babel-plugin-emotion/test/macro/.babelrc new file mode 100644 index 000000000..26187304b --- /dev/null +++ b/packages/babel-plugin-emotion/test/macro/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "env", + { + "loose": true + } + ], + "stage-0", + "react", + "flow" + ], + "plugins": ["preval", "./babel-macros-register"] +} diff --git a/test/macro/__snapshots__/css.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap similarity index 100% rename from test/macro/__snapshots__/css.test.js.snap rename to packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap diff --git a/test/__snapshots__/inject-global.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/inject-global.test.js.snap similarity index 100% rename from test/__snapshots__/inject-global.test.js.snap rename to packages/babel-plugin-emotion/test/macro/__snapshots__/inject-global.test.js.snap diff --git a/test/macro/__snapshots__/keyframes.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/keyframes.test.js.snap similarity index 100% rename from test/macro/__snapshots__/keyframes.test.js.snap rename to packages/babel-plugin-emotion/test/macro/__snapshots__/keyframes.test.js.snap diff --git a/test/macro/__snapshots__/react.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap similarity index 100% rename from test/macro/__snapshots__/react.test.js.snap rename to packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap diff --git a/packages/babel-plugin-emotion/test/macro/babel-macros-register.js b/packages/babel-plugin-emotion/test/macro/babel-macros-register.js new file mode 100644 index 000000000..7392bae3f --- /dev/null +++ b/packages/babel-plugin-emotion/test/macro/babel-macros-register.js @@ -0,0 +1,9 @@ +require('babel-register') +const path = require('path') +require('module-alias').addAliases({ + 'emotion-utils': path.join(__dirname, '../../../emotion-utils/src'), + 'react-emotion/macro': path.join(__dirname, '../../src/macro-styled'), + 'emotion/macro': path.join(__dirname, '../../src/macro') +}) + +module.exports = require('babel-macros') diff --git a/test/macro/css.test.js b/packages/babel-plugin-emotion/test/macro/css.test.js similarity index 96% rename from test/macro/css.test.js rename to packages/babel-plugin-emotion/test/macro/css.test.js index bd502fdc9..12903eaf2 100644 --- a/test/macro/css.test.js +++ b/packages/babel-plugin-emotion/test/macro/css.test.js @@ -1,5 +1,4 @@ -import { css } from '../../src/macro' -import { sheet } from '../../src' +import { css, sheet } from 'emotion/macro' import React from 'react' import renderer from 'react-test-renderer' import serializer from 'jest-glamor-react' diff --git a/test/macro/inject-global.test.js b/packages/babel-plugin-emotion/test/macro/inject-global.test.js similarity index 80% rename from test/macro/inject-global.test.js rename to packages/babel-plugin-emotion/test/macro/inject-global.test.js index aacd71c89..c724e2ae9 100644 --- a/test/macro/inject-global.test.js +++ b/packages/babel-plugin-emotion/test/macro/inject-global.test.js @@ -1,5 +1,4 @@ -import { injectGlobal } from '../../src/macro' -import { sheet } from '../../src/index' +import { injectGlobal, sheet } from 'emotion/macro' test('injectGlobal', () => { injectGlobal` diff --git a/test/macro/keyframes.test.js b/packages/babel-plugin-emotion/test/macro/keyframes.test.js similarity index 93% rename from test/macro/keyframes.test.js rename to packages/babel-plugin-emotion/test/macro/keyframes.test.js index 29e01d86c..09ae631f2 100644 --- a/test/macro/keyframes.test.js +++ b/packages/babel-plugin-emotion/test/macro/keyframes.test.js @@ -1,8 +1,8 @@ import React from 'react' import renderer from 'react-test-renderer' import serializer from 'jest-glamor-react' -import { keyframes, sheet } from '../../src/macro' -import styled from '../../src/react/macro' +import { keyframes, sheet } from 'emotion/macro' +import styled from 'react-emotion/macro' expect.addSnapshotSerializer(serializer(sheet)) diff --git a/test/macro/react.test.js b/packages/babel-plugin-emotion/test/macro/react.test.js similarity index 98% rename from test/macro/react.test.js rename to packages/babel-plugin-emotion/test/macro/react.test.js index 0db59c7fa..f4c9f9ef8 100644 --- a/test/macro/react.test.js +++ b/packages/babel-plugin-emotion/test/macro/react.test.js @@ -1,8 +1,8 @@ import React from 'react' import renderer from 'react-test-renderer' import serializer from 'jest-glamor-react' -import { css, sheet } from '../../src/macro' -import styled from '../../src/react/macro' +import { css, sheet } from 'emotion/macro' +import styled from 'react-emotion/macro' import { ThemeProvider, withTheme } from 'theming' import { lighten, hiDPI, modularScale } from 'polished' diff --git a/test/parser.test.js b/packages/babel-plugin-emotion/test/parser.test.js similarity index 100% rename from test/parser.test.js rename to packages/babel-plugin-emotion/test/parser.test.js diff --git a/test/babel/styled.test.js b/packages/babel-plugin-emotion/test/styled.test.js similarity index 99% rename from test/babel/styled.test.js rename to packages/babel-plugin-emotion/test/styled.test.js index 9f5ed2675..cb3e586ce 100644 --- a/test/babel/styled.test.js +++ b/packages/babel-plugin-emotion/test/styled.test.js @@ -1,5 +1,5 @@ import * as babel from 'babel-core' -import plugin from '../../src/babel' +import plugin from 'babel-plugin-emotion' import stage2 from 'babel-plugin-syntax-object-rest-spread' import * as fs from 'fs' jest.mock('fs') diff --git a/packages/babel-plugin-emotion/test/styled/macro.js b/packages/babel-plugin-emotion/test/styled/macro.js new file mode 100644 index 000000000..bd5913712 --- /dev/null +++ b/packages/babel-plugin-emotion/test/styled/macro.js @@ -0,0 +1 @@ +module.exports = require('../../src/macro-styled') diff --git a/packages/emotion-server/package.json b/packages/emotion-server/package.json new file mode 100644 index 000000000..edf2c0af8 --- /dev/null +++ b/packages/emotion-server/package.json @@ -0,0 +1,39 @@ +{ + "name": "emotion-server", + "version": "7.0.13", + "description": "The Next Generation of CSS-in-JS", + "main": "lib/index.js", + "files": ["src", "lib"], + "scripts": { + "build": "npm-run-all clean babel", + "babel": "babel src -d lib", + "clean": "rimraf lib" + }, + "dependencies": { + "emotion-utils": "7.0.13", + "emotion": "7.0.13" + }, + "devDependencies": { + "babel-cli": "^6.24.1", + "rimraf": "^2.6.1", + "npm-run-all": "^4.0.2", + "react-emotion": "7.0.13" + }, + "author": "Kye Hohenberger", + "homepage": "https://emotion.sh", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/tkh44/emotion.git" + }, + "keywords": [ + "styles", + "emotion", + "react", + "css", + "css-in-js" + ], + "bugs": { + "url": "https://github.com/tkh44/emotion/issues" + } +} diff --git a/src/server.js b/packages/emotion-server/src/index.js similarity index 80% rename from src/server.js rename to packages/emotion-server/src/index.js index 33ecdb7f6..5dd6f519f 100644 --- a/src/server.js +++ b/packages/emotion-server/src/index.js @@ -1,15 +1,7 @@ -import { sheet, inserted } from './index' -import { keys, forEach } from './utils' +import { sheet, inserted } from 'emotion' +import { keys, forEach } from 'emotion-utils' -export { - flush, - css, - injectGlobal, - fontFace, - keyframes, - hydrate, - objStyle -} from './index' +export * from 'emotion' export function extractCritical(html) { // parse out ids from html diff --git a/test/__snapshots__/server.test.js.snap b/packages/emotion-server/test/__snapshots__/index.test.js.snap similarity index 94% rename from test/__snapshots__/server.test.js.snap rename to packages/emotion-server/test/__snapshots__/index.test.js.snap index 9d5b9df73..e8b38eb71 100644 --- a/test/__snapshots__/server.test.js.snap +++ b/packages/emotion-server/test/__snapshots__/index.test.js.snap @@ -3,7 +3,7 @@ exports[`extractCritical returns static css 1`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}.css-1j6ha19{-webkit-animation:animation_7jdctn;animation:animation_7jdctn;border-radius:50%;height:50px;width:50px;background-color:red;}", - "html": "
", + "html": "
", "ids": Array [ "1vx6krt", "7jdctn", @@ -40,7 +40,7 @@ Object { exports[`extractCritical returns static css 2`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}", - "html": "
Hello
", + "html": "
Hello
", "ids": Array [ "1vx6krt", "7jdctn", @@ -73,7 +73,7 @@ Object { exports[`hydration only rules that are not in the critical css are inserted 1`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}.css-1j6ha19{-webkit-animation:animation_7jdctn;animation:animation_7jdctn;border-radius:50%;height:50px;width:50px;background-color:red;}", - "html": "
", + "html": "
", "ids": Array [ "1vx6krt", "7jdctn", diff --git a/test/server.test.js b/packages/emotion-server/test/index.test.js similarity index 96% rename from test/server.test.js rename to packages/emotion-server/test/index.test.js index 3eb521413..61beedfc0 100644 --- a/test/server.test.js +++ b/packages/emotion-server/test/index.test.js @@ -3,7 +3,7 @@ */ import React from 'react' import { renderToString } from 'react-dom/server' -import styled from '../src/react' +import styled from 'react-emotion' import { css, injectGlobal, @@ -12,8 +12,8 @@ import { hydrate, fontFace, sheet -} from '../src/index' -import { extractCritical } from '../src/server' +} from 'emotion' +import { extractCritical } from 'emotion-server' const getComponents = () => { const color = 'red' diff --git a/packages/emotion-utils/package.json b/packages/emotion-utils/package.json new file mode 100644 index 000000000..6ee240d98 --- /dev/null +++ b/packages/emotion-utils/package.json @@ -0,0 +1,41 @@ +{ + "name": "emotion-utils", + "version": "7.0.13", + "description": "The Next Generation of CSS-in-JS", + "main": "dist/index.cjs.js", + "module": "dist/index.es.js", + "files": [ + "src", + "dist" + ], + "scripts": { + "build": "npm-run-all clean rollup", + "clean": "rimraf dist", + "rollup": "rollup -c" + }, + "dependencies": { + "fbjs": "^0.8.12" + }, + "author": "Kye Hohenberger", + "homepage": "https://github.com/tkh44/emotion#readme", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/tkh44/emotion.git" + }, + "keywords": [ + "styles", + "emotion", + "react", + "css", + "css-in-js" + ], + "bugs": { + "url": "https://github.com/tkh44/emotion/issues" + }, + "devDependencies": { + "rimraf": "^2.6.1", + "npm-run-all": "^4.0.2", + "rollup": "^0.47.2" + } +} diff --git a/packages/emotion-utils/rollup.config.js b/packages/emotion-utils/rollup.config.js new file mode 100644 index 000000000..f12e73644 --- /dev/null +++ b/packages/emotion-utils/rollup.config.js @@ -0,0 +1,35 @@ +import resolve from 'rollup-plugin-node-resolve' +import commonjs from 'rollup-plugin-commonjs' +import babel from 'rollup-plugin-babel' +import pkg from './package.json' + +export default { + entry: './src/index.js', + exports: 'named', + useStrict: false, + sourceMap: true, + plugins: [ + babel({ + presets: [ + ['env', { loose: true, modules: false }], + 'stage-0', + 'react', + 'flow' + ], + babelrc: false + }), + resolve({ + jsnext: true, + main: true, + browser: true + }), + commonjs({ + ignoreGlobal: true, + include: 'node_modules/**' + }) + ], + targets: [ + { dest: pkg.main, format: 'cjs' }, + { dest: pkg.module, format: 'es' } + ] +} diff --git a/src/glamor/CSSPropertyOperations/CSSProperty.js b/packages/emotion-utils/src/glamor/CSSPropertyOperations/CSSProperty.js similarity index 97% rename from src/glamor/CSSPropertyOperations/CSSProperty.js rename to packages/emotion-utils/src/glamor/CSSPropertyOperations/CSSProperty.js index 534be5643..1784f03df 100644 --- a/src/glamor/CSSPropertyOperations/CSSProperty.js +++ b/packages/emotion-utils/src/glamor/CSSPropertyOperations/CSSProperty.js @@ -13,7 +13,7 @@ * CSS properties which accept numbers but are not in units of "px". */ -import { forEach, keys } from '../../utils' +import { forEach, keys } from '../../' let isUnitlessNumber = { animationIterationCount: 1, diff --git a/src/glamor/CSSPropertyOperations/dangerousStyleValue.js b/packages/emotion-utils/src/glamor/CSSPropertyOperations/dangerousStyleValue.js similarity index 92% rename from src/glamor/CSSPropertyOperations/dangerousStyleValue.js rename to packages/emotion-utils/src/glamor/CSSPropertyOperations/dangerousStyleValue.js index 5416b0452..44a5aea70 100644 --- a/src/glamor/CSSPropertyOperations/dangerousStyleValue.js +++ b/packages/emotion-utils/src/glamor/CSSPropertyOperations/dangerousStyleValue.js @@ -1,3 +1,4 @@ +// @flow /** * Copyright 2013-present, Facebook, Inc. * All rights reserved. @@ -21,7 +22,11 @@ import isUnitlessNumber from './CSSProperty' * @param {ReactDOMComponent} component * @return {string} Normalized style value with dimensions applied. */ -function dangerousStyleValue(name, value) { + +export default function dangerousStyleValue( + name: string, + value: string +): string { let isEmpty = value == null || typeof value === 'boolean' || value === '' if (isEmpty) { return '' @@ -37,5 +42,3 @@ function dangerousStyleValue(name, value) { } return value + 'px' } - -export default dangerousStyleValue diff --git a/src/glamor/CSSPropertyOperations/index.js b/packages/emotion-utils/src/glamor/CSSPropertyOperations/index.js similarity index 91% rename from src/glamor/CSSPropertyOperations/index.js rename to packages/emotion-utils/src/glamor/CSSPropertyOperations/index.js index 100b17fe4..5f79a27e0 100644 --- a/src/glamor/CSSPropertyOperations/index.js +++ b/packages/emotion-utils/src/glamor/CSSPropertyOperations/index.js @@ -1,3 +1,5 @@ +// @flow + /** * Copyright 2013-present, Facebook, Inc. * All rights reserved. @@ -8,13 +10,21 @@ * * @providesModule CSSPropertyOperations */ - import dangerousStyleValue from './dangerousStyleValue' -import memoizeStringOnly from 'fbjs/lib/memoizeStringOnly' + +function memoizeStringOnly(callback: (s: string) => T): (s: string) => T { + const cache = {} + return function(string) { + if (!cache.hasOwnProperty(string)) { + cache[string] = callback.call(this, string) + } + return cache[string] + } +} const hyphenateRegex = /[A-Z]|^ms/g -export const processStyleName = memoizeStringOnly(styleName => +export const processStyleName = memoizeStringOnly((styleName: string): string => styleName.replace(hyphenateRegex, '-$&').toLowerCase() ) @@ -148,7 +158,9 @@ if (process.env.NODE_ENV !== 'production') { * @return {?string} */ -export function createMarkupForStyles(styles) { +export function createMarkupForStyles(styles: { + [string]: any +}): string | null { let serialized = '' for (let styleName in styles) { const isCustomProp = styleName.indexOf('--') === 0 diff --git a/src/glamor/clean.js b/packages/emotion-utils/src/glamor/clean.js similarity index 97% rename from src/glamor/clean.js rename to packages/emotion-utils/src/glamor/clean.js index 0bdaeb566..6174f5d7d 100644 --- a/src/glamor/clean.js +++ b/packages/emotion-utils/src/glamor/clean.js @@ -1,4 +1,4 @@ -import { keys, forEach } from '../utils' +import { keys, forEach } from '../index' // Returns true for null, false, undefined and {} function isFalsy(value) { diff --git a/src/hash.js b/packages/emotion-utils/src/hash.js similarity index 100% rename from src/hash.js rename to packages/emotion-utils/src/hash.js diff --git a/src/utils.js b/packages/emotion-utils/src/index.js similarity index 93% rename from src/utils.js rename to packages/emotion-utils/src/index.js index 811438f86..ea2bbfd9a 100644 --- a/src/utils.js +++ b/packages/emotion-utils/src/index.js @@ -93,3 +93,7 @@ export const assign: any = } return target } + +export * from './hash' +export { default as clean } from './glamor/clean' +export * from './glamor/CSSPropertyOperations' diff --git a/packages/emotion/README.md b/packages/emotion/README.md new file mode 100644 index 000000000..a42ac5641 --- /dev/null +++ b/packages/emotion/README.md @@ -0,0 +1,47 @@ +

+ emotion +

emotion

+

+

The Next Generation of CSS-in-JS

+ +[![npm version](https://badge.fury.io/js/emotion.svg)](https://badge.fury.io/js/emotion) +[![Build Status](https://travis-ci.org/tkh44/emotion.svg?branch=master)](https://travis-ci.org/tkh44/emotion) +[![codecov](https://codecov.io/gh/tkh44/emotion/branch/master/graph/badge.svg)](https://codecov.io/gh/tkh44/emotion) +![core gzip size](http://img.badgesize.io/https://unpkg.com/emotion/dist/DO-NOT-USE.min.js?compression=gzip&label=core%20gzip%20size) +![core size](http://img.badgesize.io/https://unpkg.com/emotion/dist/DO-NOT-USE.min.js?label=core%20size) +![react gzip size](http://img.badgesize.io/https://unpkg.com/emotion/dist/DO-NOT-USE-react.min.js?compression=gzip&label=react%20gzip%20size) +![react size](http://img.badgesize.io/https://unpkg.com/emotion/dist/DO-NOT-USE-react.min.js?label=react%20size) +[![slack](https://emotion.now.sh/badge.svg)](http://slack.emotion.sh/) + +emotion is a high performance, lightweight css-in-js library. +The core idea comes from Sunil Pai’s [glam](https://github.com/threepointone/glam) library and its philosophy is laid out [here](https://gist.github.com/threepointone/0ef30b196682a69327c407124f33d69a). +The basic idea is simple. +You shouldn’t have to sacrifice runtime performance for good developer experience when writing CSS. emotion +minimizes the runtime cost of css-in-js dramatically by parsing your styles with PostCSS during compilation instead of at runtime. + +-- [Introduction Article](https://medium.com/@tkh44/emotion-ad1c45c6d28b) + +- [Install](https://github.com/tkh44/emotion/tree/master/docs/install.md) +- Demos + - [emotion website](https://github.com/tkh44/emotion/tree/master/example) [[Demo Here](https://emotion.sh)] + - [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)] + - **open a PR and add yours!** + +- [Benchmarks](https://github.com/tkh44/emotion/tree/master/docs/benchmarks.md) + +- [Extract Static](https://github.com/tkh44/emotion/tree/master/docs/extract-static.md) + +- API + - [css](https://github.com/tkh44/emotion/tree/master/docs/css.md) + - [styled](https://github.com/tkh44/emotion/tree/master/docs/styled.md) + - [css prop](https://github.com/tkh44/emotion/tree/master/docs/css-prop.md) + - [composes property](https://github.com/tkh44/emotion/tree/master/docs/composes.md) + - [keyframes](https://github.com/tkh44/emotion/tree/master/docs/keyframes.md) + - [fontFace](https://github.com/tkh44/emotion/tree/master/docs/font-face.md) + - [injectGlobal](https://github.com/tkh44/emotion/tree/master/docs/inject-global.md) + +- [Usage with CSS Modules](https://github.com/tkh44/emotion/tree/master/docs/css-modules.md) +- [Usage with babel-macros](https://github.com/tkh44/emotion/tree/master/docs/babel-macros.md) + +- Ecosystem + - [emotion-vue](https://github.com/egoist/emotion-vue) diff --git a/packages/emotion/babel.js b/packages/emotion/babel.js new file mode 100644 index 000000000..12801cca0 --- /dev/null +++ b/packages/emotion/babel.js @@ -0,0 +1 @@ +module.exports = require('babel-plugin-emotion') diff --git a/packages/emotion/macro.js b/packages/emotion/macro.js new file mode 100644 index 000000000..8a0425955 --- /dev/null +++ b/packages/emotion/macro.js @@ -0,0 +1 @@ +module.exports = require('babel-plugin-emotion/lib/macro') diff --git a/packages/emotion/package.json b/packages/emotion/package.json new file mode 100644 index 000000000..5f9535640 --- /dev/null +++ b/packages/emotion/package.json @@ -0,0 +1,50 @@ +{ + "name": "emotion", + "version": "7.0.13", + "description": "The Next Generation of CSS-in-JS", + "main": "dist/index.cjs.js", + "module": "dist/index.es.js", + "files": [ + "src", + "dist", + "macro.js", + "react", + "server.js", + "babel.js" + ], + "scripts": { + "build": "npm-run-all clean rollup rollup:umd", + "clean": "rimraf dist", + "rollup": "rollup -c", + "rollup:umd": "UMD=true rollup -c" + }, + "dependencies": { + "emotion-utils": "7.0.13", + "babel-plugin-emotion": "7.0.13", + "emotion-server": "7.0.13", + "react-emotion": "7.0.13" + }, + "devDependencies": { + "babel-cli": "^6.24.1", + "rimraf": "^2.6.1", + "rollup": "^0.43.0", + "npm-run-all": "^4.0.2" + }, + "author": "Kye Hohenberger", + "homepage": "https://emotion.sh", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/tkh44/emotion.git" + }, + "keywords": [ + "styles", + "emotion", + "react", + "css", + "css-in-js" + ], + "bugs": { + "url": "https://github.com/tkh44/emotion/issues" + } +} diff --git a/packages/emotion/react/index.js b/packages/emotion/react/index.js new file mode 100644 index 000000000..f97685e5e --- /dev/null +++ b/packages/emotion/react/index.js @@ -0,0 +1 @@ +module.exports = require('react-emotion') diff --git a/packages/emotion/react/macro.js b/packages/emotion/react/macro.js new file mode 100644 index 000000000..524b80f97 --- /dev/null +++ b/packages/emotion/react/macro.js @@ -0,0 +1 @@ +module.exports = require('react-emotion/macro') diff --git a/packages/emotion/rollup.config.js b/packages/emotion/rollup.config.js new file mode 100644 index 000000000..543d9ab6a --- /dev/null +++ b/packages/emotion/rollup.config.js @@ -0,0 +1,49 @@ +import resolve from 'rollup-plugin-node-resolve' +import uglify from 'rollup-plugin-uglify' +import replace from 'rollup-plugin-replace' +import babel from 'rollup-plugin-babel' +import alias from 'rollup-plugin-alias' +import path from 'path' +import pkg from './package.json' + +const config = { + entry: './src/index.js', + external: ['emotion-utils'], + exports: 'named', + sourceMap: true, + plugins: [ + babel({ + presets: [ + ['env', { loose: true, modules: false }], + 'stage-0', + 'react', + 'flow' + ], + plugins: ['babel-plugin-preval'], + babelrc: false + }) + ], + targets: [ + { dest: pkg.main, format: 'cjs' }, + { dest: pkg.module, format: 'es' } + ] +} + +if (process.env.UMD) { + config.external = [] + config.plugins.push( + resolve(), + alias({ + 'emotion-utils': path.resolve(__dirname, '../emotion-utils/src/index.js') + }), + replace({ + 'process.env.NODE_ENV': JSON.stringify('production') + }), + uglify() + ) + config.targets = [ + { dest: './dist/DO-NOT-USE.min.js', format: 'umd', moduleName: pkg.name } + ] +} + +export default config diff --git a/packages/emotion/server.js b/packages/emotion/server.js new file mode 100644 index 000000000..7eeb4a4fa --- /dev/null +++ b/packages/emotion/server.js @@ -0,0 +1 @@ +module.exports = require('emotion-server') diff --git a/src/index.js b/packages/emotion/src/index.js similarity index 98% rename from src/index.js rename to packages/emotion/src/index.js index d7e035405..b4f422818 100644 --- a/src/index.js +++ b/packages/emotion/src/index.js @@ -1,9 +1,16 @@ // @flow import { StyleSheet } from './sheet' -import { forEach, map, reduce, keys, assign } from './utils' -import { hashString as hash, hashObject } from './hash' -import { createMarkupForStyles } from './glamor/CSSPropertyOperations' -import clean from './glamor/clean.js' +import { + forEach, + map, + reduce, + keys, + assign, + clean, + createMarkupForStyles, + hashString as hash, + hashObject +} from 'emotion-utils' export const sheet = new StyleSheet() // 🚀 diff --git a/src/sheet.js b/packages/emotion/src/sheet.js similarity index 99% rename from src/sheet.js rename to packages/emotion/src/sheet.js index 21e935145..46fb63a82 100644 --- a/src/sheet.js +++ b/packages/emotion/src/sheet.js @@ -22,7 +22,7 @@ styleSheet.flush() */ -import { forEach } from './utils' +import { forEach } from 'emotion-utils' function last(arr) { return arr[arr.length - 1] diff --git a/test/__snapshots__/css-prop.test.js.snap b/packages/emotion/test/__snapshots__/css-prop.test.js.snap similarity index 100% rename from test/__snapshots__/css-prop.test.js.snap rename to packages/emotion/test/__snapshots__/css-prop.test.js.snap diff --git a/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap similarity index 100% rename from test/__snapshots__/css.test.js.snap rename to packages/emotion/test/__snapshots__/css.test.js.snap diff --git a/test/__snapshots__/font-face.test.js.snap b/packages/emotion/test/__snapshots__/font-face.test.js.snap similarity index 100% rename from test/__snapshots__/font-face.test.js.snap rename to packages/emotion/test/__snapshots__/font-face.test.js.snap diff --git a/test/macro/__snapshots__/inject-global.test.js.snap b/packages/emotion/test/__snapshots__/inject-global.test.js.snap similarity index 100% rename from test/macro/__snapshots__/inject-global.test.js.snap rename to packages/emotion/test/__snapshots__/inject-global.test.js.snap diff --git a/test/__snapshots__/keyframes.test.js.snap b/packages/emotion/test/__snapshots__/keyframes.test.js.snap similarity index 100% rename from test/__snapshots__/keyframes.test.js.snap rename to packages/emotion/test/__snapshots__/keyframes.test.js.snap diff --git a/packages/emotion/test/browserslist/.browserslistrc b/packages/emotion/test/browserslist/.browserslistrc new file mode 100644 index 000000000..c4ac9625a --- /dev/null +++ b/packages/emotion/test/browserslist/.browserslistrc @@ -0,0 +1 @@ +chrome 59 \ No newline at end of file diff --git a/test/browserslist/__snapshots__/css.test.js.snap b/packages/emotion/test/browserslist/__snapshots__/index.test.js.snap similarity index 100% rename from test/browserslist/__snapshots__/css.test.js.snap rename to packages/emotion/test/browserslist/__snapshots__/index.test.js.snap diff --git a/test/browserslist/css.test.js b/packages/emotion/test/browserslist/index.test.js similarity index 90% rename from test/browserslist/css.test.js rename to packages/emotion/test/browserslist/index.test.js index c5b19bbae..bcc004f0a 100644 --- a/test/browserslist/css.test.js +++ b/packages/emotion/test/browserslist/index.test.js @@ -1,8 +1,8 @@ import React from 'react' import renderer from 'react-test-renderer' import serializer from 'jest-glamor-react' -import { css, sheet } from '../../src/index' -import styled from '../../src/react' +import { css, sheet } from 'emotion' +import styled from 'react-emotion' expect.addSnapshotSerializer(serializer(sheet)) diff --git a/test/css-prop.test.js b/packages/emotion/test/css-prop.test.js similarity index 98% rename from test/css-prop.test.js rename to packages/emotion/test/css-prop.test.js index f85ae86cc..c157520e5 100644 --- a/test/css-prop.test.js +++ b/packages/emotion/test/css-prop.test.js @@ -1,7 +1,7 @@ import React from 'react' import renderer from 'react-test-renderer' import serializer from 'jest-glamor-react' -import { css, sheet } from '../src/index' +import { css, sheet } from 'emotion' expect.addSnapshotSerializer(serializer(sheet)) diff --git a/test/css.test.js b/packages/emotion/test/css.test.js similarity index 99% rename from test/css.test.js rename to packages/emotion/test/css.test.js index 0b5e0ae8f..6f960421e 100644 --- a/test/css.test.js +++ b/packages/emotion/test/css.test.js @@ -1,7 +1,7 @@ import React from 'react' import renderer from 'react-test-renderer' import serializer from 'jest-glamor-react' -import { sheet, css, flush } from '../src/index' +import { sheet, css, flush } from 'emotion' expect.addSnapshotSerializer(serializer(sheet)) diff --git a/packages/emotion/test/extract/.babelrc b/packages/emotion/test/extract/.babelrc new file mode 100644 index 000000000..16abe6ee1 --- /dev/null +++ b/packages/emotion/test/extract/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "flow", + "env", + "react" + ], + "plugins": [["../../../../babel-plugin-emotion-test", {"extractStatic": true}], "babel-plugin-preval"] +} diff --git a/test/extract/__snapshots__/extract.test.js.snap b/packages/emotion/test/extract/__snapshots__/extract.test.js.snap similarity index 82% rename from test/extract/__snapshots__/extract.test.js.snap rename to packages/emotion/test/extract/__snapshots__/extract.test.js.snap index b3cce8a21..ba74b1ed9 100644 --- a/test/extract/__snapshots__/extract.test.js.snap +++ b/packages/emotion/test/extract/__snapshots__/extract.test.js.snap @@ -2,7 +2,7 @@ exports[`styled basic render nested 1`] = `

hello world

@@ -10,7 +10,7 @@ exports[`styled basic render nested 1`] = ` exports[`styled name 1`] = `

hello world

@@ -18,7 +18,7 @@ exports[`styled name 1`] = ` exports[`styled no dynamic 1`] = `

hello world

diff --git a/test/extract/extract.test.emotion.css b/packages/emotion/test/extract/extract.test.emotion.css similarity index 100% rename from test/extract/extract.test.emotion.css rename to packages/emotion/test/extract/extract.test.emotion.css diff --git a/test/extract/extract.test.js b/packages/emotion/test/extract/extract.test.js similarity index 94% rename from test/extract/extract.test.js rename to packages/emotion/test/extract/extract.test.js index a31d9c371..193cb2fc7 100644 --- a/test/extract/extract.test.js +++ b/packages/emotion/test/extract/extract.test.js @@ -2,8 +2,8 @@ import React from 'react' import renderer from 'react-test-renderer' import { basename } from 'path' import serializer from 'jest-glamor-react' -import { injectGlobal, css, sheet } from '../../src' -import styled from '../../src/react' +import { injectGlobal, css, sheet } from 'emotion' +import styled from 'react-emotion' expect.addSnapshotSerializer(serializer(sheet)) diff --git a/test/font-face.test.js b/packages/emotion/test/font-face.test.js similarity index 95% rename from test/font-face.test.js rename to packages/emotion/test/font-face.test.js index d0b7456ee..849430f44 100644 --- a/test/font-face.test.js +++ b/packages/emotion/test/font-face.test.js @@ -1,4 +1,4 @@ -import { sheet, fontFace } from '../src/index' +import { sheet, fontFace } from 'emotion' describe('font-face', () => { test('adds font-face to sheet', () => { diff --git a/test/inject-global.test.js b/packages/emotion/test/inject-global.test.js similarity index 87% rename from test/inject-global.test.js rename to packages/emotion/test/inject-global.test.js index 4bf21f46f..8933f9aaf 100644 --- a/test/inject-global.test.js +++ b/packages/emotion/test/inject-global.test.js @@ -1,4 +1,4 @@ -import { injectGlobal, sheet } from '../src/index' +import { injectGlobal, sheet } from 'emotion' test('injectGlobal', () => { injectGlobal` diff --git a/test/keyframes.test.js b/packages/emotion/test/keyframes.test.js similarity index 94% rename from test/keyframes.test.js rename to packages/emotion/test/keyframes.test.js index f464d9151..f4af10b3e 100644 --- a/test/keyframes.test.js +++ b/packages/emotion/test/keyframes.test.js @@ -1,8 +1,8 @@ import React from 'react' import renderer from 'react-test-renderer' import serializer from 'jest-glamor-react' -import { keyframes, sheet } from '../src/index' -import styled from '../src/react' +import { keyframes, sheet } from 'emotion' +import styled from 'react-emotion' expect.addSnapshotSerializer(serializer(sheet)) diff --git a/packages/react-emotion/macro.js b/packages/react-emotion/macro.js new file mode 100644 index 000000000..4d14dbadd --- /dev/null +++ b/packages/react-emotion/macro.js @@ -0,0 +1 @@ +module.exports = require('babel-plugin-emotion/lib/macro-styled') diff --git a/packages/react-emotion/package.json b/packages/react-emotion/package.json new file mode 100644 index 000000000..6e7a79077 --- /dev/null +++ b/packages/react-emotion/package.json @@ -0,0 +1,41 @@ +{ + "name": "react-emotion", + "version": "7.0.13", + "description": "The Next Generation of CSS-in-JS", + "main": "dist/index.cjs.js", + "module": "dist/index.es.js", + "files": ["src", "dist"], + "scripts": { + "build": "npm-run-all clean rollup rollup:umd", + "clean": "rimraf dist", + "rollup": "rollup -c", + "rollup:umd": "UMD=true rollup -c" + }, + "dependencies": { + "emotion-utils": "7.0.13", + "emotion": "7.0.13", + "babel-plugin-emotion": "7.0.13" + }, + "devDependencies": { + "npm-run-all": "^4.0.2", + "rimraf": "^2.6.1", + "rollup": "^0.43.0" + }, + "author": "Kye Hohenberger", + "homepage": "https://github.com/tkh44/emotion#readme", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/tkh44/emotion.git" + }, + "keywords": [ + "styles", + "emotion", + "react", + "css", + "css-in-js" + ], + "bugs": { + "url": "https://github.com/tkh44/emotion/issues" + } +} diff --git a/packages/react-emotion/rollup.config.js b/packages/react-emotion/rollup.config.js new file mode 100644 index 000000000..f812d5441 --- /dev/null +++ b/packages/react-emotion/rollup.config.js @@ -0,0 +1,51 @@ +import resolve from 'rollup-plugin-node-resolve' +import uglify from 'rollup-plugin-uglify' +import replace from 'rollup-plugin-replace' +import babel from 'rollup-plugin-babel' +import alias from 'rollup-plugin-alias' +import path from 'path' +import pkg from './package.json' + +const config = { + entry: './src/index.js', + external: ['react', 'emotion', 'emotion-utils'], + exports: 'named', + sourceMap: true, + plugins: [ + babel({ + presets: [ + ['env', { loose: true, modules: false }], + 'stage-0', + 'react', + 'flow' + ], + plugins: ['babel-plugin-preval'], + babelrc: false + }) + ], + targets: [ + { dest: pkg.main, format: 'cjs' }, + { dest: pkg.module, format: 'es' } + ] +} + +if (process.env.UMD) { + config.external = ['react'] + config.globals = { react: 'React' } + config.plugins.push( + resolve(), + alias({ + emotion: path.resolve(__dirname, '../emotion/src/index.js'), + 'emotion-utils': path.resolve(__dirname, '../emotion-utils/src/index.js') + }), + replace({ + 'process.env.NODE_ENV': JSON.stringify('production') + }), + uglify() + ) + config.targets = [ + { dest: './dist/DO-NOT-USE.min.js', format: 'umd', moduleName: pkg.name } + ] +} + +export default config diff --git a/src/react/index.js b/packages/react-emotion/src/index.js similarity index 91% rename from src/react/index.js rename to packages/react-emotion/src/index.js index 8c36fbf3d..6ab52d84c 100644 --- a/src/react/index.js +++ b/packages/react-emotion/src/index.js @@ -1,17 +1,9 @@ import { createElement as h } from 'react' -import { css } from '../index' -import { map, reduce, assign, omit } from '../utils' +import { css } from 'emotion' +import { map, reduce, assign, omit } from 'emotion-utils' import propsRegexString from /* preval */ './props' -export { - flush, - css, - injectGlobal, - fontFace, - keyframes, - hydrate, - objStyle -} from '../index' +export * from 'emotion' const push = (obj, items) => Array.prototype.push.apply(obj, items) diff --git a/src/react/props.js b/packages/react-emotion/src/props.js similarity index 100% rename from src/react/props.js rename to packages/react-emotion/src/props.js diff --git a/test/__snapshots__/react.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap similarity index 100% rename from test/__snapshots__/react.test.js.snap rename to packages/react-emotion/test/__snapshots__/index.test.js.snap diff --git a/test/react.test.js b/packages/react-emotion/test/index.test.js similarity index 99% rename from test/react.test.js rename to packages/react-emotion/test/index.test.js index beb0aac89..36a4a7b81 100644 --- a/test/react.test.js +++ b/packages/react-emotion/test/index.test.js @@ -1,8 +1,8 @@ import React from 'react' import renderer from 'react-test-renderer' import serializer from 'jest-glamor-react' -import { css, sheet } from '../src/index' -import styled from '../src/react' +import { css, sheet } from 'emotion' +import styled from 'react-emotion' import { ThemeProvider, withTheme } from 'theming' import { mount } from 'enzyme' import enzymeToJson from 'enzyme-to-json' diff --git a/react/index.js b/react/index.js deleted file mode 100644 index 0438f0f92..000000000 --- a/react/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../lib/react') diff --git a/react/macro.js b/react/macro.js deleted file mode 100644 index c0e9257f9..000000000 --- a/react/macro.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../lib/react/macro') diff --git a/react/theming.js b/react/theming.js deleted file mode 100644 index 7df9a51d8..000000000 --- a/react/theming.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../lib/react/theming') diff --git a/rollup.config.js b/rollup.config.js deleted file mode 100644 index ad21c7eed..000000000 --- a/rollup.config.js +++ /dev/null @@ -1,48 +0,0 @@ -import resolve from 'rollup-plugin-node-resolve' -import commonjs from 'rollup-plugin-commonjs' -import babel from 'rollup-plugin-babel' -import uglify from 'rollup-plugin-uglify' -import replace from 'rollup-plugin-replace' -import pkg from './package.json' - -const importPath = - process.env.IMPORT === 'react' ? 'src/react/index.js' : './src/index.js' -const outputPath = - process.env.IMPORT === 'react' - ? './dist/DO-NOT-USE-react.min.js' - : './dist/DO-NOT-USE.min.js' - -export default { - entry: importPath, - external: ['react'], - exports: 'named', - globals: { react: 'React' }, - useStrict: false, - sourceMap: true, - plugins: [ - babel({ - presets: [ - ['env', { loose: true, modules: false }], - 'stage-0', - 'react', - 'flow' - ], - plugins: ['babel-plugin-preval'], - babelrc: false - }), - resolve({ - jsnext: false, - main: true, - browser: true - }), - commonjs({ - ignoreGlobal: true, - include: 'node_modules/**' - }), - replace({ - 'process.env.NODE_ENV': JSON.stringify('production') - }), - uglify() - ], - targets: [{ dest: outputPath, format: 'umd', moduleName: pkg.name }] -} diff --git a/server.js b/server.js deleted file mode 100644 index c3f14437c..000000000 --- a/server.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./lib/server') diff --git a/src/react/macro.js b/src/react/macro.js deleted file mode 100644 index e098e05c0..000000000 --- a/src/react/macro.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../macro-styled') diff --git a/test/styleTransform.js b/styleTransform.js similarity index 100% rename from test/styleTransform.js rename to styleTransform.js diff --git a/test/.babelrc b/test/.babelrc deleted file mode 100644 index 82e2cd733..000000000 --- a/test/.babelrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "presets": [ - "flow", - "env", - "react", - "stage-2" - ], - "plugins": [["./babel-plugin-emotion-test", { "inline": true }], "babel-plugin-preval"] -} diff --git a/test/.eslintrc.js b/test/.eslintrc.js deleted file mode 100644 index 013a195bf..000000000 --- a/test/.eslintrc.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - env: { - jest: true - } -} \ No newline at end of file diff --git a/test/babel-macro-register.js b/test/babel-macro-register.js deleted file mode 100644 index aed4d8e30..000000000 --- a/test/babel-macro-register.js +++ /dev/null @@ -1,3 +0,0 @@ -require('babel-register') - -module.exports = require('babel-macros') diff --git a/test/babel-plugin-emotion-test.js b/test/babel-plugin-emotion-test.js deleted file mode 100644 index 6b570ec71..000000000 --- a/test/babel-plugin-emotion-test.js +++ /dev/null @@ -1,3 +0,0 @@ -require('babel-register') - -module.exports = require('../src/babel') diff --git a/test/extract/.babelrc b/test/extract/.babelrc deleted file mode 100644 index 3c4a8b907..000000000 --- a/test/extract/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "flow", - "env", - "react" - ], - "plugins": [["../babel-plugin-emotion-test", {"extractStatic": true}], "babel-plugin-preval"] -} diff --git a/test/macro/.babelrc b/test/macro/.babelrc deleted file mode 100644 index 56f9f957d..000000000 --- a/test/macro/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "flow", - "env", - "react" - ], - "plugins": ["../babel-macro-register"] -}