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

SASS deprecation warnings with version 1.77.7 - Mixed declarations #40621

Closed
3 tasks done
apepper opened this issue Jul 10, 2024 · 27 comments · Fixed by #40623
Closed
3 tasks done

SASS deprecation warnings with version 1.77.7 - Mixed declarations #40621

apepper opened this issue Jul 10, 2024 · 27 comments · Fixed by #40623

Comments

@apepper
Copy link

apepper commented Jul 10, 2024

Prerequisites

Describe the issue

Using the latest version of the sass package (1.77.7) there are deprecation warnings by sass. The previous sass version 1.77.6 worked fine.

Reduced test cases

  • Upgrade sass (npm i sass@latest)
  • Execute npm run css-compile

Expected:

npm run css-compile

> [email protected] css-compile
> sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/

Actual:

npm run css-compile

> [email protected] css-compile
> sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/

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

    ┌──> scss/_reboot.scss
503 │     font-weight: $legend-font-weight;
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    scss/_reboot.scss 503:3          @import
    scss/bootstrap-reboot.scss 10: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

    ┌──> scss/_reboot.scss
504 │     line-height: inherit;
    │     ^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    scss/_reboot.scss 504:3          @import
    scss/bootstrap-reboot.scss 10: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

    ┌──> scss/_reboot.scss
503 │     font-weight: $legend-font-weight;
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    scss/_reboot.scss 503:3   @import
    scss/bootstrap.scss 16: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

    ┌──> scss/_reboot.scss
504 │     line-height: inherit;
    │     ^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    scss/_reboot.scss 504:3   @import
    scss/bootstrap.scss 16: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

    ┌──> scss/_type.scss
38  │       font-family: $display-font-family;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    scss/_type.scss 38:5      @import
    scss/bootstrap.scss 17: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

    ┌──> scss/_type.scss
39  │       font-style: $display-font-style;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    scss/_type.scss 39:5      @import
    scss/bootstrap.scss 17: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

    ┌──> scss/_type.scss
40  │       font-weight: $display-font-weight;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    scss/_type.scss 40:5      @import
    scss/bootstrap.scss 17:9  root stylesheet

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

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

Latest main branch

@ajiho
Copy link

ajiho commented Jul 10, 2024

I have also encountered this issue. My project, or adminlte, also requires some scss files that rely on bootstrap. If you want to eliminate this warning, I asked if you should release bootstrap 5.3.4 so that we can obtain scss files without warnings?

@github-project-automation github-project-automation bot moved this to To do in v5.3.4 Jul 10, 2024
@julien-deramond julien-deramond moved this from To do to Needs review in v5.3.4 Jul 10, 2024
@julien-deramond julien-deramond moved this from Needs review to Review in progress in v5.3.4 Jul 10, 2024
@martn001
Copy link

martn001 commented Jul 12, 2024

I have encountered the same issues with my Vue/Vuetify project. Currently, I am receiving more then 60 different deprecation warnings for the latest version of the Vuetify package ^3.6.12. 😅

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/vuetify/lib/styles/tools/_typography.sass
3 │     font-weight: $font-weight
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
  ╵
  ┌──> node_modules/vuetify/lib/styles/tools/_position.sass
3 │ ┌     &--#{$position}
4 │ │       position: #{$position} if($important, !important, null)
  │ └─── nested rule
  ╵
    node_modules/vuetify/lib/styles/tools/_typography.sass 3:3           typography()
    node_modules/vuetify/lib/components/VSystemBar/VSystemBar.sass 23:5  @content
    node_modules/vuetify/lib/styles/tools/_layer.scss 9:5                layer()
    node_modules/vuetify/lib/components/VSystemBar/VSystemBar.sass 4:1   @use
    plugin-vuetify:components/VSystemBar/VSystemBar.sass 2:1            root stylesheet

@euro
Copy link

euro commented Jul 12, 2024

FYI 1.77.8 of Dart Sass is out.
https://github.com/sass/dart-sass/releases/tag/1.77.8

