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

Feature request: handle bad @extends better #3081

Closed
Ariane-B opened this issue Apr 22, 2020 · 2 comments
Closed

Feature request: handle bad @extends better #3081

Ariane-B opened this issue Apr 22, 2020 · 2 comments

Comments

@Ariane-B
Copy link

Ariane-B commented Apr 22, 2020

Long ago, Sass stopped taking compound @extends. It said an error message to the effect of "please use .selector-1, :pseudo-class". I didn't read the details, and I just obeyed. The code still worked, and I didn't bother to check, but that had the effect of producing monster selectors. For instance, extending ::before would extend every ::before in the code base.

It produced huge CSS files, but it worked. Recently, however, the result of my wrong @extend has just been... infinite compilation, a fast spinning fan, and the need to force-quit CodeKit.

I know my code is wrong, and I've refactored it in newer projects. But I wish these cases were handled better. An error message or something, instead of just infinitely looping on my extends. Because I'll need to fix older projects moving forward.

It would be nice if the compiler helped with error messages instead of just dying on me.

Would that be doable?

some-file.scss

.icon-arrow-right:before {
  content: "\e90a";
}

.some-random-element-with-before {
  &::before {
    content: '';
    // other styles
  }
}

.some-element {
  @extend .icon-arrow-right, :before;
}
// Repeat this sort of thing several times in the code base

Actual results

[Infinite compiling... CodeKit needs to be force-quit]

Expected result

[ERROR!] You probably @extended wrong, because
this is the 100th time we've extended "::before".
Compiling stopped at line X of file Y.

---OR---

[WARNING] Compiled successfully, but we produced the following gargantuan selector. Maybe fix your stuff?
Selector originates at line X of file Y.

version info:

codekit          3.11
node-sass        N/A     (Wrapper)       [JavaScript]  (I think CodeKit doesn't use this)
libsass          3.6.3   (Sass Compiler) [C/C++]
@pmusaraj
Copy link

I think this is a regression. I ran into a similar infinite loop with sassc-ruby, see sass/sassc-ruby#213

sassc-ruby 2.3.0, using libsass 3.6.3 results in infinite compilation.
sassc-ruby 2.2.1, using libsass 3.6.1 completes compiling.

@mgreter
Copy link
Contributor

mgreter commented May 20, 2021

Note: code from OP seems to work ok and doesn't recurse endlessly.
The linked issue has some code that still does though:

// Administrative buttons
.btn {
  // Buttons with no extra styles
  &.-flat {
    border: none;

    &,
    &:hover {
      background: transparent;
    }
  }
}

// Otherwise extends would fail
.-small, .-no-icon, .btn-secondary { 
  a: b;
}

//
// UI Button Corrections
// ---------------------

// "New Topic" button
.btn#create-topic {
  @extend .btn-secondary;
  @extend .btn.-no-icon;
}

// "Create Topic" button
.btn.create,
.btn.edit-category {
  @extend .btn.-no-icon;
}

// Button to load more topics on homepage
.more-topics {
  .btn {
    @extend .btn.-small;
  }
}

// Topic footer buttons
#topic-footer-buttons {
  > button {
    @extend .btn.-flat;
  }

  > .btn-primary {
    @extend .btn-secondary;
  }
}

// Notification options
.notification-options {
  .btn {
    @extend .btn.-flat;
  }
}

// Extra post options
.topic-map {
  .buttons {
    .btn {
      @extend .btn.-flat;
    }
  }
}

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

No branches or pull requests

3 participants