yuschick / stylelint-plugin-defensive-css

A Stylelint plugin for enforcing defensive CSS best practices.
https://defensivecss.dev/
MIT License
139 stars 4 forks source link

Flex-Wrapping: False Positive When Using Flex-Flow #13

Closed yuschick closed 1 year ago

yuschick commented 1 year ago

Describe the bug When using the flex-flow property and defining it to column, the flex-wrapping warning is still shown. However, when a flex in in any form of a column, the warning shouldn't be triggered.

To Reproduce

.content {
  display: flex;
  flex-flow: column;
}

.content-reverse {
  display: flex;
  flex-flow: column wrap;
}

Expected behavior When using flex-flow there should only be a warning from Stylelint if the direction is set to row and no wrap shorthand value is provided.

/* No linter warning */
.content {
  display: flex;
  flex-flow: column; 
}

/* No linter warning */
.content {
  display: flex;
  flex-flow: row wrap; 
  flex-flow: row nowrap; 
  flex-flow: row wrap-reverse; 
}

/* No linter warning */
.content {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap, wrap-reverse, nowrap;
}

/* Yes linter warning */
.content {
  display: flex;
  flex-flow: row; 
}
yuschick commented 1 year ago

Resolved in 0.8.0