File-based modularised definitions not propagating up.

[Panoplos]

I have the following directory structure:

src
  |-- web
  |     |-- styles
  |           |-- settings.less
  |           |-- site.less
  |-- universal
        |-- components
              |-- navbar
                    |-- navbar.less

Where navbar.less imports site.less, which imports settings.less.

Inside settings.less I have the following:

@custom-media --small (max-width: 24em);
@custom-media --medium (max-width: 40em);
@custom-media --large (max-width: 50em);
@custom-media --xl (max-width: 73em);

Inside site.less, I have:

@import "./settings.less";

And inside navbar.less, I am attempting to use --small as follows:

@import (reference) 'site.less';

#navbar {
 @media screen and (--small) {
    .following.bar {
      visibility: visible;
    }
    .main.menu {
      visibility: hidden;
    }
  }
  &.active {
    width: 100vw;
    height: 100vh;
    background-color: #aaa;
  }
}

(Note that I have set up an alias in webpack to resolve site.less correctly.)

Now, when building this config, I get the following WARNING:

WARNING in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./src/universal/components/navbar/navbar.less
(Emitted value instead of an instance of Error) postcss-custom-media: /home/panoplos/Documents/Development/Node.js/testing-postcss/src/universal/components/navbar/navbar.less:6:2: Missing @custom-media definition for '--small'. The entire rule has been removed from the output.
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-custom-media: /home/panoplos/Documents/Development/Node.js/testing-postcss/src/universal/components/navbar/navbar.less:6:2: Missing @custom-media definition for '--small'. The entire rule has been removed from the output.

How can I get this to work correctly?

[Panoplos]

OK, it looks like the @import (reference) is the issue. If I remove that, it works, but this is because this copies all the contents of the imported files into the local file, which is undesired and is the whole reason to use reference. For instance, I am using semantic-ui, which is large enough on its own, let alone if it gets imported into every file. The workaround is to include settings.less directly without the (reference), but I would like to get this module working with reference imports. Is there a way to do this?

[robertwbradford]

@Panoplos Did you ever figure something out for this?

[Panoplos]

No, this seems like a bug. I guess this project is dead?

[jonathantneal]

Your issue seems to related to a combination of things. It's fair that this project would not be responsible for import statements, and that seems to be at least part of this issue. Which tool are you using to accomplish that? Is it another PostCSS plugin? Are you able to create a reduced test case with only the bare minimum tools required to break this?

[Panoplos]

You can see the tool chain in the error, and I think the information above is clearly enough to reproduce easily.

[robertwbradford]

@Panoplos I was able to get my app working with https://github.com/MoOx/postcss-cssnext instead. It includes its own support for custom media queries (along with a lot of other great features).

[Panoplos]

I may have to abandon this plugin for that one...

[shnam7]

I'm using postcss-cssnext and experiencing the same issue. Is there any progress on this?

[jonathantneal]

This plugin has been rewritten. If any problems persist, please create a new issue.