Stylus @extend inside a media query

stylus-media-query-extend.styl

// Extend in a media query
// =============================================================================

// Mixins
// -----------------------------------------------------------------------------
clearfix()
  &:before,
  &:after
    content: ' '
    display: tablet

  &:after
    clear: both

hide()
  position: absolute
  left: -9999em
  text-align: left
  direction: ltr

// Generate placeholders
// -----------------------------------------------------------------------------
placeholders = ('clearfix' 'hide')

for placeholderName in placeholders
  ${placeholderName}
    fn = lookup(placeholderName)
    fn()

// Generate breakpoints variables
// -----------------------------------------------------------------------------
breakpoints = {
  smalltablet: 501px,
  tablet: 769px,
  desktop: 1025px
}

for breakpointName, breakpointValue in breakpoints
  breakpointName = '$' + breakpointName

  // define breakpoint variable
  define(breakpointName, s('(min-width: %s)', breakpointValue))

  // create breakpoint placeholders
  @media breakpointName
    for placeholderName in placeholders
      {breakpointName}_{placeholderName}
        fn = lookup(placeholderName)
        fn()


// Dynamic extend
// -----------------------------------------------------------------------------
_extend(name)
  // check if in media
  _currentMedia = current-media()

  if _currentMedia
    _breakpoint = replace('@media \((.*)\)', '$1', _currentMedia)

    if lookup(_breakpoint)
      @extend {_breakpoint + '_' + name}
    else
      warn(_breakpoint + ' does not exist')

  else
    @extend {'$' + name}


// Demo
// -----------------------------------------------------------------------------
.element-a
  background: #000
  _extend('clearfix')

.element-b
  background: #FFF

  @media $smalltablet
    _extend('clearfix')
    opacity: .8

.element-c
  background: #666

  @media $smalltablet
    _extend('clearfix')
    opacity: .8

  @media $tablet
    _extend('hide')
    opacity: .8

Output:

.element-a:before,
.element-a:after {
    content: ' ';
    display: tablet;
}
.element-a:after {
    clear: both;
}
@media (min-width: 501px) {
    .element-b:before,
    .element-c:before,
    .element-b:after,
    .element-c:after {
        content: ' ';
        display: tablet;
    }
    .element-b:after,
    .element-c:after {
        clear: both;
    }
}
@media (min-width: 769px) {
    .element-c {
        position: absolute;
        left: -9999em;
        text-align: left;
        direction: ltr;
    }
}
.element-a {
    background: #000;
}
.element-b {
    background: #fff;
}
@media (min-width: 501px) {
    .element-b {
        opacity: 0.8;
    }
}
.element-c {
    background: #666;
}
@media (min-width: 501px) {
    .element-c {
        opacity: 0.8;
    }
}
@media (min-width: 769px) {
    .element-c {
        opacity: 0.8;
    }
}