stylelint-plugin-defensive-css 0.0.1 → 0.0.4

package/README.md

@@ -55,7 +55,7 @@ Enable this rule in order to prevent unintentional repeating background.
   "rules": {
     "plugin/use-defensive-css": [
       true,
-      { ..., "background-repeat": true }
+      { "background-repeat": true }
     ]
   }
 }
@@ -98,7 +98,7 @@ Enable this rule in order to require fallbacks values for custom properties.
   "rules": {
     "plugin/use-defensive-css": [
       true,
-      { ..., "custom-property-fallbacks": true }
+      { "custom-property-fallbacks": true }
     ]
   }
 }
@@ -133,7 +133,7 @@ Enable this rule in order to require all flex rows to have a flex-wrap value.
   "rules": {
     "plugin/use-defensive-css": [
       true,
-      { ..., "flex-wrapping": true }
+      { "flex-wrapping": true }
     ]
   }
 }
@@ -178,7 +178,7 @@ Enable this rule in order to require all vendor-prefixed selectors to be split i
   "rules": {
     "plugin/use-defensive-css": [
       true,
-      { ..., "vendor-prefix-grouping": true }
+      { "vendor-prefix-grouping": true }
     ]
   }
 }

package/package.json

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

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

@@ -15,7 +15,7 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
     return 'Flex rows must have a `flex-wrap: wrap;` or `flex-wrap: wrap-reverse` declaration.';
   },
   vendorPrefixWGrouping() {
-    return `It's not recommended to group selectors that are meant to work with different browsers. Instead, split them to separate rules.`;
+    return `Separate different vendor prefixes into their own rules.`;
   },
 });
 

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

@@ -8,20 +8,23 @@ const {
 } = require('../../utils/findShorthandBackgroundRepeat');
 const { findVendorPrefixes } = require('../../utils/findVendorPrefixes');
 
-const ruleFunction = (_, options) => {
-  let isLastStyleDeclaration = false;
-  const backgroundRepeatProps = {
-    hasBackgroundImage: false,
-    isMissingBackgroundRepeat: true,
-    nodeToReport: undefined,
-  };
-  const flexWrappingProps = {
-    isDisplayFlex: false,
-    isFlexRow: true,
-    isMissingFlexWrap: true,
-    nodeToReport: undefined,
-  };
+const defaultBackgroundRepeatProps = {
+  hasBackgroundImage: false,
+  isMissingBackgroundRepeat: true,
+  nodeToReport: undefined,
+};
+const defaultFlexWrappingProps = {
+  isDisplayFlex: false,
+  isFlexRow: true,
+  isMissingFlexWrap: true,
+  nodeToReport: undefined,
+};
 
+let backgroundRepeatProps = { ...defaultBackgroundRepeatProps };
+let flexWrappingProps = { ...defaultFlexWrappingProps };
+let isLastStyleDeclaration = false;
+
+const ruleFunction = (_, options) => {
   return (root, result) => {
     const validOptions = stylelint.utils.validateOptions(result, ruleName);
 
@@ -30,12 +33,9 @@ const ruleFunction = (_, options) => {
     }
 
     root.walkDecls((decl) => {
-      if (
+      isLastStyleDeclaration =
         JSON.stringify(decl) ===
-        JSON.stringify(decl.parent.nodes[decl.parent.nodes.length - 1])
-      ) {
-        isLastStyleDeclaration = true;
-      }
+        JSON.stringify(decl.parent.nodes[decl.parent.nodes.length - 1]);
 
       /* BACKGROUND REPEAT  */
       if (options?.['background-repeat']) {
@@ -55,23 +55,26 @@ const ruleFunction = (_, options) => {
           backgroundRepeatProps.isMissingBackgroundRepeat = false;
         }
 
-        if (
-          isLastStyleDeclaration &&
-          Object.values(backgroundRepeatProps).every((prop) => prop)
-        ) {
-          stylelint.utils.report({
-            message: ruleMessages.backgroundRepeat(),
-            node: decl.parent,
-            result,
-            ruleName,
-          });
+        if (isLastStyleDeclaration) {
+          if (Object.values(backgroundRepeatProps).every((prop) => prop)) {
+            stylelint.utils.report({
+              message: ruleMessages.backgroundRepeat(),
+              node: decl.parent,
+              result,
+              ruleName,
+            });
+          }
+
+          backgroundRepeatProps = { ...defaultBackgroundRepeatProps };
         }
+
+        return;
       }
 
       /* CUSTOM PROPERTY FALLBACKS */
       if (options?.['custom-property-fallbacks']) {
         if (decl.value.includes('var(--') && !decl.value.includes(',')) {
-          stylelint.utils.report({
+          return stylelint.utils.report({
             message: ruleMessages.customPropertyFallbacks(),
             node: decl,
             result,
@@ -87,7 +90,7 @@ const ruleFunction = (_, options) => {
           flexWrappingProps.nodeToReport = decl;
         }
 
-        if (decl.prop === 'flex-direction' && decl.value.startsWith('column')) {
+        if (decl.prop === 'flex-direction' && decl.value.includes('column')) {
           flexWrappingProps.isFlexRow = false;
         }
 
@@ -95,17 +98,20 @@ const ruleFunction = (_, options) => {
           flexWrappingProps.isMissingFlexWrap = false;
         }
 
-        if (
-          isLastStyleDeclaration &&
-          Object.values(flexWrappingProps).every((prop) => prop)
-        ) {
-          stylelint.utils.report({
-            message: ruleMessages.flexWrapping(),
-            node: flexWrappingProps.nodeToReport,
-            result,
-            ruleName,
-          });
+        if (isLastStyleDeclaration) {
+          if (Object.values(flexWrappingProps).every((prop) => prop)) {
+            stylelint.utils.report({
+              message: ruleMessages.flexWrapping(),
+              node: flexWrappingProps.nodeToReport,
+              result,
+              ruleName,
+            });
+          }
+
+          flexWrappingProps = { ...defaultFlexWrappingProps };
         }
+
+        return;
       }
 
       /* GROUPING VENDOR PREFIXES */
@@ -113,7 +119,7 @@ const ruleFunction = (_, options) => {
         const hasMultiplePrefixes = findVendorPrefixes(decl.parent.selector);
 
         if (hasMultiplePrefixes) {
-          stylelint.utils.report({
+          return stylelint.utils.report({
             message: ruleMessages.vendorPrefixWGrouping(),
             node: decl.parent,
             result,