Extending at-rules cannot occur within unnamed rules

[roberteventival]

Hi, I am trying to extend mixin inside media query, but I ran into the issue listed at subject. Is there a way around it?

@define-extend card { background-color: blue; }

@custom-media --medium (min-width: 49em);

.login {
  background-color: red;

  @media (--medium) {
    @extend card;
  }
}

with this gulpfile

'use strict';
var gulp = require('gulp')
  , sourcemaps = require('gulp-sourcemaps')
  , postcss = require('gulp-postcss');

var production = process.env.NODE_ENV && true || false;

gulp.task('css', function () {
  var postcss = require('gulp-postcss');
  var sourcemaps = require('gulp-sourcemaps');
  var processors = [
    require('postcss-custom-media'),
    require('postcss-extend')
  ];

  return gulp.src('stylesheets/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('out/'));
});

[stephenzhao]

same issue..

[lordaplala]

The parent selector of the extend must not be a media query according to their code :

      if (atRule.parent.selector === undefined || atRule.parent.selector === '') {
        if (atRule.parent.name === 'define-placeholder') {
          result.warn('Extending at-rules cannot occur within @define statements, only within `%` silent classes', { node: atRule });
        } else {
          result.warn('Extending at-rules cannot occur within unnamed rules', { node: atRule });
        }
        return true;
      }

So in your case, this would work :

@define-extend card { background-color: blue; }

@custom-media --medium (min-width: 49em);

.login {
  background-color: red;
}

@media (--medium) {
    .login {
        @extend card;
    }
}