@tang2087
Copy link

Getting same warning for my Nuxt project.

@Asmmmir
Copy link

Asmmmir commented Jul 13, 2024

I got latest version of bootstrap, but I still got warnings

schu added a commit to openmultiplechoice/openmultiplechoice that referenced this issue Jul 13, 2024
`npm build` currently shows the deprecation warning below, which is about to be
fixed in Bootstrap upstream, i.e. it should be gone with one of the next
updates.

twbs/bootstrap#40621

```
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/bootstrap/scss/_type.scss
38  │       font-family: $display-font-family;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> node_modules/bootstrap/scss/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    node_modules/bootstrap/scss/_type.scss 38:5      @import
    node_modules/bootstrap/scss/bootstrap.scss 17:9  @import
    resources/scss/app.scss 15:9                     root stylesheet
```
@dkrnl
Copy link

dkrnl commented Jul 14, 2024

npm i [email protected] --save-exact

@du-disk
Copy link

du-disk commented Jul 14, 2024

i found same issue, how to fix please

@bobitza
Copy link

bobitza commented Jul 15, 2024

i found same issue, how to fix please

npm i [email protected] --save-exact

It's worked

@cotiga
Copy link

cotiga commented Jul 24, 2024

While waiting a fix... Edit the line in "package.json"
"sass": "^1.74",
by :
"sass": "1.77.6",
and do :
npm update

jayredk added a commit to hexschool/course-nuxt-layout that referenced this issue Jul 26, 2024
- Downgraded sass version to avoid deprecation warnings that were
introduced in the 1.77.7 release
- See related issue for more details: twbs/bootstrap#40621
jayredk added a commit to hexschool/course-nuxt-layout that referenced this issue Jul 26, 2024
- Downgraded sass version to avoid deprecation warnings that were
introduced in the 1.77.7 release
- See related issue for more details: twbs/bootstrap#40621
@martn001
Copy link

I have encountered the same issues with my Vue/Vuetify project. Currently, I am receiving more then 60 different deprecation warnings for the latest version of the Vuetify package ^3.6.12. 😅

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/vuetify/lib/styles/tools/_typography.sass
3 │     font-weight: $font-weight
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
  ╵
  ┌──> node_modules/vuetify/lib/styles/tools/_position.sass
3 │ ┌     &--#{$position}
4 │ │       position: #{$position} if($important, !important, null)
  │ └─── nested rule
  ╵
    node_modules/vuetify/lib/styles/tools/_typography.sass 3:3           typography()
    node_modules/vuetify/lib/components/VSystemBar/VSystemBar.sass 23:5  @content
    node_modules/vuetify/lib/styles/tools/_layer.scss 9:5                layer()
    node_modules/vuetify/lib/components/VSystemBar/VSystemBar.sass 4:1   @use
    plugin-vuetify:components/VSystemBar/VSystemBar.sass 2:1            root stylesheet

The issue I encountered with my Vue/Vuetify project has been resolved by Vuetify. They fixed the problem in a newer version. So, if you run into these issues, the solution for Vue/Vuetify projects is to upgrade the Vuetify package from '^3.6.12' to '^3.6.14'.

image

EGRrqq added a commit to protyagov/martspec that referenced this issue Aug 25, 2024
cause @latest(5.3.3) bootstrap doesnt support
breaking changes in sass 1.77.7 and 1.77.8
twbs/bootstrap#40621 (comment)
@deepak-gangwar
Copy link

Found a solution ✅

I fixed all the warnings by shifting my mixins to the end of styles. (There were a lot 🤯)

Earlier, this was giving me deprecation warnings:

 &__title {
    @include title-font;
    padding: 23px;

    @include bp-desktop {
      padding: 3vw 0 0;
    }
    
    &-inner {
      font-weight: normal';
    }
  }

