Web 2936 resolve stylelint issues in v16 upgrade

[nickbergquist]

https://vandam.atlassian.net/browse/WEB-2938

Jira ticket was aimed at addressing new linting errors arising from the Stylint upgrade to v.16 in vam-web. I have updated to the same version (including the standard config.) here in vam-fractal for consistency.

[methodog]

i think this syntax is much clearer!
but why not make the change everywhere?

[nickbergquist]

@methodog Well, interestingly this highlights an issue with the linting in that errors are reported when the media feature range is in the following format

@media (min-width: 1000px) {...}

but if we are using calculations and/or variables then this is not reported in Stylelint v.15:

@media (min-width: map-get($nav-breakpoints, $breakpoint)) {...}

So it seems we should keep in mind when addressing linting errors and indeed developing from new that there may be other somewhat hidden occurrences. If a search across the vam-fractal project is made using @media (min- then other instances can be found in the following files:

src/components/blocks/site-nav/_site-nav.scss
src/components/mixins/breakpoints/readme.md
src/components/mixins/breakpoints/_breakpoints.scss

Furthermore, a search for @media (max- reveals further instances not detected by the linter in:

src/components/blocks/site-nav/_site-nav.scss
src/components/mixins/breakpoints/_breakpoints.scss

Also of note is that the changes demanded by the linter are abstractions; @media (width >= 1000px) {...} is compiled to @media (min-width: 1000px) {...} in the CSS.

[methodog]

thanks @nickbergquist
interesting point about the syntax change being entirely a SASS abstraction - hopefully CSS will catch up with the improved syntax!
back on the point about switching to the new syntax consistently throughout, presumably we are still free to do that, even if not forced to by the linter?

[methodog]

ah - it looks as though you did just that, with a commit between my comments!

[nickbergquist]

I have added an exclusion in the root .stylelintrc.json config. to override the "media-feature-name-unknown" rule. This is because using SASS calculations and/or variables in the form of say:

@media (width <= map.get(mixins.$breakpoints-breakpoints, "small")) {...}

is not registered as a problem using Stylelint v.15 but is using the latest version. Whilst this is not evident in vam-fractal as yet it is in vam-web and I have included the exclusion here for standardisation between the configuration files of both projects.

[methodog]

Thanks @nickbergquist , I think this was the best way to proceed all round.