From f3e37206c31dd8b4ec4ad0d1bab698d61cd1fa01 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 20 Aug 2017 11:48:35 +1000 Subject: [PATCH 1/2] Add preact-emotion --- packages/preact-emotion/macro.js | 1 + packages/preact-emotion/package.json | 44 ++++++++++++++++++++++++ packages/preact-emotion/rollup.config.js | 29 ++++++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 packages/preact-emotion/macro.js create mode 100644 packages/preact-emotion/package.json create mode 100644 packages/preact-emotion/rollup.config.js diff --git a/packages/preact-emotion/macro.js b/packages/preact-emotion/macro.js new file mode 100644 index 000000000..4d14dbadd --- /dev/null +++ b/packages/preact-emotion/macro.js @@ -0,0 +1 @@ +module.exports = require('babel-plugin-emotion/lib/macro-styled') diff --git a/packages/preact-emotion/package.json b/packages/preact-emotion/package.json new file mode 100644 index 000000000..a982eddd5 --- /dev/null +++ b/packages/preact-emotion/package.json @@ -0,0 +1,44 @@ +{ + "name": "preact-emotion", + "version": "7.1.1", + "description": "The Next Generation of CSS-in-JS", + "main": "dist/index.cjs.js", + "module": "dist/index.es.js", + "files": [ + "dist", + "macro.js" + ], + "scripts": { + "build": "npm-run-all clean rollup", + "clean": "rimraf dist", + "rollup": "rollup -c" + }, + "dependencies": { + "babel-plugin-emotion": "^7.1.0", + "emotion": "^7.1.1", + "emotion-utils": "^7.1.0" + }, + "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", + "preact", + "css", + "css-in-js" + ], + "bugs": { + "url": "https://github.com/tkh44/emotion/issues" + } +} diff --git a/packages/preact-emotion/rollup.config.js b/packages/preact-emotion/rollup.config.js new file mode 100644 index 000000000..3ec8ac242 --- /dev/null +++ b/packages/preact-emotion/rollup.config.js @@ -0,0 +1,29 @@ +import babel from 'rollup-plugin-babel' +import alias from 'rollup-plugin-alias' +import pkg from './package.json' + +export default { + entry: '../react-emotion/src/index.js', + external: ['preact', '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 + }), + alias({ + react: 'preact' + }), + ], + targets: [ + { dest: pkg.main, format: 'cjs' }, + { dest: pkg.module, format: 'es' } + ] +} From 752991473e6f0f6899eef867cc8e35e45733531b Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 20 Aug 2017 12:15:07 +1000 Subject: [PATCH 2/2] Update docs, fix linting and add react-emotion to preact-emotion devDependencies --- README.md | 1 + docs/preact.md | 11 +++++++++++ packages/emotion/README.md | 1 + packages/preact-emotion/package.json | 3 ++- packages/preact-emotion/rollup.config.js | 2 +- 5 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 docs/preact.md diff --git a/README.md b/README.md index c6d825bd0..9ea802230 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ minimizes the runtime cost of css-in-js dramatically by parsing your styles with - [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) +- [Usage with Preact](https://github.com/tkh44/emotion/tree/master/docs/preact.md) - Ecosystem - [emotion-vue](https://github.com/egoist/emotion-vue) diff --git a/docs/preact.md b/docs/preact.md new file mode 100644 index 000000000..2d26afc72 --- /dev/null +++ b/docs/preact.md @@ -0,0 +1,11 @@ +## Usage with Preact + +emotion only uses `createElement` from React so we can support Preact with an alias. Import `preact-emotion` instead of `react-emotion` and use it the same way you would with React. + +```jsx +import styled from 'preact-emotion' + +const SomeComponent = styled.div` + display: flex; +` +``` \ No newline at end of file diff --git a/packages/emotion/README.md b/packages/emotion/README.md index c6d825bd0..9ea802230 100644 --- a/packages/emotion/README.md +++ b/packages/emotion/README.md @@ -42,6 +42,7 @@ minimizes the runtime cost of css-in-js dramatically by parsing your styles with - [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) +- [Usage with Preact](https://github.com/tkh44/emotion/tree/master/docs/preact.md) - Ecosystem - [emotion-vue](https://github.com/egoist/emotion-vue) diff --git a/packages/preact-emotion/package.json b/packages/preact-emotion/package.json index a982eddd5..c82accb63 100644 --- a/packages/preact-emotion/package.json +++ b/packages/preact-emotion/package.json @@ -21,7 +21,8 @@ "devDependencies": { "npm-run-all": "^4.0.2", "rimraf": "^2.6.1", - "rollup": "^0.43.0" + "rollup": "^0.43.0", + "react-emotion": "^7.1.1" }, "author": "Kye Hohenberger", "homepage": "https://github.com/tkh44/emotion#readme", diff --git a/packages/preact-emotion/rollup.config.js b/packages/preact-emotion/rollup.config.js index 3ec8ac242..d823cf606 100644 --- a/packages/preact-emotion/rollup.config.js +++ b/packages/preact-emotion/rollup.config.js @@ -20,7 +20,7 @@ export default { }), alias({ react: 'preact' - }), + }) ], targets: [ { dest: pkg.main, format: 'cjs' },