emotion - npm Package Compare versions

Comparing version 5.1.1 to 5.1.2

lib/babel.js

@@ -44,2 +44,8 @@ 'use strict';
       },
+      CallExpression: function CallExpression(path) {
+        if (t.isCallExpression(path.node.callee) && path.node.callee.callee.name === 'styled' || t.isMemberExpression(path.node.callee) && t.isIdentifier(path.node.callee.object) && path.node.callee.object.name === 'styled') {
+          var tag = t.isCallExpression(path.node.callee) ? path.node.callee.arguments[0] : t.stringLiteral(path.node.callee.property.name);
+          path.replaceWith(t.callExpression(t.identifier('styled'), [tag, t.arrayExpression(path.node.arguments), t.arrayExpression()]));
+        }
+      },
       TaggedTemplateExpression: function TaggedTemplateExpression(path, state) {
@@ -130,3 +136,6 @@ // in:
               });
-              var inlineContentExpr = t.functionExpression(t.identifier('createEmotionRules'), expressions, t.blockStatement([t.returnStatement(t.arrayExpression(parseDynamicValues(rules, t, { inputExpressions: expressions, composes: composes })))]));
+              var inlineContentExpr = t.functionExpression(t.identifier('createEmotionRules'), expressions, t.blockStatement([t.returnStatement(t.arrayExpression(parseDynamicValues(rules, t, {
+                inputExpressions: expressions,
+                composes: composes
+              })))]));
               args.push(inlineContentExpr);
@@ -150,3 +159,5 @@ }
           } else {
-            path.replaceWith(t.callExpression(t.identifier('keyframes'), [t.stringLiteral(animationName), t.arrayExpression(parseDynamicValues(_rules, t, { inputExpressions: path.node.quasi.expressions }))]));
+            path.replaceWith(t.callExpression(t.identifier('keyframes'), [t.stringLiteral(animationName), t.arrayExpression(parseDynamicValues(_rules, t, {
+              inputExpressions: path.node.quasi.expressions
+            }))]));
           }
@@ -166,3 +177,5 @@ } else if (t.isIdentifier(path.node.tag) && path.node.tag.name === 'fontFace') {
           } else {
-            path.replaceWith(t.callExpression(t.identifier('fontFace'), [t.arrayExpression(parseDynamicValues(_rules2, t, { inputExpressions: path.node.quasi.expressions }))]));
+            path.replaceWith(t.callExpression(t.identifier('fontFace'), [t.arrayExpression(parseDynamicValues(_rules2, t, {
+              inputExpressions: path.node.quasi.expressions
+            }))]));
           }
@@ -182,3 +195,5 @@ } else if (t.isIdentifier(path.node.tag) && path.node.tag.name === 'injectGlobal' && t.isTemplateLiteral(path.node.quasi)) {
           } else {
-            path.replaceWith(t.callExpression(t.identifier('injectGlobal'), [t.arrayExpression(parseDynamicValues(_rules3, t, { inputExpressions: path.node.quasi.expressions }))]));
+            path.replaceWith(t.callExpression(t.identifier('injectGlobal'), [t.arrayExpression(parseDynamicValues(_rules3, t, {
+              inputExpressions: path.node.quasi.expressions
+            }))]));
           }
@@ -185,0 +200,0 @@ }

lib/vue.js

