• Proposal ([Ordered Comments] Add a proposal #3548)
• Dart Sass (Emit comments in source order where possible dart-sass#1989)
• Tests (Add tests for comment ordering with @use sass-spec#1919)

Intro

I've encountered a problem when useing a library, specifically MDC.

Before going into details I should mention that:

• I understand that use is intended for "no side effects" modules — to only get the exported variables, mixins, etc., not the yielded styles,
• I understand that use statements must go first and are meant to resemble the programming language static imports.

Given that I have a valid use-case which I describe in the end of this description.

The issue

The CSS yielded by the used module is output at the beginning of the file even before any multiline comments which may precede the use line.

Repro: https://github.com/emirotin/sass-comments-issue (run npm install && npm run build).

My use-case

I'm using MDC following the recommended way to use its styles:

@use "@material/theme" with (
  $primary: #9c27b0,
  $secondary: #76ff03,
  $background: #fff,
);
@use "material-components-web";

From https://material.io/develop/web/docs/theming/

material-components-web package does produce lots of styles with of course lots of CSS to handle edge cases in various browsers.

I have stylelint enabled and it has a lot of warnings for these styles. I only care about the linting for my own styles, as well as I cannot influence the MDC styles so I want it wrapped in stylelint-disabled/enabled comments.

Apparently it's not possible. I think I can workaround it with @import (it causes a different, unrelated issue at the moment) but I think keeping the preceding comments can be desired in other cases as well.