Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend: new deprecations with SASS v1.77.7 #5577

Closed
stopfstedt opened this issue Jul 10, 2024 · 2 comments · Fixed by ilios/frontend#8059
Closed

frontend: new deprecations with SASS v1.77.7 #5577

stopfstedt opened this issue Jul 10, 2024 · 2 comments · Fixed by ilios/frontend#8059

Comments

@stopfstedt
Copy link
Member

i'm seeing these in the output on application startup with this dependency update

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

   ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/fonts.scss
24 │     line-height: calc(4px + 2ex);
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/media.scss
20 │ ┌   @media screen and (min-width: 1200px) {
21 │ │     @content;
22 │ │   }
   │ └─── nested rule
   ╵
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/fonts.scss 24:3  @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/styles.scss 1:9  @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/app.scss 1: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

   ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/fonts.scss
26 │     font-size: 16px;
   │     ^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/media.scss
20 │ ┌   @media screen and (min-width: 1200px) {
21 │ │     @content;
22 │ │   }
   │ └─── nested rule
   ╵
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/fonts.scss 26:3  @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/styles.scss 1:9  @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/app.scss 1: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

    ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/font-size.scss
4   │     font-size: var(--fs-#{$step});
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/ilios-table.scss
102 │ ┌   th {
103 │ │     border-bottom: 1px solid color.adjust(c.$culturedGrey, $lightness: -15%);
104 │ │     background-color: $backgroundColor;
105 │ │   }
    │ └─── nested rule
    ╵
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/font-size.scss 4:3                    font-size()
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/collapsed-container.scss 32:3         collapsed-container-table()
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/components/collapsed-competencies.scss 15:7  @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/components.scss 8:9                          @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/styles.scss 2:9                              @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/app.scss 1: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

    ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/font-size.scss
5   │     line-height: calc(4px + 2ex);
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/ilios-table.scss
102 │ ┌   th {
103 │ │     border-bottom: 1px solid color.adjust(c.$culturedGrey, $lightness: -15%);
104 │ │     background-color: $backgroundColor;
105 │ │   }
    │ └─── nested rule
    ╵
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/font-size.scss 5:3                    font-size()
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/collapsed-container.scss 32:3         collapsed-container-table()
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/components/collapsed-competencies.scss 15:7  @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/components.scss 8:9                          @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/styles.scss 2:9                              @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/app.scss 1: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

    ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/font-size.scss
4   │     font-size: var(--fs-#{$step});
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/ilios-table.scss
102 │ ┌   th {
103 │ │     border-bottom: 1px solid color.adjust(c.$culturedGrey, $lightness: -15%);
104 │ │     background-color: $backgroundColor;
105 │ │   }
    │ └─── nested rule
    ╵
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/font-size.scss 4:3                  font-size()
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/mixins/collapsed-container.scss 32:3       collapsed-container-table()
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/components/collapsed-taxonomies.scss 15:7  @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/components.scss 9:9                        @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/ilios-common/styles.scss 2:9                            @import
    /tmp/broccoli-229219pNjC8iXpLfIe/out-363-funnel_funnel_styles/app/styles/app.scss 1:9                                            root stylesheet

Warning: 715 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
@stopfstedt stopfstedt changed the title new deprecations with SASS v1.77.7 frontend: new deprecations with SASS v1.77.7 Jul 10, 2024
@jrjohnson
Copy link
Member

These are truly ugly to fix. We have a lot of them and mostly we'd just be wrapping the code in a garbage extra block. In many cases I'm not sure they're resolvable as we use multiple mixins and each breaks the other. After messing about with different options I think our best bet is to just wait for the sass release where this is changed. Looking at our code we've written it in many places expecting this to already be true. I'm not sure if that means things are going to break or be fine after the change, but I think we're better off waiting.

@jrjohnson
Copy link
Member

Fixed in frontend.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants