extract css @import files

[onnoomg]

Hi @sverweij , I noticed cruise can detect import files. however, it cannot detect "@import" style files in a stardard option setting. Does it possible to extract @import style files eg. index.scss OR should I use another library to do this separately?

Environment

• Version used: 16.6
• Node version: 18.20
• Operating System and version: macos

[sverweij]

Hi @onnoomg currently dependency-cruiser doesn't process (s)css or sass. As it looks like some of the frameworks directly import (s)css from javascript-(ish) modules, it might be a future feature, though.

Notes from a quick research

• Possibly postcss is a reasonable option for parsing css (see this comparison between the parsers available in AST explorer.
• css imports have some specification variants - so using brute force i.e. with a regex is bound to end in tears.
• resolution might (likely does) work different from that for javascript. Network calls might be involved.

[onnoomg]

Hi @onnoomg currently dependency-cruiser doesn't process (s)css or sass. As it looks like some of the frameworks directly import (s)css from javascript-(ish) modules, it might be a future feature, though.

Notes from a quick research

• Possibly postcss is a reasonable option for parsing css (see this comparison between the parsers available in AST explorer.
• css imports have some specification variants - so using brute force i.e. with a regex is bound to end in tears.
• resolution might (likely does) work different from that for javascript. Network calls might be involved.

Hi @sverweij, Since I only have the files of the vue framework at hand, I solved this problem specifically. According to your source code function vue3Transpile(pSource), there is a variable called 'descriptor' in the parsing result passed by vueTemplateCompiler, which has an attribute 'styles' containing what I want (that is, @import here). Hopefully, this way of calling the object generated by the library can become a way to handle @import, although it may be a bit too targeted. Anyway, thank you for your reply. Cheers :)

[johncrim]

Note that SCSS @import is deprecated in favor of @use and @forward and will be removed in the next major version; so while I like this idea I it should definitely include @use and @forward.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.