Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/mike-diamond/media-query-splitting-plugin below:

mike-diamond/media-query-splitting-plugin: Webpack 4 plugin for styles splitting by media query

Webpack 4 plugin for styles splitting by media query. Demo

This plugin is addition to mini-css-extract-plugin. It splits styles from style chunks by media query and creates separate CSS files for mobile, tablet and desktop.

npm install --save-dev media-query-splitting-plugin

0.04a9302b77ca5a27bfee.css - chunk includes all styles and media queries

0.04a9302b77ca5a27bfee.css - common chunk includes the styles without media query conditions
0.desktop.04a9302b77ca5a27bfee.css - styles for desktop media query, by default it's (min-width: 1025px)
0.tabletLandscape.04a9302b77ca5a27bfee.css - (min-width: 769px) and (max-width: 1024px)
0.tabletPortrait.04a9302b77ca5a27bfee.css - (min-width: 569px) and (max-width: 768px)
0.tablet.04a9302b77ca5a27bfee.css - styles for both tabletLandscape and tabletPortrait
0.mobile.04a9302b77ca5a27bfee.css - (max-width: 568px)

Also it handles loading of these files depending of the client's screen width, it happens on loading new chunk or on window resize.

This is default options and can be omitted.

{
  media: {
    mobile: '(max-width: 568px)',
    tabletPortrait: {
      query: '(min-width: 569px) and (max-width: 768px)',
      withCommonStyles: false,
    },
    tabletLandscape: {
      query: '(min-width: 769px) and (max-width: 1024px)',
      withCommonStyles: false,
    },
    desktop: '(min-width: 1025px)',
  },
  minify: true,
}

You can define your own media type in the media option. The plugin will create regular expression to check is media query fit input media query rule.

For example you can create chunk for critical css like that:

{
  media: {
    mobile: '(max-width: 568px)',
    ...
    critical: {
      query: '(min-width: 1px) and (max-width: 568px)',
      exact: true,
      withCommonStyles: false,
    },
  },
}

By default common styles (that doesn't wrapped into media query condition) will be added into media chunk. If you don't want to add common chunk into media chunk, set 'withCommonStyles: false'.

Options can be written in short style as media query string, or in detailed style as object:

Short style:

mobile: '(max-width: 568px)',

Is equal to detailed style:

mobile: {
  query: '(max-width: 568px)',
  exact: false, // include styles that fit condition in 'query' e.g '(max-width: 567px)' or '(min-width: 200px)'
  withCommonStyles: true, // include common styles without media query condition
},

If you want to disable css minification, set minify: false, this parameter by default is true.

npm install --save-dev media-query-splitting-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const MediaQuerySplittingPlugin = require('media-query-splitting-plugin')

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
    // MediaQuerySplittingPlugin should be placed under MiniCssExtractPlugin
    new MediaQuerySplittingPlugin({
      // Prevent splitting for some files
      exclude: {
        tailwind: /tailwind-css/,
      },
      // This is default config (optional)
      media: {
        mobile: '(max-width: 568px)',
        tabletPortrait: {
          query: '(min-width: 569px) and (max-width: 768px)',
          withCommonStyles: false,
        },
        tabletLandscape: {
          query: '(min-width: 769px) and (max-width: 1024px)',
          withCommonStyles: false,
        },
        desktop: '(min-width: 1025px)',
      },
      minify: true,
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ]
      }
    ]
  }
}

The plugin splits each css asset to common chunk (which should be always included to the response) and media chunk (for desktop, tabletPortrait / tabletLandscape / tablet (includes portrait and landscape) or mobile, which should be included depending on client's device).

How to use it with SSR.

All you need is to define client device type (mobile, tablet or desktop) and add style chunk for this device in addition to the common chunk. For example if you use express.js you can define device type depending on req.headers['user-agent'] (use express-device middleware to handle it).

  const { getBundles } = require('react-loadable/webpack')
  const assets = require('assets.json') // webpack-assets-manifest

  const bundles  = getBundles(loadableAssets, loadableModules).filter(({ file }) => !/map$/.test(file))
  const chunksById = assets[''].css.reduce((result, chunk) => {
    const [ id, mediaType ] = chunk.replace(/.+\//, '').split('.')
    
    if (id) {
      result[id] = result[id] || {}
      result[id][mediaType] = chunk
    }
    
    return result
  }, {})

  const styles   = (
    bundles
      .filter((bundle) => bundle.file.endsWith('.css'))
      .concat({ publicPath: assets.client.css })
      .map(({ publicPath }) => {
        const { isMobile, isTablet } = req

        let mediaType = 'desktop'

        if (isMobile) {
          mediaType = 'mobile'
        }
        else if (isTablet) {
          mediaType = 'tabletPortrait'
        }

        const chunkId = publicPath.replace(/.*\//,'').replace(/\..*/, '')
        const mediaPath = chunksById[chunkId][mediaType]

        if (mediaPath) {
          return `
            <link rel="stylesheet" href="${mediaPath}" />  // Media chunk with common styles (0.${mediaType}.04a9302b77ca5a27bfee.css)
          `
        }
      })
  )

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4