csstools / postcss-plugins

PostCSS Tools and Plugins
https://preset-env.cssdb.org/
MIT No Attribution
912 stars 72 forks source link

Suggestion: Document usage of postcss-rewrite-url with Stylelint #1524

Open ehoogeveen-medweb opened 1 day ago

ehoogeveen-medweb commented 1 day ago

I was examining our (somewhat neglected) Stylelint config recently and found declaration-property-value-no-unknown, which IIUC may be enabled by default soon. Enabling this rule turned out to be very helpful for us, finding a number of bugs in our CSS :)

However, it took me a while to figure out how to make it work with rewrite-url(). Eventually I came up with this (the function-no-unknown exception is included for completeness):

{
  "rules": {
    "declaration-property-value-no-unknown": [
      true,
      {
        "typesSyntax": {
          "url": "| rewrite-url( <string> )"
        }
      }
    ],
    "function-no-unknown": [
      true,
      {
        "ignoreFunctions": ["rewrite-url"]
      }
    ],
  }
}

This extends <url> to also accept rewrite-url() type values, which may be somewhat overly broad but works like a charm for us. Technically url() takes url( <string> <url-modifier>* ) but I wasn't sure if rewrite-url() supports these (theoretical?) modifiers.

What do you think?

romainmenke commented 22 hours ago

Hi @ehoogeveen-medweb,

Sounds good to add this!

We have a similar section here: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-design-tokens#syntax

It's a bit lengthy and includes things not really relevant for postcss-rewrite-url, but maybe a good starting point.