@include-media within a rule body?

[jkeen]

I love that this plugin exists! Is it possible to use the include-media declaration from within a rule (like you could in scss)? I got so used to doing things like this in sass that in trying to switch from the old way to the new way feels prehistoric.

scss:

.sidebar { 
  font-size: 12px;
  @include media(">tablet") {
    font-size: 14px;
  }
  @include media(">desktop") {
    font-size: 16px;
  }
}

The above doesn't compile with postcss + postcss-include-media. It seems that this plugin requires the declaration outside the rule body (like raw css)?

.sidebar { 
  font-size: 12px;
}

@include-media(">tablet") {
  .sidebar {
    font-size: 14px;
  }
}

@include-media(">desktop") {
  .sidebar {
    font-size: 16px;
  }
}

Is there another plugin I need to add to the stack in order to get this behavior, is there a technical limitation, or is this functionality worth adding to this plugin?

[pavlexander]

I was mainly looking forward to using this plugin for this exact functionality.. Have you solved the issue? @jackmcpickle , could you please elaborate if this functionality that @jkeen is requesting is possible to achieve using your plugin?

[jackmcpickle]

@pavlexander Yes. Updated the tests and docs/readme. You need postcss-nested too. Load that before and you should be good. Will look to including it in maybe later.

Sorry for late reply @jkeen. Missed this issue.

[ekfuhrmann]

@jackmcpickle This works, but is there a way to make it so that it's using @include media(...) as opposed to @include-media(...)?

My Scss theme doesn't like that syntax apparently, and prettier wants to toss a space after -media.

as opposed to this...

[jackmcpickle]

So looking deeper @ekfuhrmann Seems the AST for @ rules in postcss treats it different. See for line @include media('>=phone') {

atRule: {
      name: <ref *2> AtRule {
        raws: {
          before: '',
          between: ' ',
          afterName: ' ',
          semicolon: false,
          after: ' '
        },
        type: 'atrule',
        name: 'include',
        parent: <ref *1> Root {
          raws: [Object],
          type: 'root',
          nodes: [Array],
          source: [Object],
          proxyCache: [Circular *1],
          lastEach: 1,
          indexes: [Object],
          [Symbol(isClean)]: true,
          [Symbol(my)]: true
        },
        source: { start: [Object], input: [Input], end: [Object] },
        params: "media('>=phone')",
        nodes: [ [Rule] ],
        proxyCache: [Circular *2],
        [Symbol(isClean)]: false,
        [Symbol(my)]: true
      }
    }

I'm happy to add in a config for this.

[jackmcpickle]

@ekfuhrmann Pushed 1.1.0 release. supports ruleName config. See readme.

[ekfuhrmann]

This is incredible! With that I changed it to use @media and it works like a charm. Thank you so much for being able to implement that so quickly as well as document it!

I've loved your work on the include-media package and have used it for years, with this change I'm happy to swap over to this postcss implementation!

[ekfuhrmann]

Quick addendum from my previous post.

When using media as the ruleName, it actually can create issues with postCSS. I was getting the following console log:

postcss-include-media: You have not defined an operator "" for @include-media

This most likely is due to the fact that @media is already valid CSS, so it has trouble differentiating between the two. The simple fix is to just use a different ruleName that does not conflict.

[jackmcpickle]

@ekfuhrmann thats strange. If I try the same thing in my tests it works. But this is in an isolated state. So maybe in real world setting with many plugins and nested css it doesn't work. “¯_(ツ)_/¯“

[ekfuhrmann]

It didn't begin to log the error until I had a bracket comment in my scss .

@use '../base/typography';

.tag {
  color: lime;

  @media ('>=md') {
    color: red;
  }

  // Comment here caused the console to log the error
  &__label {
    @include typography.h1;
  }
}

It's possible that some other stuff in my config is the culprit here. No matter, should it come up for someone else, using a different name fixes the error.

[jackmcpickle]

Having @media ('>=md') { does look a bit magic. 😅

[ekfuhrmann]

Having @media ('>=md') { does look a bit magic. 😅

hah, I like simplicity. I settled for @mq ('>=md').

Thanks again for the plugin. I've long loved the old scss include-media and am happy to see it living on strong in postcss!