emotion - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
   "name": "emotion",
-  "version": "0.0.6",
-  "description": "css prop for all",
+  "version": "0.0.7",
+  "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": [
@@ -10,8 +14,15 @@ "src",
   "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"
   },
@@ -22,12 +33,13 @@ "devDependencies": {
     "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",
@@ -37,3 +49,11 @@ "react-addons-test-utils": "^15.5.1",
     "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-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"
   },
@@ -69,4 +89,3 @@ "author": "Kye Hohenberger",
     "url": "https://github.com/tkh44/emotion/issues"
-  },
-  "main": "glam.js"
+  }
 }

README.md

 # emotion
 
-#### `css` prop for all
+## 👩‍🎤 Glam + React
 
@@ -11,5 +11,3 @@ [![npm version](https://badge.fury.io/js/emotion.svg)](https://badge.fury.io/js/emotion)
 -   [Install](#install)
--   [glam](#emotionglam)
--   [glamor](#emotionglamor)
--   [cxs](#emotioncxs)
+-   [Example Project](https://github.com/tkh44/emotion/tree/master/examples/glam)
 
@@ -19,11 +17,6 @@ ## Install
 ```bash
-npm install -S emotion
+npm install -S emotion glam
 ```
 
-## `emotion/glam`
 
-```bash
-npm install -S glam
-```
-
 **.babelrc**
@@ -39,70 +32,58 @@ ```json
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 css={`color: ${color};`}>{name}</h1>
-```
+## API
 
-is converted to
+### emotion
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 className={css`color: ${color};`}>{name}</h1>
-```
+```jsx
+import { emotion } from 'emotion'
 
+const H1 = emotion('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.**
+function Greeting ({ name }) {
+  return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
+}
 
-## `emotion/glamor`
 
-```bash
-npm install -S glamor
-```
+// You can also pass components in
 
-**.babelrc**
-```json
-{
-  "plugins": [
-    "emotion/glamor",
-  ]
+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
 }
-```
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 css={{ color: 'red' }}>{name}</h1>
-```
+// this works too
 
-is converted to
+const H3 = emotion.h3`
+  font-size: ${fontSize * 1/3}px;
+  color: 'red';
+`
 
-```jsx harmony
-const Name = ({ color, name }) => <h1 {...css({color: 'red' })}>{name}</h1>
+function Greeting ({ name }) {
+  return <H3>Hello {name}</H3> // red, 16px text
+}
 ```
 
 
-**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
-```
+**Similar to importing React when using jsx, `import css from 'glam'` must be at the top of your source files.**
 
-**.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.**
-

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

Worsened metrics

Total package byte prevSize

20910

decreased by-25.05%

Dependency count

2

increased by100%

Dev dependency count

27

increased by50%

Number of package files

12

decreased by-29.41%

Lines of code

395

decreased by-27.26%

Number of lines in readme file

87

decreased by-17.92%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedglam@^4.0.3

• + Addedabbrev@1.1.1(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedautoprefixer@7.2.6(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)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

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

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

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

• + Addedencoding@0.1.13(transitive)

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

• + Addedfbjs@0.8.18(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)

• + Addediconv-lite@0.6.3(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)

• + Addedis-stream@1.1.0(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addednopt@1.0.10(transitive)

• + Addednormalize-range@0.1.2(transitive)

• + Addednum2fraction@1.2.2(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpostcss@6.0.23(transitive)

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

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(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)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)