Add preact-emotion (#273)

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)

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;
+`
+```

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)

packages/preact-emotion/macro.js

@@ -0,0 +1 @@
+module.exports = require('babel-plugin-emotion/lib/macro-styled')

packages/preact-emotion/package.json

@@ -0,0 +1,45 @@
+{
+  "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",
+    "react-emotion": "^7.1.1"
+  },
+  "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"
+  }
+}

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' }
+  ]
+}