specificity - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

dist/specificity.js

@@ -49,9 +49,11 @@ (function (global, factory) {
 			attributeRegex = /(\[[^\]]+\])/g,
-			idRegex = /(#[^\#\s\+>~\.\[:]+)/g,
-			classRegex = /(\.[^\s\+>~\.\[:]+)/g,
+			idRegex = /(#[^\#\s\+>~\.\[:\)]+)/g,
+			classRegex = /(\.[^\s\+>~\.\[:\)]+)/g,
 			pseudoElementRegex = /(::[^\s\+>~\.\[:]+|:first-line|:first-letter|:before|:after)/gi,
 			// A regex for pseudo classes with brackets - :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-type(), :lang()
-			pseudoClassWithBracketsRegex = /(:[\w-]+\([^\)]*\))/gi,
+			// The negation psuedo class (:not) is filtered out because specificity is calculated on its argument
+			// :global and :local are filtered out - they look like psuedo classes but are an identifier for CSS Modules
+			pseudoClassWithBracketsRegex = /(:(?!not|global|local)[\w-]+\([^\)]*\))/gi,
 			// A regex for other pseudo classes, which don't have brackets
-			pseudoClassRegex = /(:[^\s\+>~\.\[:]+)/g,
+			pseudoClassRegex = /(:(?!not|global|local)[^\s\+>~\.\[:]+)/g,
 			elementRegex = /([^\s\+>~\.\[:]+)/g;
@@ -107,10 +109,2 @@
 
-		// Remove the negation psuedo-class (:not) but leave its argument because specificity is calculated on its argument
-		(function() {
-			var regex = /:not\(([^\)]*)\)/g;
-			if (regex.test(selector)) {
-				selector = selector.replace(regex, '     $1 ');
-			}
-		}());
-
 		// Remove anything after a left brace in case a user has pasted in a rule, not just a selector
@@ -152,2 +146,9 @@ (function() {
 
+		// Remove the negation psuedo-class (:not) but leave its argument because specificity is calculated on its argument
+	 	// Remove non-standard :local and :global CSS Module identifiers because they do not effect the specificity
+		selector = selector.replace(/:not/g, '    ');
+		selector = selector.replace(/:local/g, '      ');
+		selector = selector.replace(/:global/g, '       ');
+		selector = selector.replace(/[\(\)]/g, ' ');
+
 		// The only things left should be element selectors (type c)
@@ -154,0 +155,0 @@ findMatch(elementRegex, 'c');

package.json

 {
   "name": "specificity",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Calculate the specificity of a CSS selector",
@@ -5,0 +5,0 @@ "keywords": [

specificity.js

@@ -43,9 +43,11 @@ // Calculate the specificity for a selector by dividing it into simple selectors and counting them
 		attributeRegex = /(\[[^\]]+\])/g,
-		idRegex = /(#[^\#\s\+>~\.\[:]+)/g,
-		classRegex = /(\.[^\s\+>~\.\[:]+)/g,
+		idRegex = /(#[^\#\s\+>~\.\[:\)]+)/g,
+		classRegex = /(\.[^\s\+>~\.\[:\)]+)/g,
 		pseudoElementRegex = /(::[^\s\+>~\.\[:]+|:first-line|:first-letter|:before|:after)/gi,
 		// A regex for pseudo classes with brackets - :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-type(), :lang()
-		pseudoClassWithBracketsRegex = /(:[\w-]+\([^\)]*\))/gi,
+		// The negation psuedo class (:not) is filtered out because specificity is calculated on its argument
+		// :global and :local are filtered out - they look like psuedo classes but are an identifier for CSS Modules
+		pseudoClassWithBracketsRegex = /(:(?!not|global|local)[\w-]+\([^\)]*\))/gi,
 		// A regex for other pseudo classes, which don't have brackets
-		pseudoClassRegex = /(:[^\s\+>~\.\[:]+)/g,
+		pseudoClassRegex = /(:(?!not|global|local)[^\s\+>~\.\[:]+)/g,
 		elementRegex = /([^\s\+>~\.\[:]+)/g;
@@ -101,10 +103,2 @@
 
-	// Remove the negation psuedo-class (:not) but leave its argument because specificity is calculated on its argument
-	(function() {
-		var regex = /:not\(([^\)]*)\)/g;
-		if (regex.test(selector)) {
-			selector = selector.replace(regex, '     $1 ');
-		}
-	}());
-
 	// Remove anything after a left brace in case a user has pasted in a rule, not just a selector
@@ -146,2 +140,9 @@ (function() {
 
+	// Remove the negation psuedo-class (:not) but leave its argument because specificity is calculated on its argument
+ 	// Remove non-standard :local and :global CSS Module identifiers because they do not effect the specificity
+	selector = selector.replace(/:not/g, '    ');
+	selector = selector.replace(/:local/g, '      ');
+	selector = selector.replace(/:global/g, '       ');
+	selector = selector.replace(/[\(\)]/g, ' ');
+
 	// The only things left should be element selectors (type c)
@@ -148,0 +149,0 @@ findMatch(elementRegex, 'c');

test/test.js

@@ -57,2 +57,11 @@ import { describe, it } from 'mocha';
 		{ selector: 'ul#nav#nav-main li.active a', expected: '0,2,1,3' },
+
+		// Test CSS Modules https://github.com/css-modules/css-modules
+		// Whilst they are not part of the CSS spec, this calculator can support them without breaking results for standard selectors
+		{ selector: '.root :global .text', expected: '0,0,2,0' },
+		{ selector: '.localA :global .global-b :local(.local-c) .global-d', expected: '0,0,4,0' },
+		{ selector: '.localA :global .global-b .global-c :local(.localD.localE) .global-d', expected: '0,0,6,0' },
+		{ selector: '.localA :global(.global-b) .local-b', expected: '0,0,3,0' },
+		{ selector: ':local(:nth-child(2n) .test)', expected: '0,0,2,0' },
+		
 	].forEach(testCase => {
@@ -59,0 +68,0 @@ it(`calculate("${testCase.selector}")`, () => {

Fixed alerts

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

Improved metrics

Total package byte prevSize

37511

increased by5.27%

Lines of code

759

increased by1.34%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes