Invalid prelude for @media csstree/validator

[rgant]

As far as I know this is valid SCSS/SASS:

/// Custom breakpoints
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @param {String} $from - Defaults to "min-width" (mobile first)
///        can also take "max-width" to select elements under the provided size.
@mixin breakpoint($breakpoint, $from: 'min-width') {
  @media ($from: $breakpoint) {
    @content;
  }
}

But it results in an error:

src/styles/abstracts/_mixins.scss 25:11 ✖ Invalid prelude for @media csstree/validator

My config: .stylelintrc.yml:

+  csstree/validator:
+    syntaxExtensions:
+      - sass

I have installed: [email protected]

First referenced in csstree/csstree#118 #issuecomment-993945845

[lahmatiy]

The plugin is limited in validation of expressions which contain preprocessor's syntax (since it should be evaluated). So it avoid a validation of them. For now the plugin uses stylelint's isStandardSyntax*() helpers to detect non-standard syntax and some additional tricks for declaration values (but not for at-rule's preludes). Looks like isStandardSyntaxAtRule() helper doesn't catch such kind of expressions. So I'm going to add the same workaround for at-rule prelude as for declaration values. I think it should help.

[tleunen]

Just got the same with @keyframes with this. Funny enough. This is problematic with v2, but not v1

@mixin keyframes($animationName) {
  @keyframes #{$animationName} {
    @content;
  }
}

[lahmatiy]

Fixed in 2.1.0

[pinkhominid]

I'm seeing the same error (with 2.1.0) using the postcss-lit custom syntax for expressions like this

css`
    @media (min-width: 500px) and ${namedMedia.css.mobile} {
        /* ... */
    }
`

whereas this doesn't error

css`
    @media ${namedMedia.css.mobile} {
        /* ... */
    }
`

[pinkhominid]

Created #52 to track this.