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\[email protected]\node_modules\plyr\src\sass\types\video.scss 37:3  @import
    node_modules\.pnpm\[email protected]\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\[email protected]\node_modules\plyr\src\sass\states\fullscreen.scss
13 │     bottom: 0;
   │     ^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\[email protected]\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\[email protected]\node_modules\plyr\src\sass\states\fullscreen.scss 13:3  @import       
    node_modules\.pnpm\[email protected]\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\[email protected]\node_modules\plyr\src\sass\states\fullscreen.scss
14 │     left: 0;
   │     ^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\[email protected]\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\[email protected]\node_modules\plyr\src\sass\states\fullscreen.scss 14:3  @import       
    node_modules\.pnpm\[email protected]\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\[email protected]\node_modules\plyr\src\sass\states\fullscreen.scss
15 │     position: fixed;
   │     ^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\[email protected]\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\[email protected]\node_modules\plyr\src\sass\states\fullscreen.scss 15:3  @import       
    node_modules\.pnpm\[email protected]\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\[email protected]\node_modules\plyr\src\sass\states\fullscreen.scss
16 │     right: 0;
   │     ^^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\[email protected]\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\[email protected]\node_modules\plyr\src\sass\states\fullscreen.scss 16:3  @import       
    node_modules\.pnpm\[email protected]\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 [email protected] --save-exact

Hoping plyr gets an update soon.