emotion - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1

lib/babel.js

@@ -126,23 +126,51 @@ 'use strict';
         } else if (t.isIdentifier(path.node.tag) && path.node.tag.name === 'keyframes') {
-          var _keyframes = (0, _inline4.keyframes)(path.node.quasi, identifierName, 'animation'),
+          var _keyframes = (0, _inline4.keyframes)(path.node.quasi, identifierName, 'animation', state.inline),
               _hash = _keyframes.hash,
               _name = _keyframes.name,
-              _rules2 = _keyframes.rules;
+              _rules2 = _keyframes.rules,
+              _isStatic = _keyframes.isStatic;
 
-          path.replaceWith(t.callExpression(t.identifier('keyframes'), [t.stringLiteral(_name + '-' + _hash), t.arrayExpression(path.node.quasi.expressions), t.functionExpression(t.identifier('createEmotionKeyframe'), path.node.quasi.expressions.map(function (x, i) {
-            return t.identifier('x' + i);
-          }), t.blockStatement([t.returnStatement(t.arrayExpression(_rules2.map(function (r) {
-            return t.stringLiteral(r);
-          })))]))]));
+          var animationName = _name + '-' + _hash;
+          if (_isStatic) {
+            state.insertStaticRules(['@keyframes ' + animationName + ' ' + _rules2.join('')]);
+            path.replaceWith(t.stringLiteral(animationName));
+          } else {
+            path.replaceWith(t.callExpression(t.identifier('keyframes'), [t.stringLiteral(animationName), t.arrayExpression(path.node.quasi.expressions), t.functionExpression(t.identifier('createEmotionKeyframes'), path.node.quasi.expressions.map(function (x, i) {
+              return t.identifier('x' + i);
+            }), t.blockStatement([t.returnStatement(t.arrayExpression(parseDynamicValues(_rules2, t)))]))]));
+          }
         } else if (t.isIdentifier(path.node.tag) && path.node.tag.name === 'fontFace') {
-          var _fontFace = (0, _inline4.fontFace)(path.node.quasi, identifierName, 'font-face'),
-              _hash2 = _fontFace.hash,
-              _name2 = _fontFace.name,
-              _rules3 = _fontFace.rules;
+          var _fontFace = (0, _inline4.fontFace)(path.node.quasi, state.inline),
+              _rules3 = _fontFace.rules,
+              _isStatic2 = _fontFace.isStatic;
 
-          path.replaceWith(t.callExpression(t.identifier('fontFace'), [t.stringLiteral(_name2 + '-' + _hash2), t.arrayExpression(path.node.quasi.expressions), t.functionExpression(t.identifier('createEmotionFontFace'), path.node.quasi.expressions.map(function (x, i) {
-            return t.identifier('x' + i);
-          }), t.blockStatement([t.returnStatement(t.arrayExpression(_rules3.map(function (r) {
-            return t.stringLiteral(r);
-          })))]))]));
+          if (_isStatic2) {
+            state.insertStaticRules(_rules3);
+            if (t.isExpressionStatement(path.parent)) {
+              path.parentPath.remove();
+            } else {
+              path.replaceWith(t.identifier('undefined'));
+            }
+          } else {
+            path.replaceWith(t.callExpression(t.identifier('fontFace'), [t.arrayExpression(path.node.quasi.expressions), t.functionExpression(t.identifier('createEmotionFontFace'), path.node.quasi.expressions.map(function (x, i) {
+              return t.identifier('x' + i);
+            }), t.blockStatement([t.returnStatement(t.arrayExpression(parseDynamicValues(_rules3, t)))]))]));
+          }
+        } else if (t.isIdentifier(path.node.tag) && path.node.tag.name === 'injectGlobal' && t.isTemplateLiteral(path.node.quasi)) {
+          var _injectGlobal = (0, _inline4.injectGlobal)(path.node.quasi, state.inline),
+              _isStatic3 = _injectGlobal.isStatic,
+              _rules4 = _injectGlobal.rules;
+
+          if (_isStatic3) {
+            state.insertStaticRules(_rules4);
+            if (t.isExpressionStatement(path.parent)) {
+              path.parentPath.remove();
+            } else {
+              path.replaceWith(t.identifier('undefined'));
+            }
+          } else {
+            path.replaceWith(t.callExpression(t.identifier('injectGlobal'), [t.arrayExpression(path.node.quasi.expressions), t.functionExpression(t.identifier('createEmotionGlobal'), path.node.quasi.expressions.map(function (x, i) {
+              return t.identifier('x' + i);
+            }), t.blockStatement([t.returnStatement(t.arrayExpression(parseDynamicValues(_rules4, t)))]))]));
+          }
         }
