sassninja / postcss-extract-media-query Goto Github PK

Hello,

This may be what I've been looking for. Here's what I'm trying to accomplish, to see if you think this may fit my needs. I'm currently using Foundation framework, and I can't seem to figure out how to get this to work within Foundation. Do you have any guidance or experience integrating this into Foundation and getting it to extract the media queries Foundation creates? For example, can it extract all non-media query styles into its own css file, and each media query into their own css files?

Thanks in advance!

Apologies if this has already come up but I did not find an issue related to this.

Here are the steps to re-create, I am using the Vite example from this repo.

1. install sass: npm i sass
2. create .scss file in /src
3. Import .scss file in example.js
4. run: npm run start
5. Dist/ folder contains .scss file - this should be a .css file instead

I am using Preact with custom postcss.config.js. I want my styles to stay in same file or in the same output (inline CSS). How to do that.

Right now processing exported files is done by reapplying plugins to extracted files, but I could be possible just to rely on the order of execution, and thus putting postcss-extract-media-query as the last plugin in stack, after processing by other plugins.

Attaching to OnceExit postcss hook (instead of Once) ensures that the plugin code is executed at the end.

module.exports = {
  plugins = [
    require('cssnano'),
    require('postcss-extract-media-query')({
      output: { path: './' }
    })
  ]
}

Config above would firstly minify our css file, then extract it to separate files, with processing applied. At the moment it is possible only by attaching additional config to in plugin settings, which specifies that we want to minify our files.

The change, I mention would take care of such processing mostly out of the box, but it would possibly be a breaking change, because it would require a correct order of declaring plugins in postcss.config.js

my postcss configuration in laravel mix:

postCss: [
    require('postcss-extract-media-query')({
		output: {
		  path: path.join(__dirname, '/public/css'), 
		  name: '[query].css'
		},
		queries: {
		  'only screen and (min-width: 1023px)': 'desktop',
		  'only screen and (min-width: 1460px)': 'desktop',
		  'only screen and (min-width: 1800px)': 'desktop',
		  'only screen and (min-width: 1870px)': 'desktop',
		  'only screen and (min-width: 2100px)': 'desktop',
		  'only screen and (min-width: 2400px)': 'desktop'
		},
		extractAll: false
    }),
  ],

Created desktop.css with all queries but thes repeating. The queries save in desktop.css first time and then second time the same way after first time. 'postcss-combine-duplicated-selectors' and '"cssnano": {}' don't helped me
And is strange that console output three times:

[extracted media query] desktop.css
[extracted media query] desktop.css
[extracted media query] desktop.css

P.S. I want to do pull request in documentation, but wait for an answer(if code have mistakes). I spent more than an hour until I realized how it works

Here is my config
const path = require('path');

    'postcss-extract-media-query': {
        output: {
            path: path.join(__dirname, 'css')
        },
        queries: {
            'only screen and (min-width:768px) and (max-width:958px), only screen and (min-width:480px) and (max-width:700px)': 'desktop',
            'only screen and (max-width:480px)': 'mobile'
        },
        whitelist: true,
        combine: true
    }

If i have ONLY one media query per file. it works great. ex only screen and (min-width:768px) and (max-width:958px) or only screen and (min-width:480px) and (max-width:700px).

But when i try to use them both, to be placed into desktop.css this dosen't work. What could be the problem? Thank you.

In the README file we say:

It would be much better if a mobile user doesn't need to load desktop specific CSS, wouldn't it?

But the media attribute of a stylesheet doesn't actually prevent it from downloading on non-matching media queries:

https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513/

Instead, what happens is the CSS file is given a lower download priority.

It would be good if the README was updated to provide a more accurate description of the performance benefits that the approach of media query splitting actually gives.

Hey,

I'm trying to only extract media queries for one size, but I can't seem to get the extractAll option to work.

Using your gulp example as a starting point here is my postcss.config.js

I'm still getting an example-screen-and-min-width-px.css

Any help would be much appreciated, awesome plugin btw!

I see that this plugin is able to combine similar media queries. Is there a way to only use this feature without extracting the queries to their own file?

I used to use the mq-packer plugin for postcss to combine similar media queries. Unfortunately that plugin is deprecated and no longer maintained.

Is there an option to omit the surrounding query from the final output?

I've found that if my input files have more than one dot, the output file name is mixed up.

This is my config:

{
  output: {
    path: './theme/assets/',
    name: '[name]--[query].[ext]',
  },
  queries: {
    'prefers-reduced-motion: reduce': 'nomotion',
    'all and (-ms-high-contrast: none), (-ms-high-contrast: active)': 'ie'
  },
  whitelist: true
}

