Plugin + Foundation setup about postcss-extract-media-query HOT 13 CLOSED

Hi @sensaetions

thanks for your issue!

can it extract all non-media query styles into its own css file, and each media query into their own css files?

the plugin doesn't extract non-media queries but only extracts media query (doesn't make sense vice versa)

I'm currently using Foundation framework, and I can't seem to figure out how to get this to work within Foundation

you need to specify all queries you wanna extract (e.g. 'screen and (min-width: 40em)' : 'small') and use the plugin in the PostCSS pipe of your assets build process.

what build tool are you using?

from postcss-extract-media-query.

Thanks for the response @SassNinja! I’m using Foundation framework, which uses webpack and gulp build tools. How can I add multiple media queries to the postcss pipe?

from postcss-extract-media-query.

It doesn't matter what Foundation uses but what YOU are using. If it's gulp you need gulp-postcss to add PostCSS to your build process.

I highly recommend you take a look at my examples:
https://github.com/SassNinja/postcss-extract-media-query/tree/master/examples

I've create examples for several common build tools.
However if you're using webpack I definitely recommend using my other media-query-plugin

How can I add multiple media queries to the postcss pipe?

simply add it to your config:

'postcss-extract-media-query': {
    queries: {
		'screen and (min-width: 40em)': 'medium',
        'screen and (min-width: 64em)': 'large'
    }
}

from postcss-extract-media-query.

Hello,

Can you help me take a look at my situation and see why this isn't working? I'm expecting that all of the media queries I've set to go into the "small" will be extracted from my app.css file into app-small.css. But that's not the case. When I include multiple media queries (see below), the output css file only includes ONE media query in each file, not all of the ones defined in a specific postcss setting.

sass task in gulpfile settings:

function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
        includePaths: PATHS.sassLibraries
      })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    .pipe($.combineMq({
       beautify: true
    }))
    .pipe($.postcss())
    // process app.scss through 'postcss-extract-media-query' to split css into different files based on media queries
    .pipe($.if(!PRODUCTION, $.cleanCss({
      compatibility: 'ie9'
    })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest('src/assets/css'))
    .pipe(browser.reload({
      stream: true
    }));
}

postcss.config.js settings file:

const path = require("path");

module.exports = {
  plugins: {
    "postcss-extract-media-query": {
      // minimize: true,
      output: {
        path: path.join(__dirname, "src/assets/css")
      },
      queries: {
        // orientation, oddballs
        "screen and (orientation:portrait)": "small",
        "screen and (orientation:landscape)": "small",
        "screen and (min-width:0\0)": "small",
        "not print": "small",

        // basic, min
        "screen and (min-width:30em)": "small",
        "print,screen and (min-width:40em)": "small",
        "screen and (min-width:48em)": "medium",
        "print,screen and (min-width:64em)": "medium",
        "screen and (min-width:75em)": "large",
        "screen and (min-width:81.25em)": "large",
        "screen and (min-width:87.5em)": "large",
        "screen and (min-width:93.75em)": "large",
        "screen and (min-width:100em)": "large",
        "screen and (min-width:112.5em)": "large",

        // basic, max
        "screen and (max-width:29.99875em)": "small",
        "screen and (max-width:39.99875em)": "small",
        "screen and (max-width:47.99875em)": "small",
        "screen and (max-width:63.99875em)": "small",
        "screen and (max-width:74.99875em)": "medium",
        "screen and (max-width:81.24875em)": "medium",
        "screen and (max-width:87.49875em)": "large",
        "screen and (max-width:93.74875em)": "large",
        "screen and (max-width:99.99875em)": "large",
        "screen and (max-width:112.49875em)": "large",

        // min, max
        "screen and (max-width:0em),screen and (min-width:30em)": "small",
        "screen and (max-width:29.99875em),screen and (min-width:40em)": "small",
        "screen and (min-width:30em) and (max-width:39.99875em)": "small",
        "screen and (max-width:39.99875em),screen and (min-width:48em)": "small",
        "screen and (min-width:40em) and (max-width:47.99875em)": "small",
        "screen and (max-width:47.99875em),screen and (min-width:64em)": "small",
        "screen and (min-width:48em) and (max-width:63.99875em)": "small",
        "screen and (min-width:48em) and (min-width:64em)": "small",
        "screen and (min-width:48em) and (min-width:87.5em)": "small",
        "screen and (max-width:63.99875em),screen and (min-width:75em)": "small",
        "screen and (min-width:64em) and (max-width:74.99875em)": "medium",
        "print,screen and (min-width:64em) and (min-width:64em)": "medium",
        "screen and (max-width:74.99875em),screen and (min-width:81.25em)": "large",
        "screen and (min-width:75em) and (max-width:81.24875em)": "large",
        "screen and (min-width:81.25em) and (max-width:87.49875em)": "large",
        "screen and (max-width:81.24875em),screen and (min-width:87.5em)": "large",
        "screen and (max-width:87.49875em),screen and (min-width:93.75em)": "large",
        "screen and (min-width:87.5em) and (max-width:93.74875em)": "large",
        "screen and (max-width:93.74875em),screen and (min-width:100em)": "large",
        "screen and (min-width:93.75em) and (max-width:99.99875em)": "large",
        "screen and (max-width:99.99875em),screen and (min-width:112.5em)": "large",
        "screen and (min-width:100em) and (max-width:112.49875em)": "large",

        // height
        "screen and (max-height:800px) and (min-width:64em)": "medium",

        // IE
        "screen and (-ms-high-contrast:active),(-ms-high-contrast:none)": "large",
        "all and (-ms-high-contrast:none)": "large",
        "print and (-ms-high-contrast:none),screen and (-ms-high-contrast:active) and (min-width:64em),screen and (-ms-high-contrast:none) and (min-width:64em)": "large",

        // Print
        print: "print"
      },
      stats: false,
      // whitelist: true
    }
  }
};

