Unnecessary variable enforcement on font-face declaration

[Okazari]

Hello there ! I've recently run into an issue with the linter rule :smile:

@font-face {
  font-family: "Inter";
  src: url("assets/Inte.var.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}

:point_up: In that case the linter wants the font-weight property to be a variable. I'm not sure that it makes sense as the font-weight range is tied with the font file we are using and will not change or be re-used.

WDYT ?

[AndyOGo]

@Okazari thanks for your message.

please provide more details, like what is your config, are you usibg css, sass or less syntax?

Ideally share a reproduction repo.

[Okazari]

We are using sass with this stylelint.rc.js config :

module.exports = {
  "plugins": [
    "stylelint-order",
    "stylelint-scss",
    "stylelint-declaration-strict-value"
  ],
  "extends": "stylelint-config-recommended",
  "rules": {
   // A lot of rules tweaks
  }
}

I solve that by using a sass variable instead of 100 900 but I feel that it's a case were we doesn't need to enforce the use of a variable.

[AndyOGo]

Thank you for sharing your config.

You are using the default config. Please make sure to read the documentation next time, before you open an incorrect issue report. https://github.com/AndyOGo/stylelint-declaration-strict-value#usage

This is intended for bugs, not questions or support.

[Okazari]

Sorry, I may have expressed myself poorly. I wasn't looking for an answer as I already made a linter compliant code I was suggesting an improvement.

What I consider an issue, is that the plugin enforce us to use a variable somewhere where it doesn't make sense. The 100 900 range value is tied to the Inter variable itself. We will not have to change it without changing the font.

Do you think we could make the linter allow raw values for the font-weight (and some others) properties in @font-face declaration ?

[AndyOGo]

I understood your suggestion at the first time.

Please read the documentation. You need to tell this plugin what and how to lint. If you dont do this then the default config applies.

btw. you can disable variables for specific props, but this is up to you. https://github.com/AndyOGo/stylelint-declaration-strict-value#disable-variables-for-specific-props