search

bootstarted / css-split-webpack-plugin

Split your CSS for stupid browsers using webpack and postcss.
78 stars 22 forks source link

Options to split by rules instead of size? #16

Open lsycxyj opened 7 years ago

lsycxyj commented 7 years ago

There may be quite a few rules only used in certain circumstances. (eg. IE X specific rules, media queries etc.). They shouldn't be split by size but rules. Is it possible or any other ways to achieve this?

jeremiahmmartinez commented 6 years ago

I recently forked this project and added the ability split CSS files by comment. It works similarly to webpack magic comments. When I have time, I'll see about adding support for media queries. However, you could simulate the behavior using the current version.

For example: styles.css

/*! split:ie8 */
.box-shadow {
  ...
}

/*! split:ie9 */
.flexbox-row {
  ...
}

/*! split:mobile  */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  .mobile {
   ...
  }
}

Will be split into three separate chunks with the names denoted in the comment: styles-ie8.css, styles-ie9.css and styles-mobile.css

I tested out every other CSS splitting plugin I could find and none of them seemed to offer this somewhat obvious feature. The main motivation being to split vendor styles (compiled from SASS) from app-specific styles.

https://github.com/jeremiahmmartinez/css-magic-split-webpack-plugin https://www.npmjs.com/package/css-magic-split-webpack-plugin

SassNinja commented 6 years ago

Almost half a year later and there still doesn't seem to be a webpack plugin for this :( I had a meeting with Google and they recommended to split the CSS media queries into separate files. Thus I'm quite surprised there are hardly any solutions for it out there.

@jeremiahmmartinez you haven't found another solution than your fork, have you?

I did try it but the problem with your feature is

  1. it requires to add magic comments what is not that easy because my media query wrappers are generated by a framework
  2. it extracts all the code below – I however only want to extract the media query and not everything else below it
  3. I need more control over the emitted filename (e.g. small.css or small-landscape.css)

I've found some promising postcss plugins such as css-mqpacker which lets me concat my media queries. But I wasn't able yet to emit as files with specific naming afterwards. Wish there would be an all-in-one solution for extracting media queries from a css chunk...

UPDATE

In case someone is reading this: I've created an own webpack plugin for extracting media queries from a css chunk https://github.com/SassNinja/media-query-plugin