You can see the bp-desktop and nested style is already at end, however the font mixin is before a normal padding style. Doing the following across the whole project fixed all warnings.

 &__title {
    padding: 23px;
    @include font-headline;

    @include bp-desktop {
      padding: 3vw 0 0;
    }
    
    &-inner {
      font-weight: normal';
    }
  }

I believe if you have any mixins or nested styles, move them after the regular styles. Put all regular styles at the start of the block. I hope this helps. 😊

@RinNguyens
Copy link

npm i [email protected] --save-exact

it worked for meee. Tks bro

@rajcracker
Copy link

It's working for me Thanks
npm i [email protected] --save-exact

@pratik149
Copy link

I believe if you have any mixins or nested styles, move them after the regular styles. Put all regular styles at the start of the block.

Thank you @deepak-gangwar. You are right, I didn't need to downgrade or anything. Simply following the instruction provided in the warning helps resolve all the warnings. ✅

elasticspoon added a commit to rubyforgood/casa that referenced this issue Sep 7, 2024
Keep this locked to 1.77.6 until bootstrap 5.3.4 is out
to silence sass deprecation warnings.

See this issue on bootstrap for details:
twbs/bootstrap#40621
elasticspoon added a commit to rubyforgood/casa that referenced this issue Sep 9, 2024
* feat: quiet sass deprecation warnings

Keep this locked to 1.77.6 until bootstrap 5.3.4 is out
to silence sass deprecation warnings.

See this issue on bootstrap for details:
twbs/bootstrap#40621

* fix: flaky specs
@hackel
Copy link

hackel commented Sep 11, 2024

FYI, to disable the deprecation warnings with Vite:

export default defineConfig(() => ({
  css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ['mixed-decls'],
      },
    },
  },
}));

@tang2087
Copy link

FYI, to disable the deprecation warnings with Vite:

export default defineConfig(() => ({
  css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ['mixed-decls'],
      },
    },
  },
}));

This is a good solution. I have updated for my Nuxt app:

export default defineNuxtConfig({
   devtools: { enabled: false },
   ssr: false,
   vite: {
      css: {
         preprocessorOptions: {
            scss: {
               silenceDeprecations: ["mixed-decls"]
            }
         }
      }
   },

}

@olivarjoseluis
Copy link

npm i [email protected] --save-exact

It's work for me, thank you!

@Mahedi-Hasan10
Copy link

npm i [email protected] --save-exact

Thank you so much. Its worked.

EGRrqq added a commit to protyagov/martspec that referenced this issue Sep 29, 2024
cause @latest(5.3.3) bootstrap doesnt support
breaking changes in sass 1.77.7 and 1.77.8
twbs/bootstrap#40621 (comment)
EGRrqq added a commit to protyagov/martspec that referenced this issue Sep 29, 2024
cause @latest(5.3.3) bootstrap doesnt support
breaking changes in sass 1.77.7 and 1.77.8
twbs/bootstrap#40621 (comment)
@themeix
Copy link

themeix commented Sep 30, 2024

It worked after change sass version npm i [email protected] --save-exact

@kauemurakami
Copy link

npm i [email protected] --save-exact

It worked here, ty !

EGRrqq added a commit to protyagov/martspec that referenced this issue Oct 3, 2024
cause @latest(5.3.3) bootstrap doesnt support
breaking changes in sass 1.77.7 and 1.77.8
twbs/bootstrap#40621 (comment)
EGRrqq added a commit to protyagov/martspec that referenced this issue Oct 6, 2024
cause @latest(5.3.3) bootstrap doesnt support
breaking changes in sass 1.77.7 and 1.77.8
twbs/bootstrap#40621 (comment)
@evgeniy-vashchuk
Copy link

For everyone using Gulp who wants to temporarily hide these warnings, there is silenceDeprecations option for this:

.pipe(sass({
    silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'color-functions', 'global-builtin', 'import'],
    outputStyle: config.isProd ? 'compressed' : 'expanded',
    indentType: 'space',
    indentWidth: 2,
    includePaths: ['./node_modules']
}).on('error', plugins.notify.onError({ title: 'Error compiling SASS' })))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.