Sass deprecations

[rtritto]

Description

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

    ╷
28  │ ┌   &:-webkit-full-screen {
29  │ │     width: 100% !important;
30  │ │     height: 100% !important;
31  │ │   }
    │ └─── nested rule
... │
34  │     word-break: initial;
    │     ^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    file:///C:/node_modules/video.js/src/css/components/_layout.scss 34:3  @import
    file:///C:/node_modules/video.js/src/css/video-js.scss 8:9             @import
    file:///C:/src/scss/videojs.scss 2:9                                   root stylesheet

: 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

    ╷
2   │ ┌   & .vjs-icon-placeholder {
3   │ │     @extend .vjs-icon-cancel;
4   │ │   }
    │ └─── nested rule
... │
6   │     cursor: pointer;
    │     ^^^^^^^^^^^^^^^ declaration
    ╵
    file:///C:/node_modules/video.js/src/css/components/_close-button.scss 6:3  @import
    file:///C:/node_modules/video.js/src/css/video-js.scss 11:9                 @import
    file:///C:/src/scss/videojs.scss 2:9                                        root stylesheet

: 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

    ╷
2   │ ┌   & .vjs-icon-placeholder {
3   │ │     @extend .vjs-icon-cancel;
4   │ │   }
    │ └─── nested rule
... │
7   │     height: 3em;
    │     ^^^^^^^^^^^ declaration
    ╵
    file:///C:/node_modules/video.js/src/css/components/_close-button.scss 7:3  @import
    file:///C:/node_modules/video.js/src/css/video-js.scss 11:9                 @import
    file:///C:/src/scss/videojs.scss 2:9                                        root stylesheet

: 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

    ╷
2   │ ┌   & .vjs-icon-placeholder {
3   │ │     @extend .vjs-icon-cancel;
4   │ │   }
    │ └─── nested rule
... │
8   │     position: absolute;
    │     ^^^^^^^^^^^^^^^^^^ declaration
    ╵
    file:///C:/node_modules/video.js/src/css/components/_close-button.scss 8:3  @import
    file:///C:/node_modules/video.js/src/css/video-js.scss 11:9                 @import
    file:///C:/src/scss/videojs.scss 2:9                                        root stylesheet

: 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

    ╷
2   │ ┌   & .vjs-icon-placeholder {
3   │ │     @extend .vjs-icon-cancel;
4   │ │   }
    │ └─── nested rule
... │
9   │     right: 0;
    │     ^^^^^^^^ declaration
    ╵
    file:///C:/node_modules/video.js/src/css/components/_close-button.scss 9:3  @import
    file:///C:/node_modules/video.js/src/css/video-js.scss 11:9                 @import
    file:///C:/src/scss/videojs.scss 2:9                                        root stylesheet

Warning: 7 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.

Reduced test case

NA

Steps to reproduce

1. Install sass or sass-embedded
2. Add @import 'video.js/src/css/video-js.scss'; in the scss file and import it.
3. See the logs

Errors

No response

What version of Video.js are you using?

8.17.3

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Firefox 129

What OS(es) and version(s) does this occur with?

Windows 11

[gkatsev]

Can you try video.js 8.17.4 and see whether those go away? #8821 potentially addressed these.

[rtritto]

Fixed in v8.17.4, thanks!