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

Update template's main.scss to address deprecated warnings #174

Open
Yuriko-Schumacher opened this issue Aug 11, 2023 · 2 comments
Open

Comments

@Yuriko-Schumacher
Copy link
Contributor

We get this warning every time we run npm run deploy

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($px, $base-font-size) or calc($px / $base-font-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
111 │     @return ($px / $base-font-size) * 1em;
    │              ^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/sass-mq/_mq.scss 111:14  mq-px2em()
    node_modules/sass-mq/_mq.scss 198:25  mq()
    app/styles/_typography.scss 17:3      @import
    app/styles/main.scss 14:9             root stylesheet

The build was a success!

> parse
> node ./config/tasks/check-node-versions.js && NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development node config/scripts/parse.js

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($px, $base-font-size) or calc($px / $base-font-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
111 │     @return ($px / $base-font-size) * 1em;
    │              ^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/sass-mq/_mq.scss 111:14  mq-px2em()
    node_modules/sass-mq/_mq.scss 198:25  mq()
    app/styles/_typography.scss 17:3      @import
    app/styles/main.scss 14:9             root stylesheet
@Yuriko-Schumacher
Copy link
Contributor Author

Yuriko-Schumacher commented Aug 11, 2023

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size-b, 4) or calc($size-b / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
81 │ $size-tiny: $size-b / 4;
   │             ^^^^^^^^^^^
   ╵
    node_modules/@texastribune/queso-ui/assets/scss/1-settings/_measures.scss 81:13  @import
    node_modules/@texastribune/queso-ui/assets/scss/1-settings/_all.scss 9:9         @import
    app/styles/main-queso.scss 2:9                                                   root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($px, $base-font-size) or calc($px / $base-font-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
111 │     @return ($px / $base-font-size) * 1em;
    │              ^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/sass-mq/_mq.scss 111:14                                      mq-px2em()
    node_modules/sass-mq/_mq.scss 207:25                                      mq()
    node_modules/@texastribune/queso-ui/assets/scss/4-elements/_all.scss 5:3  @import
    app/styles/main-queso.scss 10:9                                           root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size-b, 4) or calc($size-b / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
14 │   padding-bottom: $size-b/4;
   │                   ^^^^^^^^^
   ╵
    node_modules/@texastribune/queso-ui/assets/scss/5-typography/_sectionhead.scss 14:19  @import
    node_modules/@texastribune/queso-ui/assets/scss/5-typography/_all.scss 9:9            @import
    app/styles/main-queso.scss 13:9                                                       root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($pixel-size, $context) or calc($pixel-size / $context)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
32 │   @return ($pixel-size / $context) * 1rem;
   │            ^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@texastribune/queso-ui/assets/scss/2-tools/_functions.scss 32:12                       px-to-rem()
    node_modules/@texastribune/queso-ui/assets/scss/6-components/blast-header/_blast-header.scss 21:18  @import
    node_modules/@texastribune/queso-ui/assets/scss/6-components/_all.scss 8:9                          @import
    app/styles/main-queso.scss 17:9                                                                     root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size-b, 2) or calc($size-b / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
147 │     padding: $size-b/2 0 0 0;
    │              ^^^^^^^^^
    ╵
    node_modules/@texastribune/queso-ui/assets/scss/6-components/navbar/_navbar.scss 147:14  @import
    node_modules/@texastribune/queso-ui/assets/scss/6-components/_all.scss 23:9              @import
    app/styles/main-queso.scss 17:9                                                          root stylesheet

Warning: 1 repetitive deprecation warnings omitted.

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size-b, 4) or calc($size-b / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
81 │ $size-tiny: $size-b / 4;
   │             ^^^^^^^^^^^
   ╵
    node_modules/@texastribune/queso-ui/assets/scss/1-settings/_measures.scss 81:13  @import
    node_modules/@texastribune/queso-ui/assets/scss/1-settings/_all.scss 9:9         @import
    app/styles/main.scss 2:9                                                         root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($px, $base-font-size) or calc($px / $base-font-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
111 │     @return ($px / $base-font-size) * 1em;
    │              ^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/sass-mq/_mq.scss 111:14  mq-px2em()
    node_modules/sass-mq/_mq.scss 198:25  mq()
    app/styles/_typography.scss 17:3      @import
    app/styles/main.scss 15:9             root stylesheet

@Yuriko-Schumacher
Copy link
Contributor Author

Yuriko-Schumacher commented Oct 28, 2023

Reduced the number of warnings by bumping sass to 1.69.4 and sass-mq to 6.0.0. Still showing warnings regarding node_modules/@texastribune/queso-ui/node_modules/sass-mq which could be questo-ui issue?

More on the issue: https://sass-lang.com/documentation/breaking-changes/slash-div/

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

When branches are created from issues, their pull requests are automatically linked.

1 participant