fix: correct calculation of pseudo-class selectors

package.json

@@ -26,7 +26,7 @@
     "javascript-natural-sort": "0.7.1",
     "lodash": "4.17.10",
     "normalize.css": "8.0.0",
-    "specificity": "0.4.1",
+    "parsel-js": "^1.0.1",
     "webfontloader": "1.6.28"
   },
   "devDependencies": {

src/scripts/main.js

@@ -4,7 +4,7 @@ import naturalSort from 'javascript-natural-sort';
 import uniq from 'lodash/uniq';
 import indexOf from 'lodash/indexOf';
 import postcss from 'postcss';
-import {calculate} from 'specificity';
+import { specificity } from 'parsel-js';
 
 import {
   renderMainChart,
@@ -38,9 +38,7 @@ const isValidAtRule = (rule) =>
 
 const isValidSelector = (rule) => rule.parent.type === 'root' || isValidAtRule(rule);
 
-const removeInlineStyleCategory = (str) => str.replace('0,', '');
-
-// build up comma-separted string with all valid selectors
+// build up array with all valid selectors
 const getAllSelectors = () => {
   const selectors = [];
 
@@ -50,7 +48,7 @@ const getAllSelectors = () => {
     }
   });
 
-  return selectors.join();
+  return selectors;
 };
 
 const getSortedKeysByValue = (obj) => Object.keys(obj).sort((keyA, keyB) => -(obj[keyA] - obj[keyB]));
@@ -88,26 +86,32 @@ elementForm.addEventListener('submit', (event) => {
   elementErrorMessage.classList.add(classFormErrorHidden);
 
   // calculate data for main chart
-  specificities = calculate(getAllSelectors());
+  specificities = getAllSelectors().map((selector) => {
+    return {
+      selector,
+      specificity: specificity(selector).join()
+    };
+  });
+
   mainChartYAxisCategories = uniq(
-    specificities.map((element) => removeInlineStyleCategory(element.specificity))
+    specificities.map((element) => element.specificity)
   ).sort(naturalSort);
 
   specificities.forEach((element, index) => {
-    if (element.specificity.indexOf('0,0,0,') === 0) {
+    if (element.specificity.indexOf('0,0,') === 0) {
       mainChartDataSeries.elementCategory.push([
         index,
-        indexOf(mainChartYAxisCategories, removeInlineStyleCategory(element.specificity))
+        indexOf(mainChartYAxisCategories, element.specificity)
       ]);
-    } else if (element.specificity.indexOf('0,0,') === 0) {
+    } else if (element.specificity.indexOf('0,') === 0) {
       mainChartDataSeries.classCategory.push([
         index,
-        indexOf(mainChartYAxisCategories, removeInlineStyleCategory(element.specificity))
+        indexOf(mainChartYAxisCategories, element.specificity)
       ]);
     } else {
       mainChartDataSeries.idCategory.push([
         index,
-        indexOf(mainChartYAxisCategories, removeInlineStyleCategory(element.specificity))
+        indexOf(mainChartYAxisCategories, element.specificity)
       ]);
     }
 
@@ -116,7 +120,7 @@ elementForm.addEventListener('submit', (event) => {
 
   specificityUsagesDataSeries = getSortedKeysByValue(specificityUsages).map((element) => {
     return {
-      name: removeInlineStyleCategory(element),
+      name: element,
       y: specificityUsages[element]
     };
   });

yarn.lock

@@ -4415,6 +4415,11 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parsel-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parsel-js/-/parsel-js-1.0.1.tgz#0a48ab55f5bd2adc9a2924f60c16d92eaddceab4"
+  integrity sha512-4K2JCGQ0c19sxMvjx5LUriTJJDtweWw2Zs/adjl0QIKPgYuawVXEMv1SsPd2qwpP83xHn93cOJho6agHiTaHtA==
+
 parseurl@~1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
@@ -5568,7 +5573,7 @@ spdy@^3.4.1:
     select-hose "^2.0.0"
     spdy-transport "^2.0.18"
 
-specificity@0.4.1, specificity@^0.4.0:
+specificity@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"