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

BEM-style mixin produces invalid selectors #1250

Closed
vladcosorg opened this issue May 30, 2015 · 3 comments
Closed

BEM-style mixin produces invalid selectors #1250

vladcosorg opened this issue May 30, 2015 · 3 comments

Comments

@vladcosorg
Copy link

BEM-style mixin produces invalid selectors when compiled with libsass 3.2.4, whereas ruby sass produces expected output.

source.sass

@import mixins/bem

+b(address)
  +e(headline)
    color: #bebebe
    +m(footer)
      display: none

  +m(footer)
    +e(headline)
      font-weight: bold

ruby sass:

.address__headline {
  color: #bebebe;
}

.address__headline--footer {
  display: none;
}

.address--footer .address__headline {
  font-weight: bold;
}

libsass:

.address .address__headline {
  color: #bebebe; 
}
.address .address__headline .address .address__headline--footer {
    display: none; 
}

.address .address--footer .address .address--footer address .address__headline {
  font-weight: bold; 
}

BEM mixin helper:

// mixin use  bem style coding
$elementSeparator: "__"
$modifierSeparator: "--"

@function selectorToString($selector)
  $selector: inspect($selector)
  //cast to string
  $selector: str-slice($selector, 2, -2)
  //remove bracket
  @return $selector

@function containsModifier($selector)
  $selector: selectorToString($selector)
  @if str-index($selector, $modifierSeparator)
    @return true
  @else
    @return false

@function getBlock($selector)
  $selector: selectorToString($selector)
  @if str-index($selector, $modifierSeparator)
    $modifierStart: str-index($selector, $modifierSeparator) - 1
    @return str-slice($selector, 0, $modifierStart)
  @else
    @return $selector

=b($block)
  .#{$block}
    @content

=e($element)
  $selector: &
  $block: getBlock($selector)
  @if containsModifier($selector)
    @at-root #{$selector}
      #{$block + $elementSeparator + $element}
        @content
  @else
    @at-root #{$selector + $elementSeparator + $element}
      @content


=m($modifier)
  @at-root
    #{&}#{$modifierSeparator + $modifier}
      @content

@xzyfer
Copy link
Contributor

xzyfer commented May 31, 2015

Duplicate #1210

@xzyfer xzyfer closed this as completed May 31, 2015
@vladcosorg
Copy link
Author

Having the parent ticket marked as fixed, this specific case still does not work on latest beta.
Now the output is

.address__headline {
  color: #bebebe;
}

.address__headline--footer {
  display: none;
}

.address--footer address__headline {
  font-weight: bold;
}

Almost right, but notice the missing dot in the last selector.

@xzyfer
Copy link
Contributor

xzyfer commented Oct 5, 2015

@chetzof I've reduced this down to the core issue in #1583

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

1 participant