From 9a42bc91ce3cab124599858238a9dc3d141f4854 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Wed, 28 Nov 2018 21:16:31 +1000 Subject: [PATCH 01/13] Add babel preset for css prop --- packages/babel-preset-jsx/package.json | 20 ++++++++++++++++++++ packages/babel-preset-jsx/src/index.js | 20 ++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 packages/babel-preset-jsx/package.json create mode 100644 packages/babel-preset-jsx/src/index.js diff --git a/packages/babel-preset-jsx/package.json b/packages/babel-preset-jsx/package.json new file mode 100644 index 000000000..6c56679fd --- /dev/null +++ b/packages/babel-preset-jsx/package.json @@ -0,0 +1,20 @@ +{ + "name": "@emotion/babel-preset-jsx", + "version": "10.0.0", + "description": "A babel preset to automatically import emotion's jsx pragma", + "main": "dist/babel-preset-jsx.cjs.js", + "module": "dist/babel-preset-jsx.esm.js", + "license": "MIT", + "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-jsx", + "dependencies": { + "@babel/plugin-transform-react-jsx": "^7.1.6", + "babel-plugin-jsx-pragmatic": "^1.0.2" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "src", + "dist" + ] +} diff --git a/packages/babel-preset-jsx/src/index.js b/packages/babel-preset-jsx/src/index.js new file mode 100644 index 000000000..6e6753d97 --- /dev/null +++ b/packages/babel-preset-jsx/src/index.js @@ -0,0 +1,20 @@ +import jsx from '@babel/plugin-transform-react-jsx' +import pragmatic from 'babel-plugin-jsx-pragmatic' + +let pragmaName = '___EmotionJSX' + +export default ({ pragma, ...options }) => { + return { + plugins: [ + [ + pragmatic, + { + export: 'jsx', + module: '@emotion/core', + import: pragmaName + } + ], + [jsx, { pragma: pragmaName, ...options }] + ] + } +} From f0086ed180be89b9122ef1f79c21e8b66e14899b Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Tue, 4 Dec 2018 17:59:53 +1000 Subject: [PATCH 02/13] Add babel-plugin-emotion to preset and rename to @emotion/babel-preset-css-prop --- packages/babel-preset-css-prop/package.json | 21 +++++++++++ packages/babel-preset-css-prop/src/index.js | 42 +++++++++++++++++++++ packages/babel-preset-jsx/package.json | 20 ---------- packages/babel-preset-jsx/src/index.js | 20 ---------- 4 files changed, 63 insertions(+), 40 deletions(-) create mode 100644 packages/babel-preset-css-prop/package.json create mode 100644 packages/babel-preset-css-prop/src/index.js delete mode 100644 packages/babel-preset-jsx/package.json delete mode 100644 packages/babel-preset-jsx/src/index.js diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json new file mode 100644 index 000000000..bdbc1de33 --- /dev/null +++ b/packages/babel-preset-css-prop/package.json @@ -0,0 +1,21 @@ +{ + "name": "@emotion/babel-preset-css-prop", + "version": "10.0.2", + "description": "A babel preset to automatically enable emotion's css prop", + "main": "dist/babel-preset-css-prop.cjs.js", + "module": "dist/babel-preset-css-prop.esm.js", + "license": "MIT", + "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop", + "dependencies": { + "@babel/plugin-transform-react-jsx": "^7.1.6", + "babel-plugin-jsx-pragmatic": "^1.0.2", + "babel-plugin-emotion": "^10.0.2" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "src", + "dist" + ] +} diff --git a/packages/babel-preset-css-prop/src/index.js b/packages/babel-preset-css-prop/src/index.js new file mode 100644 index 000000000..97365a6c2 --- /dev/null +++ b/packages/babel-preset-css-prop/src/index.js @@ -0,0 +1,42 @@ +import jsx from '@babel/plugin-transform-react-jsx' +import pragmatic from 'babel-plugin-jsx-pragmatic' +import emotion from 'babel-plugin-emotion' + +let pragmaName = '___EmotionJSX' + +// pull out the emotion options and pass everything else to the jsx transformer +// this means if @babel/plugin-transform-react-jsx adds more options, it'll just work +// and if babel-plugin-emotion adds more options we can add them since this lives in +// the same repo as babel-plugin-emotion +export default ({ + pragma, + sourceMap, + autoLabel, + labelFormat, + instances, + ...options +}) => { + return { + plugins: [ + [ + pragmatic, + { + export: 'jsx', + module: '@emotion/core', + import: pragmaName + } + ], + [jsx, { pragma: pragmaName, ...options }], + [ + emotion, + { + sourceMap, + autoLabel, + labelFormat, + instances, + cssPropOptimization: true + } + ] + ] + } +} diff --git a/packages/babel-preset-jsx/package.json b/packages/babel-preset-jsx/package.json deleted file mode 100644 index 6c56679fd..000000000 --- a/packages/babel-preset-jsx/package.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "@emotion/babel-preset-jsx", - "version": "10.0.0", - "description": "A babel preset to automatically import emotion's jsx pragma", - "main": "dist/babel-preset-jsx.cjs.js", - "module": "dist/babel-preset-jsx.esm.js", - "license": "MIT", - "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-jsx", - "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.1.6", - "babel-plugin-jsx-pragmatic": "^1.0.2" - }, - "publishConfig": { - "access": "public" - }, - "files": [ - "src", - "dist" - ] -} diff --git a/packages/babel-preset-jsx/src/index.js b/packages/babel-preset-jsx/src/index.js deleted file mode 100644 index 6e6753d97..000000000 --- a/packages/babel-preset-jsx/src/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import jsx from '@babel/plugin-transform-react-jsx' -import pragmatic from 'babel-plugin-jsx-pragmatic' - -let pragmaName = '___EmotionJSX' - -export default ({ pragma, ...options }) => { - return { - plugins: [ - [ - pragmatic, - { - export: 'jsx', - module: '@emotion/core', - import: pragmaName - } - ], - [jsx, { pragma: pragmaName, ...options }] - ] - } -} From 3c6a8335d824aceea8e700eb13a3a718f0a70ad9 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Tue, 4 Dec 2018 18:08:12 +1000 Subject: [PATCH 03/13] Use preset in site --- packages/babel-preset-css-prop/package.json | 3 +- .../gatsby-node.js | 26 ++------------- yarn.lock | 32 +++++++++++++++++++ 3 files changed, 36 insertions(+), 25 deletions(-) diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json index bdbc1de33..2c8ccab89 100644 --- a/packages/babel-preset-css-prop/package.json +++ b/packages/babel-preset-css-prop/package.json @@ -8,8 +8,9 @@ "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop", "dependencies": { "@babel/plugin-transform-react-jsx": "^7.1.6", + "babel-plugin-emotion": "^10.0.2", "babel-plugin-jsx-pragmatic": "^1.0.2", - "babel-plugin-emotion": "^10.0.2" + "object-assign": "^4.1.1" }, "publishConfig": { "access": "public" diff --git a/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-node.js b/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-node.js index aec4c6f75..7f242a0d3 100644 --- a/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-node.js +++ b/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-node.js @@ -1,28 +1,6 @@ exports.onCreateBabelConfig = ({ actions, stage }) => { actions.setBabelPreset({ - name: `@babel/preset-react`, - stage, - options: { - useBuiltIns: true, - pragma: `___EmotionJSX`, - development: stage === `develop` - } - }) - actions.setBabelPlugin({ - name: 'babel-plugin-jsx-pragmatic', - stage, - options: { - export: 'jsx', - module: '@emotion/core', - import: '___EmotionJSX' - } - }) - actions.setBabelPlugin({ - name: 'babel-plugin-emotion', - stage, - options: { - cssPropOptimization: true, - sourceMap: stage === 'develop' - } + name: `@emotion/babel-preset-css-prop`, + stage }) } diff --git a/yarn.lock b/yarn.lock index 8da9b1e6e..6d99a0e2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -599,6 +599,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-jsx@^7.2.0": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz#0b85a3b4bc7cdf4cc4b8bf236335b907ca22e7c7" + integrity sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-nullish-coalescing-operator@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.0.0.tgz#b60931d5a15da82625fff6657c39419969598743" @@ -946,6 +953,15 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-jsx" "^7.0.0" +"@babel/plugin-transform-react-jsx@^7.1.6": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.2.0.tgz#ca36b6561c4d3b45524f8efb6f0fbc9a0d1d622f" + integrity sha512-h/fZRel5wAfCqcKgq3OhbmYaReo7KkoJBpt8XnvpS7wqaNMqtw5xhxutzcm35iMUWucfAdT/nvGTsWln0JTg2Q== + dependencies: + "@babel/helper-builder-react-jsx" "^7.0.0" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-jsx" "^7.2.0" + "@babel/plugin-transform-regenerator@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.0.0.tgz#5b41686b4ed40bef874d7ed6a84bdd849c13e0c1" @@ -3484,6 +3500,22 @@ babel-plugin-dynamic-import-node@^1.2.0: dependencies: babel-plugin-syntax-dynamic-import "^6.18.0" +babel-plugin-emotion@^10.0.2: + version "10.0.2" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.2.tgz#c98e43f9a765931d66ac8ad0849804b6b7e1bd22" + integrity sha512-ltH4s23Q/TqjzfSVzv7qiHu14+IFAhOVwarRza4+5LWlbFTISAAveVbC0aC0rh4Y450jotcyqX+GKdjj+9tnEg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@emotion/hash" "0.7.1" + "@emotion/memoize" "0.7.1" + "@emotion/serialize" "0.11.0" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + escape-string-regexp "^1.0.5" + find-root "^1.1.0" + source-map "^0.5.7" + babel-plugin-external-helpers@^6.22.0: version "6.22.0" resolved "https://registry.yarnpkg.com/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz#2285f48b02bd5dede85175caf8c62e86adccefa1" From fd9bda1bcad70dcde693b7eaa5f9694c24980a2e Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Tue, 4 Dec 2018 18:15:49 +1000 Subject: [PATCH 04/13] Maybe fix ci --- .circleci/config.yml | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 417b6b48f..553cc77fb 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -8,9 +8,9 @@ jobs: - checkout - restore_cache: keys: - - v2-dependencies-{{ checksum "yarn.lock" }} + - v3-dependencies-{{ checksum "yarn.lock" }} # fallback to using the latest cache if no exact match is found - - v2-dependencies- + - v3-dependencies- - run: yarn install --pure-lockfile - run: yarn flow start --file-watcher=none - run: yarn flow:check @@ -22,7 +22,7 @@ jobs: paths: - ~/.cache/yarn - node_modules - key: v2-dependencies-{{ checksum "yarn.lock" }} + key: v3-dependencies-{{ checksum "yarn.lock" }} test: docker: @@ -32,9 +32,9 @@ jobs: - checkout - restore_cache: keys: - - v2-dependencies-{{ checksum "yarn.lock" }} + - v3-dependencies-{{ checksum "yarn.lock" }} # fallback to using the latest cache if no exact match is found - - v2-dependencies- + - v3-dependencies- - run: yarn install --pure-lockfile - run: name: Jest Tests @@ -55,9 +55,9 @@ jobs: - checkout - restore_cache: keys: - - v2-dependencies-{{ checksum "yarn.lock" }} + - v3-dependencies-{{ checksum "yarn.lock" }} # fallback to using the latest cache if no exact match is found - - v2-dependencies- + - v3-dependencies- - run: yarn install --pure-lockfile - run: name: Jest Tests @@ -73,9 +73,9 @@ jobs: - checkout - restore_cache: keys: - - v2-dependencies-{{ checksum "yarn.lock" }} + - v3-dependencies-{{ checksum "yarn.lock" }} # fallback to using the latest cache if no exact match is found - - v2-dependencies- + - v3-dependencies- - run: yarn install --pure-lockfile - run: yarn lint:check - run: yarn test:typescript From 362edcfff827b1a182bbc3fea356a731985cd9b9 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Tue, 4 Dec 2018 18:31:23 +1000 Subject: [PATCH 05/13] Add README.md and a test --- packages/babel-preset-css-prop/README.md | 37 +++++++++++++++++ .../__tests__/__fixtures__/index.js | 12 ++++++ .../__tests__/__snapshots__/index.js.snap | 41 +++++++++++++++++++ .../babel-preset-css-prop/__tests__/index.js | 6 +++ 4 files changed, 96 insertions(+) create mode 100644 packages/babel-preset-css-prop/README.md create mode 100644 packages/babel-preset-css-prop/__tests__/__fixtures__/index.js create mode 100644 packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap create mode 100644 packages/babel-preset-css-prop/__tests__/index.js diff --git a/packages/babel-preset-css-prop/README.md b/packages/babel-preset-css-prop/README.md new file mode 100644 index 000000000..b80b0e11a --- /dev/null +++ b/packages/babel-preset-css-prop/README.md @@ -0,0 +1,37 @@ +# @emotion/babel-preset-css-prop + +> A babel preset to automatically enable emotion's css prop + +## Install + +```bash +yarn add @emotion/babel-preset-css-prop +``` + +## Usage + +**.babelrc** + +```json +{ + "plugins": ["emotion"] +} +``` + +### Via CLI + +```bash +babel --presets @emotion/babel-preset-css-prop script.js +``` + +### Via Node API + +```javascript +require('@babel/core').transform(code, { + plugins: ['@emotion/babel-preset-css-prop'] +}) +``` + +## Options + +All options that `babel-plugin-emotion` and `@babel/plugin-transform-react-jsx` accept are accepted by `@emotion/babel-preset-css-prop` and they will be forwarded to their respective plugin. diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/index.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/index.js new file mode 100644 index 000000000..94a551ae4 --- /dev/null +++ b/packages/babel-preset-css-prop/__tests__/__fixtures__/index.js @@ -0,0 +1,12 @@ +import * as React from 'react' + +export let Button = props => { + return ( +