SASS files deprecation warnings

[rgdgs]

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

    ╷
31  │ ┌   @supports not (aspect-ratio: 16 / 9) {
32  │ │     height: 0;
33  │ │     padding-bottom: to-percentage($embed-padding);
34  │ │     position: relative;
35  │ │   }
    │ └─── nested rule
... │
37  │     aspect-ratio: 16 / 9;
    │     ^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\types\video.scss 37:3  @import
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\plyr.scss 41:9         @import
    resources\sass\vendor\__vendor-dir.scss 6:9                                     @forward
    resources\sass\styles.scss 1:1                                                  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

   ┌──> node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\states\fullscreen.scss
13 │     bottom: 0;
   │     ^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\lib\mixins.scss
75 │ ┌   @media (min-width: $plyr-bp-lg) {
76 │ │     .plyr__captions {
77 │ │       font-size: $plyr-font-size-captions-large;
78 │ │     }
79 │ │   }
   │ └─── nested rule
   ╵
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\states\fullscreen.scss 13:3  @import       
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\plyr.scss 42:9               @import       
    resources\sass\vendor\__vendor-dir.scss 6:9                                           @forward      
    resources\sass\styles.scss 1:1                                                        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

   ┌──> node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\states\fullscreen.scss
14 │     left: 0;
   │     ^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\lib\mixins.scss
75 │ ┌   @media (min-width: $plyr-bp-lg) {
76 │ │     .plyr__captions {
77 │ │       font-size: $plyr-font-size-captions-large;
78 │ │     }
79 │ │   }
   │ └─── nested rule
   ╵
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\states\fullscreen.scss 14:3  @import       
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\plyr.scss 42:9               @import       
    resources\sass\vendor\__vendor-dir.scss 6:9                                           @forward      
    resources\sass\styles.scss 1:1                                                        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

   ┌──> node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\states\fullscreen.scss
15 │     position: fixed;
   │     ^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\lib\mixins.scss
75 │ ┌   @media (min-width: $plyr-bp-lg) {
76 │ │     .plyr__captions {
77 │ │       font-size: $plyr-font-size-captions-large;
78 │ │     }
79 │ │   }
   │ └─── nested rule
   ╵
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\states\fullscreen.scss 15:3  @import       
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\plyr.scss 42:9               @import       
    resources\sass\vendor\__vendor-dir.scss 6:9                                           @forward      
    resources\sass\styles.scss 1:1                                                        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

   ┌──> node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\states\fullscreen.scss
16 │     right: 0;
   │     ^^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\lib\mixins.scss
75 │ ┌   @media (min-width: $plyr-bp-lg) {
76 │ │     .plyr__captions {
77 │ │       font-size: $plyr-font-size-captions-large;
78 │ │     }
79 │ │   }
   │ └─── nested rule
   ╵
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\states\fullscreen.scss 16:3  @import       
    node_modules\.pnpm\plyr@3.7.8\node_modules\plyr\src\sass\plyr.scss 42:9               @import       
    resources\sass\vendor\__vendor-dir.scss 6:9                                           @forward      
    resources\sass\styles.scss 1:1                                                        root stylesheet

[Tadaz]

Instead of trying to import and compile the SASS file as a workaround I imported plyr/dist/plyr.css file and it works just fine.

[swaranan]

Same issue. Getting warnings on "sass": "^1.77.8",

[skyyip-theorigo]

Sass announced there will be some upcoming breaking changes to the syntax in Mixed Declarations

Using the version of the sass package (1.77.8) there are deprecation warnings by sass. The previous sass version 1.77.6 worked fine.

Here is the temporary solution: npm i sass@1.77.6 --save-exact

Hoping plyr gets an update soon.