If either of those queries are triggered on the file _components.order-form.css, the resulting file name is _components--ie.order-form (notice the file extension is missing). The output I'm expecting here would be _components.order-form--ie.css.

Hi. Firstly thank you for making this plugin.

Is it possible when extracting media queries to leave the original file in tact with all the media queries in it? Im trying to extract all the media queries for mobile into their own file (to help serve to an amp page) but i want to still have the original file (with all media queries) available to serve to the desktop as normal.

At the minute the original file gets transformed to a file missing all the mobile media queries.

I tried to implement postcss-extract-media-query inside webpack but i keep running into this error,

Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.35, but postcss-extract-media-query uses 6.0.23. Perhaps this is the source of the error below.

Followed by,

ERROR in ./assets/scss/app.scss friendly-errors 22:07:18 Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 22:07:18 TypeError: Cannot read property 'syntax' of undefined at /Volumes/SSD/Projects/Purvis/Frontend/assets/scss/app.scss:369:3 at Root.toString (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss-syntax/patch-postcss.js:38:67) at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss-extract-media-query/index.js:81:63 at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:314:16 at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:139:18 at Root.each (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:105:16) at Root.walk (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:135:17) at Root.walkAtRules (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:312:17) at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss-extract-media-query/index.js:75:18 at LazyResult.run (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/lazy-result.js:288:14) at LazyResult.run (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss-syntax/patch-postcss.js:30:73) at LazyResult.asyncTick (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/lazy-result.js:212:26) at LazyResult.asyncTick (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/lazy-result.js:225:14) at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/lazy-result.js:217:17

Last time i tried it everything seemed to work fine (a month or 2 ago) but i didn't finished it (had some PurgeCSS fixes first). This week i wanted to squeeze some extra performance out of my NuxtJS project (especially for mobile) so i picked this one up again but no luck because of the above error.

Probably i'm doing something wrong but i couldn't find anything in the issues (or closed ones) over here.

Related webpack config,

