Fix Dart Sass "mixed-decls" deprecation warning - #503
Draft
simonyang08 wants to merge 1 commit into
Draft
Conversation
When `$rfs-class` is set to "enable" together with the default
min-media-query mode, the internal mixins `_rfs-rule` and
`_rfs-media-query-rule` both emit a `.enable-rfs &, &.enable-rfs { ... }`
nested rule at the parent selector scope. The bare `@content;` in
`_rfs-media-query-rule` then emitted the static ($rfs-value) property
declaration after those nested rules, which triggered Dart Sass's
`mixed-decls` deprecation warning starting with Sass 1.77.7
(https://sass-lang.com/d/mixed-decls).
Move the static property declaration into `rfs()` so that it is emitted
before the nested rules in source order. This preserves the byte-identical
rendered CSS for all existing tests (both Dart Sass and PostCSS paths) and
silences the warning because the declaration now precedes the nested rules.
Also add a regression test (`test/sass-no-deprecation-warnings.js`) that
compiles every fixture in `test/sass/` through Dart Sass and fails the
build if any "mixed-decls" deprecation warning is reported.
Signed-off-by: simonyang08 <ppt5928@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Since Dart Sass 1.77.7, the SCSS engine emits a mixed-decls deprecation warning whenever a property declaration follows a nested rule at the same parent selector scope. The
enable+min-media-querypath of rfs's internal mixins triggered 5 such warnings per compilation (18+ across the full test suite), as called out in #474.Root cause
@mixin _rfs-ruleemits.enable-rfs &, &.enable-rfs { … }at the parent selector.@mixin _rfs-media-query-rulethen emitted the static (-value) declaration as a bare@content;after that nested rule, followed by an@media { .enable-rfs &, &.enable-rfs { … } }nested rule. The declaration-after-nested-rule pattern is what Sass 1.77+ flags.Fix
Move the static declaration out of
_rfs-media-query-ruleand into the caller (@mixin rfs) so it is emitted before the nested rules in source order. This:mixed-declsdeprecation (declarations precede nested rules at the parent selector),test/sass/for both Dart Sass and PostCSS — 0/12 mismatches pre vs post).Tests
test/sass-no-deprecation-warnings.jscompiles every fixture intest/sass/through Dart Sass with a customloggerand fails the build if any "mixed-decls" warning fires.result.dartsass) and PostCSS (result.postcss).npm run lint(xo + stylelint) passes.Notes
mixed-declsportion of Deprecation warning regarding the order of mixed nested declaration #474. Theglobal-builtinand@importdeprecation warnings raised in the issue thread belong to the broader Dart Sass migration tracked in Use Sass Modules (dart-sass) #363 / Fix deprecated SCSS syntax, separate LibSass from Dart Sass #499 and are intentionally out of scope here.Refs #474/"Fixes Deprecation warning regarding the order of mixed nested declaration #474" scoping: this resolves the mixed-decls piece; if maintainers want to keep Deprecation warning regarding the order of mixed nested declaration #474 open for the remaining items (global-builtin, @import), we can downgrade to a reference instead.