Skip to content

Commit

Permalink
Merge pull request #2 from tkh44/react-version
Browse files Browse the repository at this point in the history
initial work for adding styled components type api
  • Loading branch information
Kye Hohenberger committed Jun 2, 2017
2 parents 75f4414 + 1ab183b commit 32225f3
Show file tree
Hide file tree
Showing 23 changed files with 364 additions and 641 deletions.
105 changes: 43 additions & 62 deletions README.md
@@ -1,30 +1,21 @@
# emotion

#### `css` prop for all
## 👩‍🎤 Glam + React

[![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)


- [Install](#install)
- [glam](#emotionglam)
- [glamor](#emotionglamor)
- [cxs](#emotioncxs)
- [Example Project](https://github.com/tkh44/emotion/tree/master/examples/glam)

## Install

```bash
npm install -S emotion
npm install -S emotion glam
```

## `emotion/glam`

[Example Project](https://github.com/tkh44/emotion/tree/master/examples/glam)

```bash
npm install -S glam
```

**.babelrc**
```json
Expand All @@ -36,72 +27,62 @@ npm install -S glam
}
```

```jsx harmony
const Name = ({ color, name }) => <h1 css={`color: ${color};`}>{name}</h1>
```

is converted to
### glam

```jsx harmony
const Name = ({ color, name }) => <h1 className={css`color: ${color};`}>{name}</h1>
```
```jsx
import glam from 'emotion'

const H1 = glam('h1')`
color: 'blue';
font-size: 48px;
transform: scale(${props => props.scale});
`

**Similar to importing React when using jsx, `import css from 'glam'` must be at the top of your source files.**
// can be used as any other normal component

## `emotion/glamor`
function Greeting ({ name }) {
return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
}

```bash
npm install -S glamor
```
/*
<h1
className="css-vxb7tq vars-3na0zv"
>
Hello user
</h1>
*/

**.babelrc**
```json
{
"plugins": [
"emotion/glamor",
]
}
```
// You can also pass components in

```jsx harmony
const Name = ({ color, name }) => <h1 css={{ color: 'red' }}>{name}</h1>
```
const H2 = glam(H1)`
font-size: ${fontSize * 2/3}px;
color: 'red';
`

is converted to
function Greeting ({ name }) {
return <H2>Hello {name}</H2> // red, 32px, and scaled 2x text
}

```jsx harmony
const Name = ({ color, name }) => <h1 {...css({color: 'red' })}>{name}</h1>
/*
<h1
className="css-vxb7tq vars-3na0zv css-13wdnau vars-nujrf4"
>`
Hello user
</h1>
*/
// results
```


**Similar to importing React when using jsx, `import {css} from 'glamor'` must be at the top of your source files.**
### css prop

## `emotion/cxs`
When using the emotion babel plugin, any `css` prop is converted to a class name via glam and appended to any existing class names.

```bash
npm install -S cxs
```

**.babelrc**
```json
{
"plugins": [
"emotion/cxs",
]
}
```

```jsx harmony
const Name = ({ color, name }) => <h1 css={{ color: 'red', background: color }}>{name}</h1>
```
const Name = ({ color, name }) => <h1 css={`color: ${color};`}>{name}</h1>

is converted to
// is converted to

```jsx harmony
const Name = ({ color, name }) => <h1 className={cxs({color: 'red', background: color })}>{name}</h1>
const Name = ({ color, name }) => <h1 className={css`color: ${color};`}>{name}</h1>
```


**Similar to importing React when using jsx, `import cxs from 'cxs'` must be at the top of your source files.**

1 change: 0 additions & 1 deletion cxs.js

This file was deleted.

1 change: 0 additions & 1 deletion glamor.js

This file was deleted.

46 changes: 32 additions & 14 deletions package.json
@@ -1,38 +1,57 @@
{
"name": "emotion",
"version": "0.0.6",
"description": "css prop for all",
"description": "👩‍🎤 Glam + React",
"jsnext:main": "dist/emotion.es.js",
"module": "dist/emotion.es.js",
"main": "dist/glam.js",
"umd:main": "dist/emotion.umd.js",
"files": [
"src",
"glam.js"
],
"scripts": {
"build": "npm-run-all clean -p rollup -p minify:* -s size",
"clean": "rimraf dist",
"test": "standard src test && jest --coverage",
"test:watch": "jest --watch --coverage",
"release": "npm run test && npm version patch && npm publish && git push --tags"
"test:watch": "jest --watch",
"rollup": "rollup -c",
"minify:cjs": "uglifyjs $npm_package_main -cm toplevel -o $npm_package_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_main}.map",
"minify:umd": "uglifyjs $npm_package_umd_main -cm -o $npm_package_umd_main -p relative --in-source-map ${npm_package_umd_main}.map --source-map ${npm_package_umd_main}.map",
"size": "echo \"Gzipped Size: $(strip-json-comments --no-whitespace $npm_package_main | gzip-size)\"",
"release": "npm run test && npm run build && npm version patch && npm publish && git push --tags"
},
"dependencies": {
"babel-plugin-syntax-jsx": "^6.18.0"
"babel-plugin-syntax-jsx": "^6.18.0",
"glam": "^4.0.3"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-jest": "^19.0.0",
"babel-jest": "^20.0.3",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-env": "^1.5.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cxs": "^3.0.4",
"glam": "^4.0.3",
"glamor": "^2.20.25",
"jest": "^20.0.1",
"jest-glamor-react": "^1.3.0",
"gzip-size-cli": "^2.0.0",
"jest": "^20.0.4",
"jest-cli": "^20.0.4",
"jest-glamor-react": "^1.4.0",
"npm-run-all": "^4.0.2",
"pretty-bytes-cli": "^2.0.0",
"react": "^15.5.4",
"react-addons-test-utils": "^15.5.1",
"react-dom": "^15.5.4",
"react-test-renderer": "^15.5.4",
"standard": "^10.0.2"
"rimraf": "^2.6.1",
"rollup": "^0.41.6",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"standard": "^10.0.2",
"strip-json-comments-cli": "^1.0.1",
"uglify-js": "2.8.23"
},
"author": "Kye Hohenberger",
"homepage": "https://github.com/tkh44/emotion#readme",
Expand Down Expand Up @@ -63,6 +82,5 @@
},
"bugs": {
"url": "https://github.com/tkh44/emotion/issues"
},
"main": "glam.js"
}
}
34 changes: 34 additions & 0 deletions rollup.config.js
@@ -0,0 +1,34 @@
import fs from 'fs'
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

const pkg = JSON.parse(fs.readFileSync('./package.json'))

export default {
entry: 'src/react.js',
external: ['react', 'prop-types', 'glam'],
exports: 'named',
globals: { react: 'React', 'prop-types': 'PropTypes', glam: 'glam' },
useStrict: false,
sourceMap: true,
plugins: [
babel({
exclude: 'node_modules/**'
}),
resolve({
jsnext: false,
main: true,
browser: true
}),
commonjs({
ignoreGlobal: true,
include: 'node_modules/**'
})
],
targets: [
{dest: pkg.main, format: 'cjs'},
{dest: pkg.module, format: 'es'},
{dest: pkg['umd:main'], format: 'umd', moduleName: pkg.name}
]
}
File renamed without changes.
60 changes: 60 additions & 0 deletions src/__tests__/__snapshots__/babel.js.snap
@@ -0,0 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`emotion/glam babel css prop StringLiteral css prop value 1`] = `"<div className={css('css-jf1v9l')}></div>;"`;

exports[`emotion/glam babel css prop basic 1`] = `"<div className={\\"a\\" + \\" \\" + css('css-jf1v9l')}></div>;"`;

exports[`emotion/glam babel css prop className as expression 1`] = `"<div className={variable + \\" \\" + css('css-jf1v9l')}></div>;"`;

exports[`emotion/glam babel css prop className as expression string 1`] = `"<div className={\`test__class\` + \\" \\" + css('css-jf1v9l')} this={\`hello\`}></div>;"`;
exports[`emotion/glam babel css prop css empty 1`] = `"<div className={css('css-0')}></div>;"`;
exports[`emotion/glam babel css prop emptyClassName 1`] = `"<div className={\\"\\" + \\" \\" + css('css-jf1v9l')}></div>;"`;
exports[`emotion/glam babel css prop no css attr 1`] = `"<div></div>;"`;
exports[`emotion/glam babel css prop noClassName 1`] = `"<div className={css('css-jf1v9l')}></div>;"`;
exports[`emotion/glam real basic 1`] = `
<p
className="css-jk0pkr"
>
hello world
</p>
`;
exports[`emotion/glam real kitchen sink 1`] = `
<div
className="css__legacy-stuff css-1170hdn vars-k1238z frag-15qcrjv frag-mdk64u"
>
<h1
className="css-wjhr0q vars-11t1jtz frag-1wh34bm vars-telb2o"
>
BOOM
</h1>
<p
className="test_class1 css-14jcta0"
>
Hello
</p>
<p
className="test_class1 test___class45 css-1gdxe9e"
>
World
</p>
<p
className="css-1g8ltio vars-bs2yjn"
>
hello world
</p>
</div>
`;
exports[`emotion/glam real string expression 1`] = `
<p
className="css-7sqgip"
>
hello world
</p>
`;
38 changes: 38 additions & 0 deletions src/__tests__/__snapshots__/react.js.snap
@@ -0,0 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`glam react babel glam component basic 1`] = `"glam(\\"h1\\", ['css-8xpzga', [fontSize]]);"`;

exports[`glam react babel glam component function call 1`] = `"glam(MyComponent, ['css-8xpzga', [fontSize]]);"`;

exports[`glam react basic render 1`] = `
<h1
className=" css-13wdnau vars-nujrf4"
>
hello world
</h1>
`;

exports[`glam react call expression 1`] = `
<h1
className="legacy__class css-13wdnau vars-nujrf4"
>
hello world
</h1>
`;

exports[`glam react composition 1`] = `
<h1
className="legacy__class css-vxb7tq vars-3na0zv css-13wdnau vars-nujrf4"
>
hello world
</h1>
`;

exports[`glam react function in expression 1`] = `
<h1
className="legacy__class css-vxb7tq vars-prycnx css-13wdnau vars-nujrf4"
scale={2}
>
hello world
</h1>
`;
4 changes: 2 additions & 2 deletions src/glam/__tests__/index.js → src/__tests__/babel.js
@@ -1,4 +1,4 @@
/* eslint-disable jsx-quotes,no-useless-escape */
/* eslint-disable jsx-quotes,no-useless-escape,no-template-curly-in-string */
/* eslint-env jest */
import React from 'react'
import renderer from 'react-test-renderer'
Expand All @@ -8,7 +8,7 @@ import css, {fragment} from 'glam'
const babel = require('babel-core')

describe('emotion/glam', () => {
describe('babel', () => {
describe('babel css prop', () => {
test('basic', () => {
const basic = '(<div className="a" css={`color: brown;`}></div>)'
const {code} = babel.transform(basic, {plugins: [plugin, 'glam/babel']})
Expand Down
File renamed without changes.

0 comments on commit 32225f3

Please sign in to comment.