carrevue / carrevue/OpenSB

fix deprecation warnings related to changes newer dart sass versions

Open
#232 4 comments 0 reactions 0 assignees View on GitHub
frontend good first issue
Dominant language
PHP
Stars
10
Forks
5
PR merge metrics
No merged PRs in 30d

Description

```
chazp@win11 MINGW64 /c/OpenSB (dev)
$ /c/OpenSB/tools/compile-scss.sh
DEPRECATION WARNING: 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


41 │ ┌ &.sel {
42 │ │ background-color: darken($gray-200, 10.5%);
43 │ │ @include gradient-y($start-color: lighten($gray-200, 10.5%), $end-color: lighten($gray-200, 5.5%));
44 │ │ }
│ └─── nested rule
45 │ border-radius: 5px;
│ ^^^^^^^^^^^^^^^^^^ declaration

scss\finalium\_buttons.scss 45:3 @import
scss\finalium\_imports.scss 17:9 @import
scss\finalium\finalium_darkmode.scss 74:9 root stylesheet

DEPRECATION WARNING: 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


41 │ ┌ &.sel {
42 │ │ background-color: darken($gray-200, 10.5%);
43 │ │ @include gradient-y($start-color: lighten($gray-200, 10.5%), $end-color: lighten($gray-200, 5.5%));
44 │ │ }
│ └─── nested rule
45 │ border-radius: 5px;
│ ^^^^^^^^^^^^^^^^^^ declaration

scss\finalium\_buttons.scss 45:3 @import
scss\finalium\_imports.scss 17:9 @import
scss\finalium\finalium_beta.scss 100:9 root stylesheet

DEPRECATION WARNING: 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


41 │ ┌ &.sel {
42 │ │ background-color: darken($gray-200, 10.5%);
43 │ │ @include gradient-y($start-color: lighten($gray-200, 10.5%), $end-color: lighten($gray-200, 5.5%));
44 │ │ }
│ └─── nested rule
45 │ border-radius: 5px;
│ ^^^^^^^^^^^^^^^^^^ declaration

scss\finalium\_buttons.scss 45:3 @import
scss\finalium\_imports.scss 17:9 @import
scss\finalium\finalium_qobo.scss 65:9 root stylesheet

DEPRECATION WARNING: 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


266 │ ┌ &:hover {
267 │ │ background: #ffffff;
268 │ │ }
│ └─── nested rule
269 │ padding: 4px 0;
│ ^^^^^^^^^^^^^^ declaration

scss\finalium\finalium_beta.scss 269:7 root stylesheet

DEPRECATION WARNING: 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

┌──> scss\biscuit\biscuit\_page.scss
8 │ margin: 10px auto auto auto;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule

scss\biscuit\biscuit\_page.scss 8:3 @import
scss\biscuit\biscuit\_imports.scss 16:9 @import
scss\biscuit\default.scss 8:9 root stylesheet

DEPRECATION WARNING: 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

┌──> scss\biscuit\biscuit\_page.scss
8 │ margin: 10px auto auto auto;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule

scss\biscuit\biscuit\_page.scss 8:3 @import
scss\biscuit\biscuit\_imports.scss 16:9 @import
scss\biscuit\cubicle.scss 8:9 root stylesheet

DEPRECATION WARNING: 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

┌──> scss\biscuit\biscuit\_header.scss
77│ height: $header-logo-height;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule

scss\biscuit\biscuit\_header.scss 77:5 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\default.scss 8:9 root stylesheet

DEPRECATION WARNING: 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

┌──> scss\biscuit\biscuit\_header.scss
87│ height: $header-logo-height;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule

scss\biscuit\biscuit\_header.scss 87:5 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\default.scss 8:9 root stylesheet

DEPRECATION WARNING: 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

┌──> scss\biscuit\biscuit\_header.scss
90│ margin-right: 10px;
│ ^^^^^^^^^^^^^^^^^^ declaration

┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule

scss\biscuit\biscuit\_header.scss 90:3 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\default.scss 8:9 root stylesheet

DEPRECATION WARNING: 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

┌──> scss\biscuit\biscuit\_header.scss
182│ display: flex;
│ ^^^^^^^^^^^^^ declaration

┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule

scss\biscuit\biscuit\_header.scss 182:5 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\default.scss 8:9 root stylesheet

DEPRECATION WARNING: 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


25 │ ┌ &:hover, &.selected {
26 │ │ cursor: pointer;
27 │ │ }
│ └─── nested rule
... │
36 │ background: #64b713;
│ ^^^^^^^^^^^^^^^^^^^ declaration

scss\biscuit\biscuit\_header.scss 36:9 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\cubicle.scss 8:9 root stylesheet

DEPRECATION WARNING: 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


25 │ ┌ &:hover, &.selected {
26 │ │ cursor: pointer;
27 │ │ }
│ └─── nested rule
... │
37 │ border-left: 1px solid #4e9e00;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

scss\biscuit\biscuit\_header.scss 37:9 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\cubicle.scss 8:9 root stylesheet

DEPRECATION WARNING: 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


25 │ ┌ &:hover, &.selected {
26 │ │ cursor: pointer;
27 │ │ }
│ └─── nested rule
... │
38 │ border-right: 1px solid #4e9e00;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

scss\biscuit\biscuit\_header.scss 38:9 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\cubicle.scss 8:9 root stylesheet

DEPRECATION WARNING: 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

┌──> scss\biscuit\biscuit\_header.scss
77│ height: $header-logo-height;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule

scss\biscuit\biscuit\_header.scss 77:5 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\cubicle.scss 8:9 root stylesheet

DEPRECATION WARNING: 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


41 │ ┌ &.sel {
42 │ │ background-color: darken($gray-200, 10.5%);
43 │ │ @include gradient-y($start-color: lighten($gray-200, 10.5%), $end-color: lighten($gray-200, 5.5%));
44 │ │ }
│ └─── nested rule
45 │ border-radius: 5px;
│ ^^^^^^^^^^^^^^^^^^ declaration

scss\finalium\_buttons.scss 45:3 @import
scss\finalium\_imports.scss 17:9 @import
scss\finalium\finalium.scss 351:9 root stylesheet

WARNING: 32 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.

WARNING: 35 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.

DEPRECATION WARNING: 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

┌──> vendor\twbs\bootstrap\scss\_reboot.scss
503 │ font-weight: $legend-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule

vendor\twbs\bootstrap\scss\_reboot.scss 503:3 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 16:9 @import
scss\bootstrap\bootstrap.scss 12:9 root stylesheet

DEPRECATION WARNING: 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

┌──> vendor\twbs\bootstrap\scss\_reboot.scss
504 │ line-height: inherit;
│ ^^^^^^^^^^^^^^^^^^^^ declaration

┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule

vendor\twbs\bootstrap\scss\_reboot.scss 504:3 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 16:9 @import
scss\bootstrap\bootstrap.scss 12:9 root stylesheet

DEPRECATION WARNING: 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

┌──> vendor\twbs\bootstrap\scss\_type.scss
38 │ font-family: $display-font-family;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule

vendor\twbs\bootstrap\scss\_type.scss 38:5 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 17:9 @import
scss\bootstrap\bootstrap.scss 12:9 root stylesheet

DEPRECATION WARNING: 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

┌──> vendor\twbs\bootstrap\scss\_type.scss
39 │ font-style: $display-font-style;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule

vendor\twbs\bootstrap\scss\_type.scss 39:5 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 17:9 @import
scss\bootstrap\bootstrap.scss 12:9 root stylesheet

DEPRECATION WARNING: 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

┌──> vendor\twbs\bootstrap\scss\_type.scss
40 │ font-weight: $display-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration

┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule

vendor\twbs\bootstrap\scss\_type.scss 40:5 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 17:9 @import
scss\bootstrap\bootstrap.scss 12:9 root stylesheet

WARNING: 22 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.

chazp@win11 MINGW64 /c/OpenSB (dev)
$
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Run tools/compile-scss.sh and use its reported locations to inspect scss/finalium/_buttons.scss, scss/finalium/finalium_beta.scss, and the biscuit SCSS files, including mixins/_responsiveness.scss. Update the declarations or nested rules causing the reported mixed-declaration warnings, then rerun the script until these deprecation warnings no longer appear.

Written by the indexing model from the issue text.

Assessment

Tech stack
sass, scss
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.