Enforcing Full Flex Rules using Stylelint for IE11 Support

When using Flex, we discovered we needed to write out the full rules to support IE11. Otherwise, IE11 will do some funky things with the styling, and cause a bunch of broken modals for us. This was listed in flexbug #8, and instead of remembering that we had to do it - we figured it made sense to just enforce it at the linting level. It's pretty straight forward, but it did take a while to figure out as we weren't super familiar with custom rules.

This is our example .stylelintrc - We added the flex rule under "declaration-property-value-whitelist"

{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-hex-case": "upper",
    "color-hex-length": "long",
    "at-rule-no-unknown": null,
    "declaration-property-value-whitelist": {
        "flex": ["/^\\S+\\s+\\S+\\s+\\S+$/"]
    },
  }
}

To make your life even easier - here are some simple translations.
Here is a great guide from css tricks.

• flex:none should be “flex: 0 0 auto”
• flex:auto  should be “flex: 1 1 auto”
• flex:1         should be “flex: 1 1 0%”

Hope this makes life easier for you!