emotion - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "emotion",
-  "version": "1.0.0",
-  "description": "emotion React component",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "version": "1.0.1",
+  "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": [
-    "css",
-    "es",
-    "lib",
-    "umd"
+    "src",
+    "glam.js"
   ],
   "scripts": {
-    "build": "nwb build-react-component",
-    "clean": "nwb clean-module && npm clean-demo",
-    "start": "nwb serve-react-demo",
-    "test": "nwb test-react",
-    "test:coverage": "nwb test-react --coverage",
-    "test:watch": "nwb test-react --server"
+    "build": "npm-run-all clean -p rollup -p minify:* -s size",
+    "clean": "rimraf dist",
+    "test": "standard src test && jest --coverage",
+    "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": {},
-  "peerDependencies": {
-    "react": "15.x"
+  "dependencies": {
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "glam": "^4.0.3"
   },
   "devDependencies": {
-    "nwb": "0.15.x",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-jest": "^20.0.3",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.5.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "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-dom": "^15.5.4"
+    "react-addons-test-utils": "^15.5.1",
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.5.4",
+    "rimraf": "^2.6.1",
+    "rollup": "^0.41.6",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-buble": "^0.15.0",
+    "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": "",
-  "homepage": "",
+  "author": "Kye Hohenberger",
+  "homepage": "https://github.com/tkh44/emotion#readme",
   "license": "MIT",
-  "repository": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tkh44/emotion.git"
+  },
+  "directories": {
+    "test": "tests"
+  },
   "keywords": [
-    "react-component"
-  ]
+    "styles",
+    "emotion",
+    "react",
+    "css",
+    "css-in-js"
+  ],
+  "eslintConfig": {
+    "extends": "standard",
+    "parser": "babel-eslint"
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "/dist/"
+    ]
+  },
+  "bugs": {
+    "url": "https://github.com/tkh44/emotion/issues"
+  }
 }

README.md

 # emotion
 
-[![Travis][build-badge]][build]
-[![npm package][npm-badge]][npm]
-[![Coveralls][coveralls-badge]][coveralls]
+## 👩‍🎤 Glam + React
 
-Describe emotion here.
+[![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)
 
-[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
-[build]: https://travis-ci.org/user/repo
 
-[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
-[npm]: https://www.npmjs.org/package/npm-package
+-   [Install](#install)
+-   [Example Project](https://github.com/tkh44/emotion/tree/master/examples/glam)
 
-[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
-[coveralls]: https://coveralls.io/github/user/repo
+## Install
+
+```bash
+npm install -S emotion glam
+```
+
+
+**.babelrc**
+```json
+{
+  "plugins": [
+    "emotion/glam",
+    "glam/babel"
+  ]
+}
+```
+
+## API
+
+### emotion
+
+```jsx
+import { emotion } from 'emotion'
+
+const H1 = emotion('h1')`
+  color: 'blue';
+  font-size: 48px;
+  transform: scale(${props => props.scale});
+`
+
+function Greeting ({ name }) {
+  return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
+}
+
+
+// You can also pass components in
+
+const H2 = emotion(H1)`
+  font-size: ${fontSize * 2/3}px;
+  color: 'red';
+`
+
+function Greeting ({ name }) {
+  return <H2>Hello {name}</H2> // red, 32px, and scaled 2x text
+}
+
+// this works too
+
+const H3 = emotion.h3`
+  font-size: ${fontSize * 1/3}px;
+  color: 'red';
+`
+
+function Greeting ({ name }) {
+  return <H3>Hello {name}</H3> // red, 16px text
+}
+```
+
+
+### css prop
+
+When using the emotion babel plugin, any `css` prop is converted to a class name via glam and appended to any existing class names.
+
+**Similar to importing React when using jsx, `import css from 'glam'` must be at the top of your source files.**
+
+
+```jsx harmony
+const Name = ({ color, name }) => <h1 css={`color: ${color};`}>{name}</h1>
+
+// is converted to
+
+const Name = ({ color, name }) => <h1 className={css`color: ${color};`}>{name}</h1>
+```
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20910

increased by1504.76%

Number of package files

12

increased by500%

Lines of code

395

increased byInfinity%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

87

increased by411.76%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

27

increased by800%

Dependency changes

• + Addedbabel-plugin-syntax-jsx@^6.18.0

• + Addedglam@^4.0.3

• + Addedabbrev@1.1.1(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedautoprefixer@7.2.6(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedbabylon@6.18.0(transitive)

• + Addedbase64-js@1.5.1(transitive)

• + Addedbowser@1.9.4(transitive)

• + Addedbrowserslist@2.11.3(transitive)

• + Addedbuffer@5.7.1(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001662(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@2.3.2(transitive)

• + Addedelectron-to-chromium@1.5.26(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedglam@4.0.5(transitive)

• + Addedhas-flag@1.0.03.0.0(transitive)

• + Addedhoist-non-react-statics@1.2.0(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addedieee754@1.2.1(transitive)

• + Addedinline-style-prefixer@2.0.5(transitive)

• + Addedis-function@1.0.2(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addednopt@1.0.10(transitive)

• + Addednormalize-range@0.1.2(transitive)

• + Addednum2fraction@1.2.2(transitive)

• + Addedpostcss@6.0.23(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedstyled-components@2.0.0(transitive)

• + Addedstylis@2.0.12(transitive)

• + Addedsupports-color@3.2.35.5.0(transitive)

• + Addedtouch@1.0.0(transitive)