unit "x" (image-set)

[strarsis]

Describe the issue. Is it a bug or a feature request (new rule, new option, etc.)?

A new unit to be added to defaults.

Which rule, if any, is this issue related to?

unit-no-unknown

What CSS is needed to reproduce this issue?

e.g.

.foo {
  background-image:
    image-set(
      url(../images/background-blended.jpg?size=400&quality=10) 1x,
      url(../images/background-blended.jpg?size=800&quality=10) 2x,
      url(../images/background-blended.jpg?size=1200&quality=10) 3x
    );
  background-position: top center;
  background-repeat: no-repeat;
}

What stylelint configuration is needed to reproduce this issue?

e.g.

{
  "extends": "stylelint-config-standard",
    "rules": {
      "no-empty-source": null
    }
}

Which version of stylelint are you using?

e.g. 7.12.0

How are you running stylelint: CLI, PostCSS plugin, Node API?

webpack loader

Does your issue relate to non-standard syntax (e.g. SCSS, nesting, etc.)?

Unsure.

What did you expect to happen?

No errors to be flagged.

What actually happened (e.g. what warnings or errors you are getting)?

Lint error:

Unexpected unknown unit "x"   unit-no-unknown
Unexpected unknown unit "x"   unit-no-unknown
Unexpected unknown unit "x"   unit-no-unknown

test.css
 4:65  ✖  Unexpected unknown unit "x"   unit-no-unknown
 5:65  ✖  Unexpected unknown unit "x"   unit-no-unknown
 6:66  ✖  Unexpected unknown unit "x"   unit-no-unknown

I want to use the image-set syntax (PostCSS polyfill https://github.com/SuperOl3g/postcss-image-set-polyfill).
In case this is deemed to be not standard enough for being added to default config, what would be the best practice for adding this unit as correct to my stylelint configuration?

[CAYdenberg]

Hi @strarsis did you possibly forget the first few questions in the template? Just having trouble following and the answers are still marked "e.g."

Second question for you as I have not used this feature: do you think it would be accurate to consider "x" a unit?

[strarsis]

@CAYdenberg: Edited.
image-set is a new feature and it uses the x unit -
hence I think it makes sense to add it to the whitelisted units.

[CAYdenberg]

SGTM. image-set is accepted as a standard, yes? Then it makes sense to add it to the whitelist.

I'll label this as help wanted. Please consider contributing a fix if you have the time @strarsis

[hudochenkov]

image-set() function is a draft (it's not final if it's going to be in CSS). According to this draft url(img/test.png) 1x is incorrect value for <image-set-option>. Last parameter is <resolution> it may contain only following units: dpi, dpcm, dppx.

As x is an invalid unit I'm closing this issue.

I would recommend using dppx instead of x.

[alexander-akait]

@hudochenkov btw we can add this unit as deprecated to avoid this problem, in css many deprecated things 😞

[jeddy3]

@strarsis You can use the ignoreUnits secondary option of the rule.

[SuperOl3g]

@hudochenkov I think your statement that x is invalid is wrong.
Yes, it isn't listed in documentation.
But it appears in the code example.
In my opinion, there is inaccuracy in the documentation and stylelint must support x units.

[hudochenkov]

@SuperOl3g thank you for pointing to the example!

There is an error in specification, but it's not what we think it is. Link for <resolution> specification points to css-value-3, which doesn't have x unit. While css-value-4 has x unit. I've created an issue to fix this w3c/csswg-drafts#2098

Latest CSS Values and Units Module is Level 3 and doesn't have x as a valid unit.

x unit is only in Editor's Draft, i. e. not ready to use. Also, adding x as a supported unit will make unit-no-unknown less useful, as x is most likely a typo for px these days.

Users of currently non-standard syntax could use the ignoreUnits secondary option of the rule.

[SuperOl3g]

@hudochenkov, I agree with you