@@ -149,0 +177,0 @@ }

lib/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.inserted = exports.sheet = undefined;
+exports.fontFace = exports.inserted = exports.sheet = undefined;
 exports.flush = flush;
 exports.css = css;
 exports.fragment = fragment;
+exports.injectGlobal = injectGlobal;
 exports.keyframes = keyframes;
-exports.fontFace = fontFace;
 exports.hydrate = hydrate;
@@ -69,3 +69,3 @@
 
-function keyframes(kfm, vars, content) {
+function injectGlobal(vars, content) {
   var src = content.apply(undefined, vars);
@@ -75,19 +75,19 @@ var hash = (0, _hash2.default)(src);
     inserted[hash] = true;
-    src.forEach(function (r) {
-      return sheet.insert('@keyframes ' + kfm + '-' + hash + ' {' + r + '}');
-    });
+    sheet.insert(src);
   }
-  return kfm + '-' + hash;
 }
 
-function fontFace(fontRules, vars, content) {
+var fontFace = exports.fontFace = injectGlobal;
+
+function keyframes(kfm, vars, content) {
   var src = content.apply(undefined, vars);
   var hash = (0, _hash2.default)(src);
+  var animationName = kfm + '-' + hash;
   if (!inserted[hash]) {
     inserted[hash] = true;
     src.forEach(function (r) {
-      return sheet.insert(r);
+      sheet.insert('@keyframes ' + animationName + ' ' + r);
     });
   }
-  return fontRules + '-' + hash;
+  return animationName;
 }
@@ -94,0 +94,0 @@

lib/inline.js

@@ -7,2 +7,3 @@ 'use strict';
 exports.fontFace = fontFace;
+exports.injectGlobal = injectGlobal;
 
@@ -36,2 +37,18 @@ var _parser = require('./parser');
 
+function replaceVarsWithPlaceholders(rules) {
+  return rules.map(function (rule) {
+    return rule.replace(/var\(--[A-Za-z0-9-_]+-([0-9]+)\)/gm, function (match, p1) {
+      return 'xxx' + p1 + 'xxx';
+    });
+  });
+}
+
+function replaceApplyWithPlaceholders(rules) {
+  return rules.map(function (rule) {
+    return rule.replace(/@apply\s+--[A-Za-z0-9-_]+-([0-9]+)/gm, function (match, p1) {
+      return 'xxx' + p1 + 'xxx';
+    });
+  });
+}
+
 function inline(quasi, identifierName, prefix, inlineVars) {
@@ -58,21 +75,12 @@ var strs = quasi.quasis.map(function (x) {
   var rules = (0, _parser.parseCSS)('.' + name + '-' + hash + ' { ' + src + ' }');
+  if (inlineVars || hasApply) {
+    rules = replaceVarsWithPlaceholders(rules);
+  }
   if (hasApply) {
-    rules = rules.map(function (rule) {
-      return rule.replace(/@apply\s+--[A-Za-z0-9-_]+-([0-9]+)/gm, function (match, p1) {
-        return 'xxx' + p1 + 'xxx';
-      });
-    });
+    rules = replaceApplyWithPlaceholders(rules);
   }
-  if (inlineVars || hasApply) {
-    rules = rules.map(function (rule) {
-      return rule.replace(/var\(--[A-Za-z0-9-_]+-([0-9]+)\)/gm, function (match, p1) {
-        return 'xxx' + p1 + 'xxx';
-      });
-    });
-  }
-
   return { hash: hash, name: name, rules: rules, isStatic: !hasApply && !inlineVars };
 }
 
-function keyframes(quasi, identifierName, prefix) {
+function keyframes(quasi, identifierName, prefix, inlineVars) {
   var strs = quasi.quasis.map(function (x) {
@@ -83,23 +91,66 @@ return x.value.cooked;
   var name = getName(extractNameFromProperty(strs.join('xxx')), identifierName, prefix);
+  var hasApplyOrVar = false;
+  var src = strs.reduce(function (arr, str, i) {
+    arr.push(str);
+    if (i !== quasi.expressions.length) {
+      hasApplyOrVar = true;
+      // todo - test for preceding @apply
+      var applyMatch = /@apply\s*$/gm.exec(str);
+      if (applyMatch) {
+        arr.push('--name-hash-' + i);
+      } else arr.push('var(--name-hash-' + i + ')');
+    }
+    return arr;
+  }, []).join('').trim();
+  var rules = (0, _parser.parseCSS)('{ ' + src + ' }', { nested: false });
+  if (hasApplyOrVar) {
+    rules = replaceVarsWithPlaceholders(rules);
+    rules = replaceApplyWithPlaceholders(rules);
+  }
+  return { hash: hash, name: name, rules: rules, isStatic: !hasApplyOrVar && !inlineVars };
+}
 
-  return {
-    hash: hash,
-    name: name,
-    rules: [(0, _parser.parseCSS)('{ ' + strs.join('').trim() + ' }').join('').trim()]
-  };
+function fontFace(quasi, inlineVars) {
+  var strs = quasi.quasis.map(function (x) {
+    return x.value.cooked;
+  });
+  var hasVar = void 0;
+  var src = strs.reduce(function (arr, str, i) {
+    arr.push(str);
+    if (i !== quasi.expressions.length) {
+      hasVar = true;
+      arr.push('var(--name-hash-' + i + ')');
+    }
+    return arr;
+  }, []).join('').trim();
+  var rules = (0, _parser.parseCSS)('@font-face {' + src + '}');
+  if (hasVar) {
+    rules = replaceVarsWithPlaceholders(rules);
+  }
+  return { rules: rules, isStatic: !inlineVars && !hasVar };
 }
 
-function fontFace(quasi, identifierName, prefix) {
+function injectGlobal(quasi, inlineVars) {
   var strs = quasi.quasis.map(function (x) {
     return x.value.cooked;
   });
-  var hash = (0, _hash2.default)([].concat(strs));
-  var name = getName(extractNameFromProperty(strs.join('xxx')), identifierName, prefix);
-  return {
-    hash: hash,
-    name: name,
-    rules: [(0, _parser.parseCSS)('@font-face {' + strs.join('').trim() + '}', {
-      nested: false
-    }).join('').trim()]
-  };
+  var hasApplyOrVar = false;
+  var src = strs.reduce(function (arr, str, i) {
+    arr.push(str);
+    if (i !== quasi.expressions.length) {
+      hasApplyOrVar = true;
+      // todo - test for preceding @apply
+      var applyMatch = /@apply\s*$/gm.exec(str);
+      if (applyMatch) {
+        arr.push('--name-hash-' + i);
+      } else arr.push('var(--name-hash-' + i + ')');
+    }
+    return arr;
+  }, []).join('').trim();
+  var rules = (0, _parser.parseCSS)(src);
+  if (hasApplyOrVar) {
+    rules = replaceVarsWithPlaceholders(rules);
+    rules = replaceApplyWithPlaceholders(rules);
+  }
+  return { rules: rules, isStatic: !inlineVars && !hasApplyOrVar };
 }

package.json

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

src/babel.js

 import fs from 'fs'
 import { basename } from 'path'
 import { touchSync } from 'touch'
-import { inline, keyframes, fontFace } from './inline'
+import { inline, keyframes, fontFace, injectGlobal } from './inline'
 import findAndReplaceAttrs from './attrs'
@@ -115,5 +115,4 @@
         const parent = path.findParent(p => p.isVariableDeclarator())
-        const identifierName = parent && t.isIdentifier(parent.node.id)
-          ? parent.node.id.name
-          : ''
+        const identifierName =
+          parent && t.isIdentifier(parent.node.id) ? parent.node.id.name : ''
 
@@ -247,25 +246,33 @@ function buildCallExpression (identifier, tag, path) {
         ) {
-          const { hash, name, rules } = keyframes(
+          const { hash, name, rules, isStatic } = keyframes(
             path.node.quasi,
             identifierName,
-            'animation'
+            'animation',
+            state.inline
           )
-
-          path.replaceWith(
-            t.callExpression(t.identifier('keyframes'), [
-              t.stringLiteral(`${name}-${hash}`),
-              t.arrayExpression(path.node.quasi.expressions),
-              t.functionExpression(
-                t.identifier('createEmotionKeyframe'),
-                path.node.quasi.expressions.map((x, i) =>
-                  t.identifier(`x${i}`)
-                ),
-                t.blockStatement([
-                  t.returnStatement(
-                    t.arrayExpression(rules.map(r => t.stringLiteral(r)))
-                  )
-                ])
-              )
+          const animationName = `${name}-${hash}`
+          if (isStatic) {
+            state.insertStaticRules([
+              `@keyframes ${animationName} ${rules.join('')}`
             ])
-          )
+            path.replaceWith(t.stringLiteral(animationName))
+          } else {
+            path.replaceWith(
+              t.callExpression(t.identifier('keyframes'), [
+                t.stringLiteral(animationName),
+                t.arrayExpression(path.node.quasi.expressions),
+                t.functionExpression(
+                  t.identifier('createEmotionKeyframes'),
+                  path.node.quasi.expressions.map((x, i) =>
+                    t.identifier(`x${i}`)
+                  ),
+                  t.blockStatement([
+                    t.returnStatement(
+                      t.arrayExpression(parseDynamicValues(rules, t))
+                    )
+                  ])
+                )
+              ])
+            )
+          }
         } else if (
@@ -275,25 +282,62 @@ t.isIdentifier(path.node.tag) &&
         ) {
-          const { hash, name, rules } = fontFace(
+          const { rules, isStatic } = fontFace(path.node.quasi, state.inline)
+          if (isStatic) {
+            state.insertStaticRules(rules)
+            if (t.isExpressionStatement(path.parent)) {
+              path.parentPath.remove()
+            } else {
+              path.replaceWith(t.identifier('undefined'))
+            }
+          } else {
+            path.replaceWith(
+              t.callExpression(t.identifier('fontFace'), [
+                t.arrayExpression(path.node.quasi.expressions),
+                t.functionExpression(
+                  t.identifier('createEmotionFontFace'),
+                  path.node.quasi.expressions.map((x, i) =>
+                    t.identifier(`x${i}`)
+                  ),
+                  t.blockStatement([
+                    t.returnStatement(
+                      t.arrayExpression(parseDynamicValues(rules, t))
+                    )
+                  ])
+                )
+              ])
+            )
+          }
+        } else if (
+          t.isIdentifier(path.node.tag) &&
+          path.node.tag.name === 'injectGlobal' &&
+          t.isTemplateLiteral(path.node.quasi)
+        ) {
+          const { isStatic, rules } = injectGlobal(
             path.node.quasi,
-            identifierName,
-            'font-face'
+            state.inline
           )
-
-          path.replaceWith(
-            t.callExpression(t.identifier('fontFace'), [
-              t.stringLiteral(`${name}-${hash}`),
-              t.arrayExpression(path.node.quasi.expressions),
-              t.functionExpression(
-                t.identifier('createEmotionFontFace'),
-                path.node.quasi.expressions.map((x, i) =>
-                  t.identifier(`x${i}`)
-                ),
-                t.blockStatement([
-                  t.returnStatement(
-                    t.arrayExpression(rules.map(r => t.stringLiteral(r)))
-                  )
-                ])
-              )
-            ])
-          )
+          if (isStatic) {
+            state.insertStaticRules(rules)
+            if (t.isExpressionStatement(path.parent)) {
+              path.parentPath.remove()
+            } else {
+              path.replaceWith(t.identifier('undefined'))
+            }
+          } else {
+            path.replaceWith(
+              t.callExpression(t.identifier('injectGlobal'), [
+                t.arrayExpression(path.node.quasi.expressions),
+                t.functionExpression(
+                  t.identifier('createEmotionGlobal'),
+                  path.node.quasi.expressions.map((x, i) =>
+                    t.identifier(`x${i}`)
+                  ),
+                  t.blockStatement([
+                    t.returnStatement(
+                      t.arrayExpression(parseDynamicValues(rules, t))
+                    )
+                  ])
+                )
+              ])
+            )
+          }
         }
@@ -300,0 +344,0 @@ }

src/index.js

@@ -52,32 +52,28 @@ // @flow
 
-export function fragment (vars: vars, content: () => string[]) {
+export function fragment (vars: vars, content: () => string) {
   return content(...vars)
 }
 
-export function keyframes (kfm: string, vars: vars, content: () => string[]) {
-  let src = content(...vars)
-  let hash = hashArray(src)
+export function injectGlobal (vars: vars, content: () => string[]) {
+  const src = content(...vars)
+  const hash = hashArray(src)
   if (!inserted[hash]) {
     inserted[hash] = true
-    src.forEach(r => {
-      return sheet.insert(`@keyframes ${kfm}-${hash} {${r}}`)
-    })
+    sheet.insert(src)
   }
-  return `${kfm}-${hash}`
 }
 
-export function fontFace (
-  fontRules: string,
-  vars: vars,
-  content: () => string[]
-) {
-  let src = content(...vars)
-  let hash = hashArray(src)
+export const fontFace = injectGlobal
+
+export function keyframes (kfm: string, vars: vars, content: () => string[]) {
+  const src = content(...vars)
+  const hash = hashArray(src)
+  const animationName = `${kfm}-${hash}`
   if (!inserted[hash]) {
     inserted[hash] = true
     src.forEach(r => {
-      return sheet.insert(r)
+      sheet.insert(`@keyframes ${animationName} ${r}`)
     })
   }
-  return `${fontRules}-${hash}`
+  return animationName
 }
@@ -84,0 +80,0 @@

src/inline.js

@@ -28,2 +28,20 @@ // @flow
 
+function replaceVarsWithPlaceholders (rules: string[]): string[] {
+  return rules.map(rule =>
+    rule.replace(
+      /var\(--[A-Za-z0-9-_]+-([0-9]+)\)/gm,
+      (match, p1) => `xxx${p1}xxx`
+    )
+  )
+}
+
+function replaceApplyWithPlaceholders (rules: string[]): string[] {
+  return rules.map(rule =>
+    rule.replace(
+      /@apply\s+--[A-Za-z0-9-_]+-([0-9]+)/gm,
+      (match, p1) => `xxx${p1}xxx`
+    )
+  )
+}
+
 export function inline (
@@ -60,19 +78,8 @@ quasi: any,
   let rules = parseCSS(`.${name}-${hash} { ${src} }`)
+  if (inlineVars || hasApply) {
+    rules = replaceVarsWithPlaceholders(rules)
+  }
   if (hasApply) {
-    rules = rules.map(rule =>
-      rule.replace(
-        /@apply\s+--[A-Za-z0-9-_]+-([0-9]+)/gm,
-        (match, p1) => `xxx${p1}xxx`
-      )
-    )
+    rules = replaceApplyWithPlaceholders(rules)
   }
-  if (inlineVars || hasApply) {
-    rules = rules.map(rule =>
-      rule.replace(
-        /var\(--[A-Za-z0-9-_]+-([0-9]+)\)/gm,
-        (match, p1) => `xxx${p1}xxx`
-      )
-    )
-  }
-
   return { hash, name, rules, isStatic: !hasApply && !inlineVars }
@@ -84,7 +91,8 @@ }
   identifierName?: string,
-  prefix: string
+  prefix: string,
+  inlineVars: boolean
 ): { hash: string, name: string, rules: string[] } {
-  let strs = quasi.quasis.map(x => x.value.cooked)
-  let hash = hashArray([...strs])
-  let name = getName(
+  const strs = quasi.quasis.map(x => x.value.cooked)
+  const hash = hashArray([...strs])
+  const name = getName(
     extractNameFromProperty(strs.join('xxx')),
@@ -94,8 +102,24 @@ identifierName,
   )
-
-  return {
-    hash,
-    name,
-    rules: [parseCSS(`{ ${strs.join('').trim()} }`).join('').trim()]
+  let hasApplyOrVar = false
+  const src = strs
+    .reduce((arr, str, i) => {
+      arr.push(str)
+      if (i !== quasi.expressions.length) {
+        hasApplyOrVar = true
+        // todo - test for preceding @apply
+        let applyMatch = /@apply\s*$/gm.exec(str)
+        if (applyMatch) {
+          arr.push(`--name-hash-${i}`)
+        } else arr.push(`var(--name-hash-${i})`)
+      }
+      return arr
+    }, [])
+    .join('')
+    .trim()
+  let rules = parseCSS(`{ ${src} }`, { nested: false })
+  if (hasApplyOrVar) {
+    rules = replaceVarsWithPlaceholders(rules)
+    rules = replaceApplyWithPlaceholders(rules)
   }
+  return { hash, name, rules, isStatic: !hasApplyOrVar && !inlineVars }
 }
@@ -105,23 +129,51 @@
   quasi: any,
-  identifierName?: string,
-  prefix: string
-): { hash: string, name: string, rules: string[] } {
+  inlineVars: boolean
+): { rules: string[], isStatic: boolean } {
   let strs = quasi.quasis.map(x => x.value.cooked)
-  let hash = hashArray([...strs])
-  let name = getName(
-    extractNameFromProperty(strs.join('xxx')),
-    identifierName,
-    prefix
-  )
-  return {
-    hash,
-    name,
-    rules: [
-      parseCSS(`@font-face {${strs.join('').trim()}}`, {
-        nested: false
-      })
-        .join('')
-        .trim()
-    ]
+  let hasVar
+  let src = strs
+    .reduce((arr, str, i) => {
+      arr.push(str)
+      if (i !== quasi.expressions.length) {
+        hasVar = true
+        arr.push(`var(--name-hash-${i})`)
+      }
+      return arr
+    }, [])
+    .join('')
+    .trim()
+  let rules = parseCSS(`@font-face {${src}}`)
+  if (hasVar) {
+    rules = replaceVarsWithPlaceholders(rules)
   }
+  return { rules, isStatic: !inlineVars && !hasVar }
 }
+
+export function injectGlobal (
+  quasi: any,
+  inlineVars: boolean
+): { rules: string[], isStatic: boolean } {
+  let strs = quasi.quasis.map(x => x.value.cooked)
+  let hasApplyOrVar = false
+  let src = strs
+    .reduce((arr, str, i) => {
+      arr.push(str)
+      if (i !== quasi.expressions.length) {
+        hasApplyOrVar = true
+        // todo - test for preceding @apply
+        let applyMatch = /@apply\s*$/gm.exec(str)
+        if (applyMatch) {
+          arr.push(`--name-hash-${i}`)
+        } else arr.push(`var(--name-hash-${i})`)
+      }
+      return arr
+    }, [])
+    .join('')
+    .trim()
+  let rules = parseCSS(src)
+  if (hasApplyOrVar) {
+    rules = replaceVarsWithPlaceholders(rules)
+    rules = replaceApplyWithPlaceholders(rules)
+  }
+  return { rules, isStatic: !inlineVars && !hasApplyOrVar }
+}

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

69131

increased by10.52%

Lines of code

1820

increased by10.17%

No dependency changes