NativeScript / theme

@nativescript/theme
https://v7.docs.nativescript.org/ui/theme
Apache License 2.0
127 stars 44 forks source link

New "Mixed Declarations" Sass behavior #302

Closed sebj54 closed 1 month ago

sebj54 commented 1 month ago

Hi there!

Since Dart Sass 1.77.7, the behavior of mixed declarations has changed (more info: https://sass-lang.com/documentation/breaking-changes/mixed-decls/).

This results in several warnings from this package when compiling, like this one:

WARNING in ./app/app.scss
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Warning on line 10, column 4 of file:///Users/myuser/projects/myproject/node_modules/@nativescript/theme/scss/core/primitives/_headings.scss:10:4:
Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

10 |     font-weight: normal;

node_modules/@nativescript/theme/scss/core/primitives/_headings.scss 11:5  @import
node_modules/@nativescript/theme/scss/core/primitives/_index.scss 4:9      @import
node_modules/@nativescript/theme/scss/core/_index.scss 5:9                 @import
node_modules/@nativescript/theme/core.scss 8:9                             @import
app/app.scss 4:9                                                           root stylesheet

 @ ./app/main.js 2:0-20

It is easily solvable by moving declarations before nested rules. For instance:

BEFORE

.body,
.body2,
.footnote {
    @include colorize($color: secondary);
    font-weight: normal;
}

AFTER

.body,
.body2,
.footnote {
    font-weight: normal;
    @include colorize($color: secondary);
}

I can totally do this with a PR but I would like to know if it has a chance to be merged.

NathanWalker commented 1 month ago

100% @sebj54 thank you. If a PR is posted we’d be happy to help facilitate a patch on it.