rsass icon indicating copy to clipboard operation
rsass copied to clipboard

Bootstrap output

Open Keats opened this issue 4 years ago • 6 comments

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?

Keats avatar Jul 03 '21 09:07 Keats

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.

kaj avatar Jul 03 '21 16:07 kaj

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.

Keats avatar Jul 03 '21 18:07 Keats

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

shyim avatar Oct 16 '22 21:10 shyim

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.

kaj avatar Aug 03 '23 13:08 kaj

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.

CraftSpider avatar Oct 31 '23 02:10 CraftSpider

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

kaj avatar Nov 11 '23 01:11 kaj