stylelint-plugin-defensive-css 0.5.0 → 0.7.0

package/README.md

@@ -23,27 +23,21 @@ npm i stylelint-plugin-defensive-css --save-dev
 yarn add stylelint-plugin-defensive-css --dev
 ```
 
-With the plugin installed, the rule(s) can be added to the project's Stylelint
-configuration.
-
-```json
-{
-  "plugins": ["stylelint-plugin-defensive-css"],
-  "rules": {
-    "plugin/use-defensive-css": [true, { "severity": "warning" }]
-  }
-}
-```
+With the plugin installed, the individual rule(s) can be added to the project's
+Stylelint configuration.
 
 ## Rules / Options
 
 The plugin provides multiple rules that can be toggled on and off as needed.
 
-[Accidental Hover](#accidental-hover) -
-[Background-Repeat](#background-repeat) -
-[Custom Property Fallbacks](#custom-property-fallbacks) -
-[Flex Wrapping](#flex-wrapping) - [Scroll Chaining](#scroll-chaining) -
-[Vendor Prefix Grouping](#vendor-prefix-grouping)
+1. [Accidental Hover](#accidental-hover)
+2. [Background-Repeat](#background-repeat)
+3. [Custom Property Fallbacks](#custom-property-fallbacks)
+4. [Flex Wrapping](#flex-wrapping)
+5. [Scroll Chaining](#scroll-chaining)
+6. [Vendor Prefix Grouping](#vendor-prefix-grouping)
+
+---
 
 ### Accidental Hover
 
@@ -221,8 +215,8 @@ div {
 CSS flexbox is one of the most useful CSS layout features nowadays. It’s
 tempting to add `display: flex` to a wrapper and have the child items ordered
 next to each other. The thing is when there is not enough space, those child
-items won’t wrap into a new line by default. We need to change that behavior
-with `flex-wrap: wrap`.
+items won’t wrap into a new line by default. We need to either change that
+behavior with `flex-wrap: wrap` or explicitly define `nowrap` on the container.
 
 Enable this rule in order to require all flex rows to have a flex-wrap value.
 
@@ -241,6 +235,10 @@ div {
   display: flex;
   flex-wrap: wrap;
 }
+div {
+  display: flex;
+  flex-wrap: nowrap;
+}
 div {
   display: flex;
   flex-direction: row-reverse;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-defensive-css",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "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 'Ensure that any custom properties have a fallback value.';
   },
   flexWrapping() {
-    return 'Flex rows must have a `flex-wrap: wrap;` or `flex-wrap: wrap-reverse` declaration.';
+    return 'Flex rows must have a `flex-wrap` value defined.`';
   },
   scrollChaining() {
     return `Containers with an auto or scroll 'overflow' must also have an 'overscroll-behavior' property defined.`;

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

@@ -33,13 +33,12 @@ let isLastStyleDeclaration = false;
 let isWrappedInHoverAtRule = false;
 
 function traverseParentRules(parent) {
-  console.log({ parent });
   if (parent.parent.type === 'root') {
     return;
   }
 
   if (parent.parent.type === 'atrule') {
-    if (parent.parent.params.includes('hover: hover')) {
+    if (parent.parent.params && parent.parent.params.includes('hover: hover')) {
       isWrappedInHoverAtRule = true;
     } else {
       traverseParentRules(parent.parent);
@@ -64,7 +63,7 @@ const ruleFunction = (_, options) => {
       if (options?.['accidental-hover']) {
         const parent = decl.parent;
         const selector = parent.selector;
-        const isHoverSelector = selector.includes(':hover');
+        const isHoverSelector = selector?.includes(':hover');
         isWrappedInHoverAtRule = false;
 
         if (isHoverSelector) {
@@ -159,7 +158,7 @@ const ruleFunction = (_, options) => {
           flexWrappingProps.isFlexRow = false;
         }
 
-        if (decl.prop === 'flex-wrap' && decl.value.startsWith('wrap')) {
+        if (decl.prop === 'flex-wrap') {
           flexWrappingProps.isMissingFlexWrap = false;
         }