no-slash-div

[jrr]

What is the problem you're trying to solve?

My current frontend tooling (w/ Dart Sass) doesn't like division with /:

[CRA] 21 │   padding: 0 ($COL_SPACING / 2);
[CRA]    │               ^^^^^^^^^^^^^^^^
[CRA]    ╵
[CRA]     src/client/styles/modules/Foo.module.scss 21:15  root stylesheet
[CRA]
[CRA] DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
[CRA]
[CRA] Recommendation: math.div($COL-SPACING, 2)
[CRA]
[CRA] More info and automated migrator: https://sass-lang.com/d/slash-div

It currently logs a runtime warning, but presumably in the future it will completely break.

This will probably be caught by our tests, but it would be great if it could also be handled by styelint.

What solution would you like to see?

A new rule that shares the opinion of Dart Sass, squiggling offending uses of the /.

Is this something that stylint would be interested in?

https://sass-lang.com/documentation/breaking-changes/slash-div

[jeddy3]

@jrr Thanks for the request and for using the template.

Yes, I think it's a good candidate for a lint rule within the stylelint-scss community plugin. I suggest opening an issue in their issue tracker.

The rules built-in to stylelint are geared towards standard CSS. This will be clearer in the next major release.

[jeddy3]

Incidentally, the built-in color-function-notation rule is relevant here and can be used to encourage writing modern CSS color functions with a slash, e.g. a { color: hsl(20deg 20% 5% / 50%) }. Whereas a rule that warns about the deprecated slash feature of the SCSS syntax belongs in a plugin.