Page MenuHomePhabricator

[LEX] Migrate `new-lexeme-special-page` stylesheets for coming Sass / CSS behaviour changes
Closed, ResolvedPublic

Description

Runs of the new-lexeme-special-page tests currently generate deprecation 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

    ╷
6   │ ┌     & > * + * {
7   │ │         margin-top: $dimension-layout-xsmall;
8   │ │     }
    │ └─── nested rule
... │
11  │       padding: $dimension-layout-small;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    src/components/NewLexemeForm.vue 11:2  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

    ╷
6   │ ┌     & > * + * {
7   │ │         margin-top: $dimension-layout-xsmall;
8   │ │     }
    │ └─── nested rule
... │
14  │       border-style: $border-style-base;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    src/components/NewLexemeForm.vue 14:2  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

    ╷
6   │ ┌     & > * + * {
7   │ │         margin-top: $dimension-layout-xsmall;
8   │ │     }
    │ └─── nested rule
... │
15  │       border-width: $border-width-thin;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    src/components/NewLexemeForm.vue 15:2  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

    ╷
6   │ ┌     & > * + * {
7   │ │         margin-top: $dimension-layout-xsmall;
8   │ │     }
    │ └─── nested rule
... │
16  │       border-radius: $border-radius-base;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    src/components/NewLexemeForm.vue 16:2  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

    ╷
6   │ ┌     & > * + * {
7   │ │         margin-top: $dimension-layout-xsmall;
8   │ │     }
    │ └─── nested rule
... │
17  │       border-color: $border-color-base-subtle;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    src/components/NewLexemeForm.vue 17:2  root stylesheet

Investigate what the desired behaviour / implementation is here and migrate the stylesheets accordingly.

Acceptance criteria

  • no Sass deprecation warnings are generated during runs of the test suite

Event Timeline