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

Setting $color-mode-type to media-query (rather than data) causes a Sass compilation erro #37673

Closed
3 tasks done
Tracked by #37549
RichDeBourke opened this issue Dec 20, 2022 · 1 comment · Fixed by #37687
Closed
3 tasks done
Tracked by #37549

Comments

@RichDeBourke
Copy link

Prerequisites

Describe the issue

I downloaded the Bootstrap GitHub repository (version from 12/19/2022) to try dark mode.

Compiling Sass with the default value (data) compiles successfully (I’m using Glenn Marks’ Live Sass Compiler for VS Code).
$color-mode-type: data !default;

If I set $color-mode-type to media-query (overriding the default data) in my _site_variables.scss file, the compiler generates the following error:

Compilation Error
Error: Declarations may only be used within style rules.
    ╷
135 │     --#{$prefix}body-color: #{$body-color-dark};
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  c:\wamp64\www\f3-5\node_modules\bootstrap\scss\_root.scss 135:5             @content
  c:\wamp64\www\f3-5\node_modules\bootstrap\scss\mixins\_color-mode.scss 5:7  color-mode()
  c:\wamp64\www\f3-5\node_modules\bootstrap\scss\_root.scss 133:3             @import
  c:\wamp64\www\f3-5\src\scss\style.scss 25:9                                 root stylesheet
--------------------

I was expecting to have the Sass output something like:

@media (prefers-color-scheme: dark) {
    :root {
        --bs-body-color: #adb5bd;
    }
}

Reduced test cases

I don't have a suggested fix and I'm not sure how to do a test case since this version (5.3.0?) is available on a CDN yet.

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

Windows

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

No response

What version of Bootstrap are you using?

5.3.0

@julien-deramond
Copy link
Member

julien-deramond commented Dec 20, 2022

Thanks a lot @RichDeBourke for having created this issue. I can confirm the issue when $color-mode-type is modified directly into _variables.scss. I'll try to provide a patch before the 5.3.0 alpha is released.

@mdo I'm adding in the task lists to try to add something in our automatic build to check that. Otherwise, we will probably introduce some other bugs in the future.

@julien-deramond julien-deramond moved this to To do in v5.3.0 Dec 20, 2022
Repository owner moved this from To do to Done in v5.3.0 Dec 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants