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

Bootstrap output #115

Open
Keats opened this issue Jul 3, 2021 · 6 comments
Open

Bootstrap output #115

Keats opened this issue Jul 3, 2021 · 6 comments

Comments

@Keats
Copy link

Keats commented Jul 3, 2021

Bootstrap now compiles without errors (🎊 ) but it produces some invalid CSS as it seems it didn't process everything.

The following bits are present in rsass output:

@extend h1;
@extend h2;
@extend h3;
@extend h4;
@extend h5;
@extend h6;
@extend .container-fluid;
@media (min-width: 576px) {
  %responsive-container-sm {
    max-width: 540px;
  }
@extend %responsive-container-sm;@extend %responsive-container-sm;}

@extend .container-fluid;
@media (min-width: 768px) {
  %responsive-container-md {
    max-width: 720px;
  }
@extend %responsive-container-md;@extend %responsive-container-md;@extend %responsive-container-md;}

@extend .container-fluid;
@media (min-width: 992px) {
  %responsive-container-lg {
    max-width: 960px;
  }
@extend %responsive-container-lg;@extend %responsive-container-lg;@extend %responsive-container-lg;@extend %responsive-container-lg;}

@extend .container-fluid;
@media (min-width: 1200px) {
  %responsive-container-xl {
    max-width: 1140px;
  }
@extend %responsive-container-xl;@extend %responsive-container-xl;@extend %responsive-container-xl;@extend %responsive-container-xl;@extend %responsive-container-xl;}

@extend .container-fluid;
@media (min-width: 1400px) {
  %responsive-container-xxl {
    max-width: 1320px;
  }
@extend %responsive-container-xxl;@extend %responsive-container-xxl;@extend %responsive-container-xxl;@extend %responsive-container-xxl;@extend %responsive-container-xxl;@extend %responsive-container-xxl;}
  content: var(--bs-breadcrumb-divider, escape-svg($breadcrumb-divider)) /* rtl: var(--bs-breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) */;

So it looks like some extend are not rendered and potentially some variables not replaced?

@kaj
Copy link
Owner

kaj commented Jul 3, 2021

Yes, bootstrap uses the @extend directive, which is not yet implemented by rsass (see #65 ). And since @extend is not yet supported, it is handled as if it were a css @... rule.

@Keats
Copy link
Author

Keats commented Jul 3, 2021

Ah sorry I've missed that. It looks like a big chunk of work I guess, maybe the dart-sass implementation is clearer than the document?

The last one though doesn't seem like a @extend, it looks like a variable hasn't been replaced.

@shyim
Copy link

shyim commented Oct 16, 2022

I tested it also but it does not output anything. The CLI just hangs

@kaj
Copy link
Owner

kaj commented Aug 3, 2023

I tested it also but it does not output anything. The CLI just hangs

That shouldn't happen anymore (for any input).

Since release 0.28.0 any use of @extend should give an error message saying that it is not supported yet, instead of writing bogus output.

@CraftSpider
Copy link

On 0.28.2, using bootstrap 5.0.2, rsass hangs while importing bootstrap.scss. Based on the find_file stuff printed in the console, it's happening somewhere in vendor/_rfs.scss, and based on debugging it's running one of the while loops in it forever.

@kaj
Copy link
Owner

kaj commented Nov 11, 2023

Ah, that sass implementation of division does not play well with the arbitrary precision rational numbers used by rsass.

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

No branches or pull requests

4 participants