jest-emotion - npm Package Compare versions

Comparing version 11.0.0-next.0 to 11.0.0-next.1

CHANGELOG.md

 # jest-emotion
 
+## 11.0.0-next.1
+
+### Patch Changes
+
+- [`e67a5be9`](https://github.com/emotion-js/emotion/commit/e67a5be9bffaa12f9ae0e366983dced4c3716f84) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@Andarist](https://github.com/Andarist)! - Take specificity into account when matching styles
+
+* [`e67a5be9`](https://github.com/emotion-js/emotion/commit/e67a5be9bffaa12f9ae0e366983dced4c3716f84) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@Andarist](https://github.com/Andarist)! - Match rules in declarations with component used as a selector
+* Updated dependencies []:
+  - @emotion/core@11.0.0-next.1
+
 ## 11.0.0-next.0
@@ -4,0 +14,0 @@

dist/jest-emotion.browser.cjs.js

@@ -11,2 +11,3 @@ 'use strict';
 var chalk = _interopDefault(require('chalk'));
+var specificity = require('specificity');
 
@@ -35,2 +36,6 @@ function defaultClassNameReplacer(className, index) {
 
+function last(arr) {
+  return arr.length > 0 ? arr[arr.length - 1] : undefined;
+}
+
 function flatMap(arr, iteratee) {
@@ -42,2 +47,9 @@ var _ref;
 
+function findLast(arr, predicate) {
+  for (var i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) {
+      return arr[i];
+    }
+  }
+}
 var RULE_TYPES = {
@@ -150,5 +162,9 @@ media: 'media',
 
-  var keyPatten = new RegExp("^(" + keys.join('|') + ")-");
+  var targetClassName = classNames.find(function (className) {
+    return /^e[a-z0-9]+$/.test(className);
+  });
+  var keyPattern = "(" + keys.join('|') + ")-";
+  var classNamesRegExp = new RegExp(targetClassName ? "^(" + keyPattern + "|" + targetClassName + ")" : "^" + keyPattern);
   var filteredClassNames = classNames.filter(function (className) {
-    return keyPatten.test(className);
+    return classNamesRegExp.test(className);
   });
@@ -227,3 +243,9 @@
     if (!target) {
-      return classNames.includes(selector.slice(1));
+      var lastCls = last(selector.split(' '));
+
+      if (!lastCls) {
+        return false;
+      }
+
+      return classNames.includes(lastCls.slice(1));
     } // check if selector (className) of specific css rule match target
@@ -291,11 +313,26 @@
 
-  var declaration = preparedRules.filter(function (rule) {
+  var result = preparedRules.filter(function (rule) {
     return rule.type === RULE_TYPES.rule && hasClassNames(classNames, rule.selectors, target);
-  }).reduce(function (decs, rule) {
-    return decs.concat(rule.declarations);
-  }, []).filter(function (dec) {
-    return dec.type === 'declaration' && dec.property === property;
+  }).reduce(function (acc, rule) {
+    var lastMatchingDeclaration = findLast(rule.declarations, function (dec) {
+      return dec.type === 'declaration' && dec.property === property;
+    });
+
+    if (!lastMatchingDeclaration) {
+      return acc;
+    }
+
+    return acc.concat(rule.selectors.map(function (selector) {
+      return {
+        selector: selector,
+        declaration: lastMatchingDeclaration
+      };
+    }));
+  }, []).sort(function (_ref, _ref2) {
+    var selectorA = _ref.selector;
+    var selectorB = _ref2.selector;
+    return specificity.compare(selectorA, selectorB);
   }).pop();
 
-  if (!declaration) {
+  if (!result) {
     return {
@@ -309,2 +346,3 @@ pass: false,
 
+  var declaration = result.declaration;
   var pass = valueMatches(declaration, value);
@@ -311,0 +349,0 @@

dist/jest-emotion.cjs.dev.js

@@ -11,2 +11,3 @@ 'use strict';
 var chalk = _interopDefault(require('chalk'));
+var specificity = require('specificity');
 
@@ -35,2 +36,6 @@ function defaultClassNameReplacer(className, index) {
 
+function last(arr) {
+  return arr.length > 0 ? arr[arr.length - 1] : undefined;
+}
+
 function flatMap(arr, iteratee) {
@@ -42,2 +47,9 @@ var _ref;
 
+function findLast(arr, predicate) {
+  for (var i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) {
+      return arr[i];
+    }
+  }
+}
 var RULE_TYPES = {
@@ -150,5 +162,9 @@ media: 'media',
 
-  var keyPatten = new RegExp("^(" + keys.join('|') + ")-");
+  var targetClassName = classNames.find(function (className) {
+    return /^e[a-z0-9]+$/.test(className);
+  });
+  var keyPattern = "(" + keys.join('|') + ")-";
+  var classNamesRegExp = new RegExp(targetClassName ? "^(" + keyPattern + "|" + targetClassName + ")" : "^" + keyPattern);
   var filteredClassNames = classNames.filter(function (className) {
-    return keyPatten.test(className);
+    return classNamesRegExp.test(className);
   });
@@ -227,3 +243,9 @@
     if (!target) {
-      return classNames.includes(selector.slice(1));
+      var lastCls = last(selector.split(' '));
+
+      if (!lastCls) {
+        return false;
+      }
+
+      return classNames.includes(lastCls.slice(1));
     } // check if selector (className) of specific css rule match target
@@ -291,11 +313,26 @@
 
-  var declaration = preparedRules.filter(function (rule) {
+  var result = preparedRules.filter(function (rule) {
     return rule.type === RULE_TYPES.rule && hasClassNames(classNames, rule.selectors, target);
-  }).reduce(function (decs, rule) {
-    return decs.concat(rule.declarations);
-  }, []).filter(function (dec) {
-    return dec.type === 'declaration' && dec.property === property;
+  }).reduce(function (acc, rule) {
+    var lastMatchingDeclaration = findLast(rule.declarations, function (dec) {
+      return dec.type === 'declaration' && dec.property === property;
+    });
+
+    if (!lastMatchingDeclaration) {
+      return acc;
+    }
+
+    return acc.concat(rule.selectors.map(function (selector) {
+      return {
+        selector: selector,
+        declaration: lastMatchingDeclaration
+      };
+    }));
+  }, []).sort(function (_ref, _ref2) {
+    var selectorA = _ref.selector;
+    var selectorB = _ref2.selector;
+    return specificity.compare(selectorA, selectorB);
   }).pop();
 
-  if (!declaration) {
+  if (!result) {
     return {
@@ -309,2 +346,3 @@ pass: false,
 
+  var declaration = result.declaration;
   var pass = valueMatches(declaration, value);
@@ -311,0 +349,0 @@

dist/jest-emotion.cjs.prod.js

@@ -11,3 +11,3 @@ "use strict";
 
-var _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _objectWithoutPropertiesLoose = _interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")), css = require("css"), chalk = _interopDefault(require("chalk"));
+var _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _objectWithoutPropertiesLoose = _interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")), css = require("css"), chalk = _interopDefault(require("chalk")), specificity = require("specificity");
 
@@ -30,2 +30,6 @@ function defaultClassNameReplacer(className, index) {
 
+function last(arr) {
+  return arr.length > 0 ? arr[arr.length - 1] : void 0;
+}
+
 function flatMap(arr, iteratee) {
@@ -36,2 +40,6 @@ var _ref;
 
+function findLast(arr, predicate) {
+  for (var i = arr.length - 1; i >= 0; i--) if (predicate(arr[i])) return arr[i];
+}
+
 var RULE_TYPES = {
@@ -115,4 +123,6 @@ media: "media",
   if (!keys.length) return "";
-  var keyPatten = new RegExp("^(" + keys.join("|") + ")-"), filteredClassNames = classNames.filter(function(className) {
-    return keyPatten.test(className);
+  var targetClassName = classNames.find(function(className) {
+    return /^e[a-z0-9]+$/.test(className);
+  }), keyPattern = "(" + keys.join("|") + ")-", classNamesRegExp = new RegExp(targetClassName ? "^(" + keyPattern + "|" + targetClassName + ")" : "^" + keyPattern), filteredClassNames = classNames.filter(function(className) {
+    return classNamesRegExp.test(className);
   });
@@ -158,3 +168,7 @@ if (!filteredClassNames.length) return "";
   return selectors.some(function(selector) {
-    return target ? target instanceof RegExp ? target.test(selector) : selector.includes(target) : classNames.includes(selector.slice(1));
+    if (!target) {
+      var lastCls = last(selector.split(" "));
+      return !!lastCls && classNames.includes(lastCls.slice(1));
+    }
+    return target instanceof RegExp ? target.test(selector) : selector.includes(target);
   });
@@ -188,10 +202,19 @@ }
   media && (preparedRules = getMediaRules(preparedRules, media));
-  var declaration = preparedRules.filter(function(rule) {
+  var result = preparedRules.filter(function(rule) {
     return rule.type === RULE_TYPES.rule && hasClassNames(classNames, rule.selectors, target);
-  }).reduce(function(decs, rule) {
-    return decs.concat(rule.declarations);
-  }, []).filter(function(dec) {
-    return "declaration" === dec.type && dec.property === property;
+  }).reduce(function(acc, rule) {
+    var lastMatchingDeclaration = findLast(rule.declarations, function(dec) {
+      return "declaration" === dec.type && dec.property === property;
+    });
+    return lastMatchingDeclaration ? acc.concat(rule.selectors.map(function(selector) {
+      return {
+        selector: selector,
+        declaration: lastMatchingDeclaration
+      };
+    })) : acc;
+  }, []).sort(function(_ref, _ref2) {
+    var selectorA = _ref.selector, selectorB = _ref2.selector;
+    return specificity.compare(selectorA, selectorB);
   }).pop();
-  if (!declaration) return {
+  if (!result) return {
     pass: !1,
@@ -202,3 +225,3 @@ message: function() {
   };
-  var pass = valueMatches(declaration, value);
+  var declaration = result.declaration, pass = valueMatches(declaration, value);
   return {
@@ -205,0 +228,0 @@ pass: pass,

package.json

 {
   "name": "jest-emotion",
-  "version": "11.0.0-next.0",
+  "version": "11.0.0-next.1",
   "description": "Jest utilities for emotion",
@@ -20,6 +20,7 @@ "main": "dist/jest-emotion.cjs.js",
     "chalk": "^2.4.1",
-    "css": "^2.2.1"
+    "css": "^2.2.1",
+    "specificity": "^0.4.1"
   },
   "devDependencies": {
-    "@emotion/core": "^11.0.0-next.0",
+    "@emotion/core": "^11.0.0-next.1",
     "dtslint": "^0.3.0",
@@ -26,0 +27,0 @@ "emotion": "^11.0.0-next.0",

src/matchers.js

 // @flow
 import chalk from 'chalk'
 import * as css from 'css'
+import * as specificity from 'specificity'
 import {
@@ -10,2 +11,3 @@ getClassNamesFromNodes,
   getMediaRules,
+  findLast,
   RULE_TYPES
@@ -57,3 +59,3 @@ } from './utils'
   }
-  const declaration = preparedRules
+  const result = preparedRules
     .filter(
@@ -64,7 +66,23 @@ rule =>
     )
-    .reduce((decs, rule) => decs.concat(rule.declarations), [])
-    .filter(dec => dec.type === 'declaration' && dec.property === property)
+    .reduce((acc, rule) => {
+      const lastMatchingDeclaration = findLast(
+        rule.declarations,
+        dec => dec.type === 'declaration' && dec.property === property
+      )
+      if (!lastMatchingDeclaration) {
+        return acc
+      }
+      return acc.concat(
+        rule.selectors.map(selector => ({
+          selector,
+          declaration: lastMatchingDeclaration
+        }))
+      )
+    }, [])
+    .sort(({ selector: selectorA }, { selector: selectorB }) =>
+      specificity.compare(selectorA, selectorB)
+    )
     .pop()
 
-  if (!declaration) {
+  if (!result) {
     return {
@@ -76,2 +94,3 @@ pass: false,
 
+  const { declaration } = result
   const pass = valueMatches(declaration, value)
@@ -78,0 +97,0 @@

src/utils.js

 // @flow
 
+function last(arr) {
+  return arr.length > 0 ? arr[arr.length - 1] : undefined
+}
+
 function flatMap(arr, iteratee) {
@@ -7,2 +11,10 @@ return [].concat(...arr.map(iteratee))
 
+export function findLast<T>(arr: T[], predicate: T => boolean) {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) {
+      return arr[i]
+    }
+  }
+}
+
 export const RULE_TYPES = {
@@ -126,6 +138,13 @@ media: 'media',
 
-  let keyPatten = new RegExp(`^(${keys.join('|')})-`)
+  let targetClassName = classNames.find(className =>
+    /^e[a-z0-9]+$/.test(className)
+  )
+  let keyPattern = `(${keys.join('|')})-`
+  let classNamesRegExp = new RegExp(
+    targetClassName ? `^(${keyPattern}|${targetClassName})` : `^${keyPattern}`
+  )
   let filteredClassNames = classNames.filter(className =>
-    keyPatten.test(className)
+    classNamesRegExp.test(className)
   )
+
   if (!filteredClassNames.length) {
@@ -205,3 +224,7 @@ return ''
     if (!target) {
-      return classNames.includes(selector.slice(1))
+      const lastCls = last(selector.split(' '))
+      if (!lastCls) {
+        return false
+      }
+      return classNames.includes(lastCls.slice(1))
     }
@@ -208,0 +231,0 @@ // check if selector (className) of specific css rule match target

types/tsconfig.json

@@ -18,5 +18,2 @@ {
     "target": "es5",
-    "typeRoots": [
-      "../"
-    ],
     "types": []
@@ -23,0 +20,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68205

increased by7.32%

Lines of code

1652

increased by8.12%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedspecificity@^0.4.1

• + Addedspecificity@0.4.1(transitive)