emotion - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

lib/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.sheet = undefined;
+exports.inserted = exports.sheet = undefined;
 exports.flush = flush;
@@ -23,3 +23,3 @@ exports.css = css;
 
-var inserted = {};
+var inserted = exports.inserted = {};
 
@@ -43,3 +43,3 @@ function values(cls, vars) {
   sheet.flush();
-  inserted = {};
+  exports.inserted = inserted = {};
   sheet.inject();
@@ -46,0 +46,0 @@ }

package.json

 {
   "name": "emotion",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "high performance css-in-js",
@@ -11,3 +11,4 @@ "main": "lib/index.js",
     "lib",
-    "styled.js"
+    "styled.js",
+    "server.js"
   ],
@@ -14,0 +15,0 @@ "scripts": {

README.md

@@ -36,5 +36,74 @@ <h1 align="center" style="color: #343a40">
 
+## Extract Mode
+
+The default settings enable css extraction.
+
+This js file, `h1.js`
+
+```jsx harmony
+import styled from 'emotion/styled'
+
+const H1 = styled('h1')`
+  color: #ffd43b;
+`
+```
+
+During babel compilation emotion will create `h1.emotion.css` and add `import './h1.emotion.css'` to the top of `h1.js`
+
+```css
+.css-H1-duiy4a {
+  color: blue
+}
+```
+
+`h1.js` after babel compilation
+
+```jsx
+import './h1.emotion.css'
+import styled from 'emotion/styled'
+
+const H1 = styled('h1', 'css-H1-duiy4a')
+```
+
+**Browser Support** no ie11 support (css vars)
+
+## Inline Mode
+
+Inline mode does **not** extract css into external files.
+
+**.babelrc**
+```json
+{
+  "plugins": [
+    ["emotion/babel", { inline: true }]
+  ]
+}
+```
+
+This js file, `h1.js`
+
+```jsx
+import styled from 'emotion/styled'
+
+const H1 = styled('h1')`
+  color: #ffd43b;
+`
+```
+
+`h1.js` after babel compilation
+
+```jsx
+import './h1.emotion.css'
+import styled from 'emotion/styled'
+
+const H1 = styled('h1', 'css-H1-duiy4a', [], function createEmotionStyles() {
+  return ['.css-H1-duiy4a {color:blue}']
+})
+```
+
+**Browser Support** anything React supports
+
 ## API
 
-### emotion
+### styled
 
@@ -41,0 +110,0 @@ ```jsx

src/index.js

@@ -8,3 +8,3 @@ // @flow
 
-let inserted: { [string]: boolean | void } = {}
+export let inserted: { [string]: boolean | void } = {}
 
@@ -11,0 +11,0 @@ type inputVar = string | number

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

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

Improved metrics

Total package byte prevSize

62551

increased by7.43%

Number of package files

25

increased by13.64%

Lines of code

1652

increased by6.58%

Number of lines in readme file

185

increased by59.48%

No dependency changes