💡 Handle @import statements in CSS and superset languages

[fregante]

Suggest an idea for Knip

I didn't find any open requests other than a mention in:

• Request new plugins here #483 (comment)
• https://knip.dev/features/compilers#css

I think that at a minimum it would be good to parse plain relative imports, like:

@import "file.css"
@import url(file.css)
@import url("file.css")

With a few extra non-relevant keywords that might follow: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Here's the docs for url(): https://developer.mozilla.org/en-US/docs/Web/CSS/url_function

It might be simple enough to parse via regex, but if not, Lightning CSS might be a fast parser (also supporting other languages)

http imports are also valid but obviously not applicable here.

[fregante]

Separately

SASS/SCSS imports, particularly from node_modules, are a bit complex and depend on the bundler. I've seen a number of syntaxes:

@import 'webext-base-css';
@import '~webext-base-css';
@import '~webext-base-css/webext-base.css';
@import 'npm:webext-base-css'; /* Parcel */
@use 'webext-base-css';

So maybe that can be skipped for now, whereas a keyword-less @import parser would go a long way.

[webpro]

Thanks for the input, that's valuable. The reason it's not built-in and how to add your own compiler is here: https://knip.dev/features/compilers#css

Based on the various syntaxes, enabling some default "compiler" sounds risky. I think I'd rather have users enable it explicitly than having to disable it after weird reports. However, I'd be open to a pull request (ideally without extra dependencies) if the chances of false positives/odd results are slim enough.

[fregante]

One thing to note is that @import "file.css" can point to either one of these depending on the tool that parses it

• ./file.css, or (native)
• <root>/node_modules/file.css/index.css (webpack?)

But for now I used this config and it gives some results already:

function cssImportParser (text, filename) {
  return [...text.matchAll(/(?<=@)import[^;]+/g)].join('\n');
}

export default {
  compilers: {
    scss: cssImportParser,
    css: cssImportParser,
  },
};

It would be cool to see minimal support native in knip, at least for CSS.

SCSS also has additional lookup logic like @import "variables" trying to load ./_?variables.{scss,sass,css} and god knows what else.

[webpro]

So for the reasons given I currently think it's not a good idea to add this compiler to Knip natively. Compilers can be added at will and handle the locally used file formats and syntaxes properly.