build: { // analyze: true, extend(config, ctx) {}, extractCSS: true, postcss: { plugins: { '@fullhuman/postcss-purgecss': { content: [ './pages/**/*.vue', './layouts/**/*.vue', './components/*.vue', './components/*/*.vue' // Subfolders also ], safelist: { standard: [ /body/, /btn/, /collapse/, /collapsed/, /form-control/, /input-group/, /page-item/, /page-link/, /pagination/, /tooltip/ ], greedy: [/custom-select/] } }, 'postcss-extract-media-query': { extractAll: true } } } }

did someone tried to create correct sourcemaps after the extraction? and my 2nd question is: is it possible to run cssnano to minify all extracted files directly without any temporary folder? there is an option for that i know, but cssnano do a lot more than just minify.

thx!! great plugin!!

Scenario: I don't want to extract the media queries of (lazy-loaded) component-specific css, I only want to do this on my main stylesheet. Is this possible? Thanks.

Hi,

@supports queries in with @media queries are not found in the output.

If using @supports queries only (for the mobile stylesheet) the output is fine, but combined with @media queries, they disappear.

Could you please have a look at that?

Specifying extractAll to false and using this query in postcss.config.js

queries: {
        "screen and (min-width: 1024px)": "desktop"
} 

against this css rule (base.css):

@media screen and (min-width: 1024px)

doesn't result in expected extraction of files base.css & base-desktop.css

Even though there is no visual indication of the strings not being equal we can confirm that they're not by comparing them:

if (opts.output.path) {
root.walkAtRules('media', atRule => {
    
const query = atRule.params;
const queryname = opts.queries[query] || (opts.extractAll && _.kebabCase(query));

const test = 'screen and (min-width: 1024px)';
console.log(query.localeCompare(test)); // = -1

Removing the space between min-width: and 1024px seems to do the trick:

queries: {
        "screen and (min-width:1024px)": "desktop"
} 

I can only get the plugin to export files for the queries i enter, the css file with the queries removed no longer generates.

my config:

const path = require('path');

module.exports = {
  plugins: {
    "postcss-flexbugs-fixes":{},
    "postcss-preset-env":{  "stage": 3},
    'postcss-extract-media-query': {
      stats:true,
      entry:  path.join(__dirname, 'styles/global.css'),
      output: {
        path: path.join(__dirname, 'dist'), // emit to 'dist' folder in root
      },
      queries: {
        'print': "print",
        '(min-width:640px)': 'mobile',
        '(min-width:768px)': 'tablet',
        '(min-width:1280px)': 'desktop',
        '(min-width:1536px)': 'xl-desktop',
      },
      extractAll: false,
      config: path.join(__dirname, 'postcss.config.js')

    },
  },
};

generated files:

www/dist/global-desktop.css
www/dist/global-mobile.cs
www/dist/global-print.css
www/dist/global-tablet.css
www/dist/global-xl-desktop.css

notice there is not "global.css"

Hello,

I am using Webpack 5.0 and Webpack Encore from Symfony framework.

I noticed the generation of outgoing media stylesheets is done before Webpack setup its output directory.
So these media files get deleted, if put inside the same directory as Webpack output.

Additionally, there is no entrypoints.json. Would it be easy to do ?
For instance, I basically define an "app" entry and I get "app-mobile.css".
So at the moment the loading of this file is hardcoded, but I need to make it more dynamic.

Thank you for the hard work. This plugin is great for optimization !

Hello. In readme you mentioned that it's possible to use custom entry for specific css file. Is it possible to use several entries for several files? Can we customize each output for every entry ( if several entries are possible)?
Thanks.

Hi, I'm trying to extract some media queries from my css bundles, but unfortunately plugin is not working.

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/jscrollpane/style/jquery.jscrollpane.css
    Module build failed: TypeError: Invalid PostCSS Plugin found at: plugins[0]

Here is my postcss.config.js

const path = require('path');

module.exports = {
    plugins: [
        {
            'postcss-extract-media-query': {
                output: {
                    path: path.join(__dirname, 'dist'),
                    name: '[name]-[query].[ext]'
                },
                queries: {
                    'screen and (min-width: 1024px)': 'desktop'
                }
            }
        }
    ]
}

Postcss works fine without this plugin. I'm using webpack 3 with it.
Part of my package.json

    "postcss": "^7.0.14",
    "postcss-extract-media-query": "^1.2.0",
    "postcss-loader": "^3.0.0",

Do you have any idea why it's not working?

Hi,

I am running postcss-extract-media-query as a standalone node js instance, and all my media query css files are created.

I dont see the 'default.css' file with the leftovers on my file system.

hereby my code:

const options = {
    output: {
        path: path.join(__dirname), // emit to 'dist' folder in root
        name: '[name]-[query].[ext]' // pattern of emited files
    }
};


fs.readFile('raw_css.css', 'utf8', function (err, data) {
    if (err) {
        return console.log(err);
    }

    postcss([extractmq(options)]).process(data).then(result => {
            console.log('new css file written')
        });      
    })

can you give me advice?

btw, since I would like to futher process the results, how can I store the results in an object instead of file system? I don't use webpack, I extract css from an url and parse in your code.

Thanks a lot!

Hey!

I have a simple gulp process:

`gulp.task('css', () => {

const plugins = [
	extractMediaQuery({
		output: {
			path: dirs.dest + '/components',
		}
	})
];
return gulp.src('./dist/components/*.css')
	.pipe(postcss(plugins))
	.pipe(gulp.dest('./dist/components'));

});`

The CSS is already process from sass to css in a step before. So i have various css files in my dist/components folder.
No i want to run extractMediaQuery on it. This works.

BUT there is a major drawback:

The first file, that has extractable stuff in it, gets extracted fine. But on the next file, that has some media queries, the rules from the first extraction are applied again. And so on and so on.

So my first media css file is 318byte. The second one then too, even if the main css file doesn't have media queries. Next one is content + 318byte and so on and so on,

Not sure what i am doing wrong. Why is postcss applying the same stuff over and over again till the last file?

Here are as an example the first process file and the last process file.

@media screen and (min-width:768px){.badge .rating{padding:14px 0}} @media screen and (min-width:768px){.badge .text .image img{width:23px}} @media screen and (min-width:768px){.badge .text .rating-in-words .big{font-size:18px}} @media screen and (min-width:768px){.badge .text .rating-in-words .small{font-size:12px}}

@media screen and (min-width:768px){.badge .rating{padding:14px 0}} @media screen and (min-width:768px){.badge .text .image img{width:23px}} @media screen and (min-width:768px){.badge .text .rating-in-words .big{font-size:18px}} @media screen and (min-width:768px){.badge .text .rating-in-words .small{font-size:12px}} ......redacted by me.... @media screen and (min-width:768px){.toc{position:-webkit-sticky;position:sticky;top:88px}}

As you can see, the first four lines are reapplied.

Any help on that?