stylelint-plugin-defensive-css 0.10.0 → 0.10.2

package/README.md

@@ -364,7 +364,7 @@ div {
 }
 
 div {
-  overflow: hidden; /* No overscroll-behavior is needed in the case of hidden */
+  overflow: hidden; /* No scrollbar-gutter is needed in the case of hidden */
 }
 
 div {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-defensive-css",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "A Stylelint plugin to enforce defensive CSS best practices.",
   "main": "src/index.js",
   "files": [
@@ -35,16 +35,16 @@
     "stylelint": "^14.0.0 || ^15.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
+    "@commitlint/cli": "^18.2.0",
+    "@commitlint/config-conventional": "^18.1.0",
     "eslint": "^8.35.0",
     "husky": "^8.0.0",
     "jest": "^29.4.3",
     "jest-cli": "^29.4.3",
     "jest-preset-stylelint": "^6.1.0",
-    "lint-staged": "^13.1.2",
-    "prettier": "^2.8.4",
-    "prettier-eslint": "^15.0.1",
+    "lint-staged": "^15.0.2",
+    "prettier": "^3.0.3",
+    "prettier-eslint": "^16.1.2",
     "stylelint": "^15.2.0"
   },
   "lint-staged": {

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

@@ -6,25 +6,25 @@ const ruleName = 'plugin/use-defensive-css';
 
 const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
   accidentalHover() {
-    return 'To prevent accidental hover states on mobile devices, wrap :hover selectors inside a @media (hover: hover) { ...your styles } query.';
+    return 'To prevent accidental hover states on mobile devices, wrap `:hover` selectors inside a `@media (hover: hover) { ...your styles }` query. Learn more: https://defensivecss.dev/tip/hover-media/';
   },
   backgroundRepeat() {
-    return 'Ensure a background-repeat property is defined when using a background image.';
+    return 'Whenever setting a background image, be sure to explicitly define a `background-repeat` value. Learn more: https://defensivecss.dev/tip/bg-repeat/';
   },
   customPropertyFallbacks() {
-    return 'Ensure that any custom properties have a fallback value.';
+    return 'Provide a fallback value for a custom property like `var(--your-custom-property, #000000)` to prevent issues in the event the custom property is not defined. Learn more: https://defensivecss.dev/tip/css-variable-fallback/';
   },
   flexWrapping() {
-    return 'Flex rows must have a `flex-wrap` value defined.`';
-  },
-  scrollbarGutter() {
-    return `Containers with an auto or scroll 'overflow' must also have a 'scrollbar-gutter' property defined.`;
+    return 'Whenever setting an element to `display: flex` a `flex-wrap` value must be defined. Set `flex-wrap: nowrap` for the default behavior. Learn more: https://defensivecss.dev/tip/flexbox-wrapping/';
   },
   scrollChaining() {
-    return `Containers with an auto or scroll 'overflow' must also have an 'overscroll-behavior' property defined.`;
+    return 'To prevent scroll chaining between contexts, any container with a scrollable overflow must have a `overscroll-behavior` value defined. Learn more: https://defensivecss.dev/tip/scroll-chain/';
+  },
+  scrollbarGutter() {
+    return 'To prevent potential layout shifts, any container with a scrollable overflow must have a `scrollbar-gutter` value defined. Learn more: https://defensivecss.dev/tip/scrollbar-gutter/';
   },
   vendorPrefixWGrouping() {
-    return `Separate different vendor prefixes into their own rules.`;
+    return `To prevent invalid rules in unsupported environments, split each vendor prefix into its own, individual rule. Learn more: https://defensivecss.dev/tip/grouping-selectors/`;
   },
 });
 

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

@@ -198,65 +198,65 @@ const ruleFunction = (_, options) => {
         }
       }
 
-      /* SCROLLBAR GUTTER */
-      if (options?.['scrollbar-gutter']) {
+      /* SCROLL CHAINING */
+      if (options?.['scroll-chaining']) {
         if (
           overflowProperties.includes(decl.prop) &&
           (decl.value.includes('auto') || decl.value.includes('scroll'))
         ) {
-          scrollbarGutterProps.hasOverflow = true;
-          scrollbarGutterProps.nodeToReport = decl;
+          scrollChainingProps.hasOverflow = true;
+          scrollChainingProps.nodeToReport = decl;
         }
 
-        if (decl.prop.includes('scrollbar-gutter')) {
-          scrollbarGutterProps.hasScrollbarGutter = true;
+        if (decl.prop.includes('overscroll-behavior')) {
+          scrollChainingProps.hasOverscrollBehavior = true;
         }
 
         if (isLastStyleDeclaration) {
           if (
-            scrollbarGutterProps.hasOverflow &&
-            !scrollbarGutterProps.hasScrollbarGutter
+            scrollChainingProps.hasOverflow &&
+            !scrollChainingProps.hasOverscrollBehavior
           ) {
             stylelint.utils.report({
-              message: ruleMessages.scrollbarGutter(),
-              node: scrollbarGutterProps.nodeToReport,
+              message: ruleMessages.scrollChaining(),
+              node: scrollChainingProps.nodeToReport,
               result,
               ruleName,
             });
           }
 
-          scrollbarGutterProps = { ...defaultScrollbarGutterProps };
+          scrollChainingProps = { ...defaultScrollChainingProps };
         }
       }
 
-      /* SCROLL CHAINING */
-      if (options?.['scroll-chaining']) {
+      /* SCROLLBAR GUTTER */
+      if (options?.['scrollbar-gutter']) {
         if (
           overflowProperties.includes(decl.prop) &&
           (decl.value.includes('auto') || decl.value.includes('scroll'))
         ) {
-          scrollChainingProps.hasOverflow = true;
-          scrollChainingProps.nodeToReport = decl;
+          scrollbarGutterProps.hasOverflow = true;
+          scrollbarGutterProps.nodeToReport = decl;
         }
 
-        if (decl.prop.includes('overscroll-behavior')) {
-          scrollChainingProps.hasOverscrollBehavior = true;
+        if (decl.prop.includes('scrollbar-gutter')) {
+          scrollbarGutterProps.hasScrollbarGutter = true;
         }
 
         if (isLastStyleDeclaration) {
           if (
-            scrollChainingProps.hasOverflow &&
-            !scrollChainingProps.hasOverscrollBehavior
+            scrollbarGutterProps.hasOverflow &&
+            !scrollbarGutterProps.hasScrollbarGutter
           ) {
             stylelint.utils.report({
-              message: ruleMessages.scrollChaining(),
-              node: scrollChainingProps.nodeToReport,
+              message: ruleMessages.scrollbarGutter(),
+              node: scrollbarGutterProps.nodeToReport,
               result,
               ruleName,
             });
           }
 
-          scrollChainingProps = { ...defaultScrollChainingProps };
+          scrollbarGutterProps = { ...defaultScrollbarGutterProps };
         }
       }