from postcss-extract-media-query.

When I include multiple media queries (see below), the output css file only includes ONE media query in each file

I can see you're using gulp-combine-mq what might be responsible for what you're describing

However please share a whole project so it's easier to follow your build process and find out what's wrong.
You can use e.g. https://codesandbox.io/

from postcss-extract-media-query.

Thank you for the response. Actually, the module gulp-combine-mq is independent of the postcss-extract-media-query module, and it simply combines all of the redundant media queries when it's being processed from sass to css. Even with gulp-combine-mq disabled, the postcss-extract-media-query module only exports ONE random media query into its specified css output.

Here is my codesandbox for this project: https://codesandbox.io/s/github/sensaetions/foundation-split-css. I'm new to CodeSandbox; Do I need to commit my "dist" folder in order for you to see the results?

from postcss-extract-media-query.

Do I need to commit my "dist" folder in order for you to see the results?

Definitely not since this would bloat the project without need.

I asked for the codesandbox bcz I just wanted to take a look at you whole setup/project to see what's going on – I've found your problems:

1. you've changed the template's CSS output path to your src folder – why did you do this? bad idea (due to several reasons)
   So instead of .pipe(gulp.dest('src/assets/css')) simply stay with .pipe(gulp.dest(PATHS.dist + '/assets/css'))
2. you've added a 2nd postcss pipe – also bad idea! you should either add the setting of my plugin to postCssPlugins or remove that variable (and specify autoprefixer in postcss.config.js) as well

Afterwards the build process runs as expected and emits your desired app-small.css, app-medium.css and app-large.css.

from postcss-extract-media-query.

Thanks for the reply and explanation. I definitely can change the output paths for the sass task back to go to dist folder.

https://codesandbox.io/s/github/sensaetions/foundation-split-css

Can you please provide an example of how I can incorporate your plugin settings into the existing Foundation's setup of postCssPlugins or how to specify autoprefixer in postcss.config.js (prefered so that all of the postcss settings are in one file)?

Currently, my issue isn't that the app-small.css, app-medium.css and app-large.css files arent being compiled. It is that the postcss rules are only extracting ONE from the list many specified in the settings file. Is this something you can emulate on your end (clone Foundation's zurb project, add your plugin settings and output the many different media queries with multiple media queries into each of the aforementioned separate css files)?

