retyui / group-css-media-queries-loader

Webpack loader : group-css-media-queries

group-css-media-queries-loader

A group-css-media-queries loader for webpack.

Getting Started

To begin, you'll need to install loader:

yarn add -D group-css-media-queries-loader

Then add the plugin to your webpack config. For example:

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          "group-css-media-queries-loader",
        ],
      },
    ],
  },
};

Options

sourceMap: boolean

Enables/Disables generation of source maps. (default: compiler.devtool)

group-css-media-queries-loader's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Example with SASS

Are you able to combine this plugin with nested media queries in SASS? I am getting this error:

ERROR in ./~/css-loader!./~/sass-loader!./~/postcss-loader!./~/group-css-media-queries-loader!./src/style.scss
Module build failed: Error: undefined:10:2: missing '}'
    at error (C:\xampp\htdocs\webpacktest\node_modules\css\lib\parse\index.js:62:15)
    at declarations (C:\xampp\htdocs\webpacktest\node_modules\css\lib\parse\index.js:259:26)
    at rule (C:\xampp\htdocs\webpacktest\node_modules\css\lib\parse\index.js:560:21)
    at rules (C:\xampp\htdocs\webpacktest\node_modules\css\lib\parse\index.js:117:70)
    at stylesheet (C:\xampp\htdocs\webpacktest\node_modules\css\lib\parse\index.js:81:21)
    at module.exports (C:\xampp\htdocs\webpacktest\node_modules\css\lib\parse\index.js:564:20)
    at Object.module.exports (C:\xampp\htdocs\webpacktest\node_modules\group-css-media-queries\index.js:12:14)
 @ ./src/style.scss 4:14-216

My config is as follow....

module: {
        loaders: [
            { test: /\.scss$/, loader: 'style!css!sass!postcss!group-css-media-queries' }
        ]
    },

group-css-media-queries: postcss.plugin was deprecated.

migration guide - https://evilmartians.com/chronicles/postcss-8-plugin-migration

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Sourcemap support

As soon as I added the group-css-media-queries-loader to my chain, sourcemap support broke down. I tried adding options: {sourceMap: true} to the loader, like you can do on the sass-loader and the css-loader, but it made no difference.

What has to be done in order for sourcemaps to still work when using this loader?

Loader not working.

Hello!
This is my config:

module: {
rules: [
            {
                test: /\.scss$/,
                use: 
                [
                    MiniCssExtractPlugin.loader,
                    {loader: "css-loader", options: {url: false}},
                    "group-css-media-queries-loader",
                    "sass-loader"
                ]
            },
]
}

After build resulting css file stay the same - media queries not grouped.

grouped code generation in the end of file maybe has a problem

I using stylus in my project, so that media-query can be nested, the scenario is:

bg2x(src) {
  @media screen and (min-resolution: 2dppx) {
    background-image: url(src);
  }
}

.foo {
  ...
  bg2x("img/[email protected]");
}

@media screen and (max-width: 768px) {
  .foo {
    bg2x("img/[email protected]");
  }
}

finally compiled:

@media screen and (max-width: 768px) and (min-resolution: 2dppx) {
 foo {
    bg2x("img/[email protected]");
  }
}

@media screen and (min-resolution: 2dppx) {
  ...

  .foo {
    ...
    bg2x("img/[email protected]");
  }
}

the result is .foo doesn't use [email protected] but img/[email protected]

Default options should be used if options are not supplied

Hi,

I currently have the following configuration:

{
    test: /\.scss$/,
    use: [
        { loader: MiniCssExtractPlugin.loader },
        { loader: "css-loader" },
        { loader: "postcss-loader", options: { parser: 'sugarss' } },
        { loader: "group-css-media-queries-loader" },
        { loader: "sass-loader" }
    ]
}

And when I run webpack", I get the following error:

TypeError: Cannot read property 'sourceMap' of null

I can fix the issue easily like this:

{ loader: "group-css-media-queries-loader", options: { sourceMap: false } }

However, it would be cool to be able not to specify any options, for example, for the people who are using the following syntax:

use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "group-css-media-queries-loader", "sass-loader"]

Currently, the syntax above is not supported.

Cheers

npm package version 3.0.0 does not include the lib folder

Hi,

I just tried to use this package but when I install it via yarn (yarn add group-css-media-queries-loader -D), I can't use it as the directory in "node_modules" does not contain the "lib" directory.

I installed the version 2.0.2 and this one does contain it.

Cheers

wrong order @media

I use this sass code:

@media (max-width: 640px)  {
  .login {
    &__block {
      max-width: 400px;
    }
    &__title {
      align-self: center;
      margin-right: 0;
      margin-bottom: 25px;
    }
    &__button {
      align-self: center;
      margin-right: 0;
    }
  }
}
@media (max-width: 480px)  {
  .login {
    &__block {
      max-width: 300px;
    }
  }
}

My Webpack config:

      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'group-css-media-queries-loader',
          'sass-loader',
        ],
      },

group-css-media-queries-loader groped queries, but order wrong - 480px go before 640px i.e:

@media (max-width: 1281px)
@media (max-width: 960px)
@media (max-width: 480px)
@media (max-width: 640px) 

what i do wrong?
itry last verision 4.3.0 and 3.0.2 in both - order wrong.