stylelint-plugin-defensive-css 0.1.0 → 0.3.0

package/README.md

@@ -123,7 +123,7 @@ div {
   "rules": {
     "plugin/use-defensive-css": [
       true,
-      { "custom-property-fallbacks": [true, { ignore: [/hel-/, 'theme-']}] }
+      { "custom-property-fallbacks": [true, { "ignore": [/hel-/, "theme-"] }] }
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-defensive-css",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A Stylelint plugin to enforce defensive CSS best practices.",
   "main": "src/index.js",
   "files": [

package/src/rules/use-defensive-css/index.js

@@ -7,6 +7,7 @@ const {
   findShorthandBackgroundRepeat,
 } = require('../../utils/findShorthandBackgroundRepeat');
 const { findVendorPrefixes } = require('../../utils/findVendorPrefixes');
+const { findCustomProperties } = require('../../utils/findCustomProperties');
 
 const defaultBackgroundRepeatProps = {
   hasBackgroundImage: false,
@@ -71,14 +72,20 @@ const ruleFunction = (_, options) => {
 
       /* CUSTOM PROPERTY FALLBACKS */
       if (options?.['custom-property-fallbacks']) {
-        if (decl.value.includes('var(--') && !decl.value.includes(',')) {
+        const propertiesWithoutFallback = findCustomProperties(decl.value);
+
+        if (propertiesWithoutFallback.length) {
           if (Array.isArray(options?.['custom-property-fallbacks'])) {
             if (options['custom-property-fallbacks'][0]) {
               const patterns = options['custom-property-fallbacks'][1].ignore;
-              const patternMatched = patterns.some((pattern) =>
-                typeof pattern === 'string'
-                  ? new RegExp(pattern).test(decl.value.slice(4, -1))
-                  : pattern.test(decl.value.slice(4, -1)),
+              const patternMatched = propertiesWithoutFallback.some(
+                (property) => {
+                  return patterns.some((pattern) =>
+                    typeof pattern === 'string'
+                      ? new RegExp(pattern).test(property)
+                      : pattern.test(property),
+                  );
+                },
               );
 
               if (patternMatched) {

package/src/utils/findCustomProperties.js

@@ -0,0 +1,14 @@
+const expression = /var\(.+?\)/g;
+
+function findCustomProperties(value) {
+  if (!value) return false;
+
+  let propertiesFound = [...value.trim().matchAll(expression)];
+  return propertiesFound
+    .map(([property]) => (property.includes(',') ? undefined : property))
+    .filter((value) => value);
+}
+
+module.exports = {
+  findCustomProperties,
+};

package/src/utils/findVendorPrefixes.js

@@ -1,9 +1,9 @@
-const expression = /-[-moz-|-ms-|-o-|-webkit-|]+-/g;
+const expression = /-[moz|ms|o|webkit|]+-/g;
 
 function findVendorPrefixes(selector) {
   if (!selector) return false;
 
-  let prefixesFound = [...selector.matchAll(expression)];
+  let prefixesFound = [...selector.trim().matchAll(expression)];
   return prefixesFound.length > 1;
 }