@@ -14,7 +14,9 @@ 'use strict';
   return {
+    cls: '.' + cls,
     functional: true,
     render: function render(h, context) {
-      var className = (0, _index.css)(cls, vars.map(function (v) {
-        return v && typeof v === 'function' ? v(context.props) : v;
-      }), content);
+      var getValue = function getValue(v) {
+        return v && typeof v === 'function' ? v(context.props) : v.cls || v;
+      };
+      var className = (0, _index.css)(cls.map(getValue), vars.map(getValue), content);
       return h(tag, _extends({}, context.data, {
@@ -21,0 +23,0 @@ class: [context.data.class, className]

package.json

 {
   "name": "emotion",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "high performance css-in-js",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -79,16 +79,2 @@ <h1 align="center" style="color: #343a40">
 
-Extracted:
-```jsx
-const H1 = styled('h1')`
-  color: #ffd43b;
-`
-```
-
-**Not** extracted
-```jsx
-const H1 = styled('h1')`
-  color: ${props => props.color};
-`
-```
-
 Configure babel
@@ -130,2 +116,59 @@
 
+### css
+
+`css` takes in styles and returns a class name. It is the foundation of emotion.
+
+```jsx
+import { css } from 'emotion'
+
+const flex = css`
+  display: flex;
+`
+const justifyCenter = css`
+  composes: ${flex};
+  justifyContent: center;
+`
+
+<div className={justifyCenter}>
+ Centered Content
+</div>
+```
+
+#### Objects as Styles
+
+`css` can also take an object or array of objects as a parameter. 
+This allows you to use your existing object styles in the emotion ecosystem. 
+Another great benefit is that you can now use [polished](https://polished.js.org/) with emotion.
+
+*Object styles cannot be optimized as well as template literal styles at this time. Object styles are also not autoprefixed.*
+
+```jsx harmony
+import { css } from 'emotion'
+import { lighten, modularScale } from 'polished'
+
+const cssA = {
+  color: lighten(0.2, '#000'),
+  "font-size": modularScale(1),
+  [hiDPI(1.5)]: {
+    "font-size": modularScale(1.25)
+  }
+}
+
+const cssB = css`
+  composes: ${cssA}
+  height: 64px;
+`
+
+const H1 = styled('h1')`
+  composes: ${cssB}
+  font-size: ${modularScale(4)};
+`
+
+const H2 = styled(H1)`font-size:32px;`
+
+<H2 scale={2} className={'legacy__class'}>
+  hello world
+</H2>
+```
+
 ### styled
@@ -181,56 +224,21 @@
 
-### css
+#### Objects as styles
 
-`css` takes in styles and returns a class name. It is the foundation of emotion.
+`styled` can also take objects or a function that returns an object. This API was inspired by [glamorous](https://github.com/paypal/glamorous).
 
+*The same caveats to using objects with css apply to this.*
+
 ```jsx
-const flex = css`
-  display: flex;
-`
-const justifyCenter = css`
-  composes: ${flex};
-  justifyContent: center;
-`
+import styled from 'emotion/react'
 
-<div className={justifyCenter}>
- Centered Content
-</div>
-```
+const H1 = styled.h1({
+  fontSize: 20
+}, (props) => ({ color: props.color }))
 
-**Objects as Styles**
+const H2 = styled('h2')('some-other-class', {
+  fontSize: '40px'
+})
 
-`css` can also take an object as a parameter. 
-This allows you to use your existing object styles in the emotion ecosystem. 
-Another great benefit is that you can now use [polished](https://polished.js.org/) with emotion!
-
-```jsx harmony
-import { css } from 'emotion'
-importimport { lighten, modularScale } from 'polished'
-
-const cssA = {
-  color: lighten(0.2, '#000'),
-  "font-size": modularScale(1),
-  [hiDPI(1.5)]: {
-    "font-size": modularScale(1.25)
-  }
-}
-
-const cssB = css`
-  composes: ${cssA}
-  height: 64px;
-`
-
-const H1 = styled('h1')`
-  composes: ${cssB}
-  font-size: ${modularScale(4)};
-`
-
-const H2 = styled(H1)`font-size:32px;`
-
-<H2 scale={2} className={'legacy__class'}>
-  hello world
-</H2>
 ```
 
-
 ### css prop
@@ -237,0 +245,0 @@

src/babel.js

@@ -58,3 +58,5 @@ import fs from 'fs'
           if (options.inputExpressions) {
-            expressions.push(options.inputExpressions[match.p1 - options.composes])
+            expressions.push(
+              options.inputExpressions[match.p1 - options.composes]
+            )
           } else {
@@ -65,3 +67,8 @@ expressions.push(t.identifier(`x${match.p1 - options.composes}`))
         if (match.type === ATTR) {
-          const expr = createAttrExpression(match, options.vars, options.composes, t)
+          const expr = createAttrExpression(
+            match,
+            options.vars,
+            options.composes,
+            t
+          )
           options.vars.push(expr)
@@ -144,2 +151,22 @@ expressions.push(t.identifier(`x${options.vars.length - 1}`))
       },
+      CallExpression (path) {
+        if (
+          (t.isCallExpression(path.node.callee) &&
+            path.node.callee.callee.name === 'styled') ||
+          (t.isMemberExpression(path.node.callee) &&
+            t.isIdentifier(path.node.callee.object) &&
+            path.node.callee.object.name === 'styled')
+        ) {
+          const tag = t.isCallExpression(path.node.callee)
+            ? path.node.callee.arguments[0]
+            : t.stringLiteral(path.node.callee.property.name)
+          path.replaceWith(
+            t.callExpression(t.identifier('styled'), [
+              tag,
+              t.arrayExpression(path.node.arguments),
+              t.arrayExpression()
+            ])
+          )
+        }
+      },
       TaggedTemplateExpression (path, state) {
@@ -162,8 +189,10 @@ // in:
         function buildCallExpression (identifier, tag, path) {
-          let { hash, rules, name, hasOtherMatch, composes, hasCssFunction } = inline(
-            path.node.quasi,
-            identifierName,
-            'css',
-            state.inline
-          )
+          let {
+            hash,
+            rules,
+            name,
+            hasOtherMatch,
+            composes,
+            hasCssFunction
+          } = inline(path.node.quasi, identifierName, 'css', state.inline)
 
@@ -181,7 +210,3 @@ // hash will be '0' when no styles are passed so we can just return the original tag
 
-          const dynamicValues = parseDynamicValues(
-            rules,
-            t,
-            { composes, vars }
-          )
+          const dynamicValues = parseDynamicValues(rules, t, { composes, vars })
           const args = [
@@ -272,3 +297,6 @@ tag,
                     t.arrayExpression(
-                      parseDynamicValues(rules, t, { inputExpressions: expressions, composes })
+                      parseDynamicValues(rules, t, {
+                        inputExpressions: expressions,
+                        composes
+                      })
                     )
@@ -304,3 +332,5 @@ )
                 t.arrayExpression(
-                  parseDynamicValues(rules, t, { inputExpressions: path.node.quasi.expressions })
+                  parseDynamicValues(rules, t, {
+                    inputExpressions: path.node.quasi.expressions
+                  })
                 )
@@ -329,3 +359,5 @@ ])
                 t.arrayExpression(
-                  parseDynamicValues(rules, t, {inputExpressions: path.node.quasi.expressions})
+                  parseDynamicValues(rules, t, {
+                    inputExpressions: path.node.quasi.expressions
+                  })
                 )
@@ -352,3 +384,5 @@ ])
                 t.arrayExpression(
-                  parseDynamicValues(rules, t, {inputExpressions: path.node.quasi.expressions})
+                  parseDynamicValues(rules, t, {
+                    inputExpressions: path.node.quasi.expressions
+                  })
                 )
@@ -355,0 +389,0 @@ ])

src/vue.js

@@ -5,7 +5,9 @@ import { css as magic } from './index'
   return {
+    cls: '.' + cls,
     functional: true,
     render (h, context) {
+      const getValue = v => (v && typeof v === 'function' ? v(context.props) : v.cls || v)
       const className = magic(
-        cls,
-        vars.map(v => (v && typeof v === 'function' ? v(context.props) : v)),
+        cls.map(getValue),
+        vars.map(getValue),
         content
@@ -12,0 +14,0 @@ )

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

112880

increased by2.06%

Lines of code

2297

increased by2.36%

Number of lines in readme file

478

increased by1.7%

No dependency changes