from postcss-extract-media-query.

I highly recommend you get more familiar with gulp & postcss as your problem has nothing to do with my plugin but with using those tools correctly.

However regarding autoprefixer you've got two options:

1. add it to postcss.config.js (and loose Foundation's config setup or need to duplicate it)

module.exports = {
  plugins: {
    "autoprefixer": {
      browsers: [
        "last 2 versions",
        "ie >= 9",
        "ios >= 7"
      ]
    }
    "postcss-extract-media-query": {
	  output: {},
	  queries: {}
	}
  }
};

2. import my plugin and add it into the postcss options variable (and delete postcss.config.js)

import postcssExtractMediaQuery from 'postcss-extract-media-query';

const postCssPlugins = [
    autoprefixer({ browsers: COMPATIBILITY }),
	postcssExtractMediaQuery({ output: {}, queries: {} })
]

from postcss-extract-media-query.

Currently, my issue isn't that the app-small.css, app-medium.css and app-large.css files arent being compiled. It is that the postcss rules are only extracting ONE from the list many specified in the settings file.

I know, I'm able to reproduce it with your codesandbox.
As I told you the reason is a messed up build process (two postcss pipes and src/css as output path).
When I fix it as described your project works for me and emits the desired files.

from postcss-extract-media-query.

@SassNinja,
Thank you for your responses and guidance, and I apologize for coming back with more questions.

I've updated my sandbox.io link: combined the autoprefixer and postcss-extract-media-query settings together. I also changed some of my gulp and postcss configurations so that it outputs to my source folder, in a temporary css folder. I know this is not ideal, but it's for demo purposes.

https://codesandbox.io/s/github/sensaetions/foundation-split-css

If you look in the src/assets/css folder, there are the output css files (app-large.css, app-medium.css, app-print.css, app-small.css, and app.css). If you go into app-large.css, for example, and search for instances of @media, you'll see only one instance of @media, of which is @media screen and (max-width: 74.99875em), screen and (min-width: 81.25em).

This is not true, because there are multiple @media queries that have been specified to go into the app-large stylesheet (all specified in the postcss.config.js file). I'm expecting to see multiple instances of @media in the app-large.css file, such as

• @media screen and (min-width: 75em),
• @media screen and (min-width: 81.25em),
• @media screen and (min-width: 87.5em),
• @media screen and (min-width: 93.75em) to name a few.

The original compiled app.css file that still has its media queries can be found here for comparison: https://rawcdn.githack.com/sensaetions/foundation-split-css/ddf48c38957c52d53a871a3eab25fc78238ba424/src/assets/css/app-queries.css

from postcss-extract-media-query.

@sensaetions please don't get me wrong but stay with the default unless you know what you're doing!

All your problems are related to your (bad) adjustments of the gulpfile.
Use the default zurb foundation template and simply add my postcss plugin. Afterwards you'll get all the desired files.

Your latest changes of the codesandbox don't make it better.
The splitting shouldn't be a separate task but part of the sass task. And again, you shouldn't set src as output path because this gulp setup will use your generated file as source at the next build.

It's ok to play around with code but then you should be willing to fix it yourself and ask on e.g. stackoverflow if help is needed to understand.

There's no problem with this plugin so I can't help you further as I've no time to explain in detail how gulp/postcss works – sorry.

from postcss-extract-media-query.

@SassNinja,

I appreciate all of your help on this issue. I want to clarify further that I don't think your plugin doesn't work. I know it does as it processes the css file and splits it into multiple files based on media queries.

What I'm struggling with and am trying to tell you is that, even with the default Foundation out-of-the-box site and only piping your plugin to the sass task, the plugin only extracts ONE of the specified media queries in my postcss.config.js file.

Can you clarify if my expectations of what I thought your plugin was able to do is accurate? My expectation is that when I specify all of the matched queries in the settings, is that each media query that meets the rules would be extracted accordingly to those rules -- not a randomly selected media query from the list of media queries.

If my expectations are wrong, then I want to know that they are wrong.

from postcss-extract-media-query.