Mashq and Machine

Or, “Always examine your linter defaults”

I got a code review flag for using url() in an @import statement — apparently that’s not “modern.” But, my linter, stylelint, didn’t flag this in my linting phase.

To be clear, both forms are completely valid in CSS; the spec doesn’t care. I went looking for a tiebreaker at MDN (the mother of all goldmines for most things web), but it doesn’t officially take a side either. However, most of its own examples use the bare string and it’s listed first almost always. I can take a hint.

/* string notation */
@import "reset.css";
/* url() notation — also valid */
@import url("reset.css");

I’ll go with the string form, I suppose. It’s fewer characters by dropping a wrapper which I don’t need, and reads a little quieter at the top of a stylesheet. I still don’t know for certain whether either form is cheaper for the browser’s parser — that’s the one thing I couldn’t pin down. But I’m willing to let that go, because the practical difference is probably negligible, and reducing cognitive load for the people reading my code is always a goal of mine. Also, I don’t need to go down the rabbit hole of examining a CSS parser’s source code in C++.

My more logical reasoning for preferring string over url() here is that url() earns its place in property values, where it’s required syntax:

background-image: url("hero.avif");
cursor: url("custom.cur"), auto;

In @import, though, I think it’s just inherited habit — carried forward from older specs and preprocessor conventions, not really a semantic requirement.

So, here’s original the irony I ran into: Stylelint’s own stylelint-config-standard defaults to url. But, I’m not sure it’s the standard, though. So I had to override it explicitly in my local config:

// stylelint.config.mjs
"import-notation": "string",

I think stylelint-config-standard should default to “string” instead. Does this warrant opening a bug request or is that just too nitpickey?

Wait! Someone did file a bug in 2022 to ask the maintainers to switch the default from “string”. Reading though it presents some new information to digest; let’s talk about it next time if I’m still smarting from this.