https://github.com/jungwoo-an/split-media-query-plugin
[EXPERIMENT] Webpack plugin for splitting media query into multiple css files
https://github.com/jungwoo-an/split-media-query-plugin
media-query plugin webpack webpack-plugin
Last synced: 7 days ago
JSON representation
[EXPERIMENT] Webpack plugin for splitting media query into multiple css files
- Host: GitHub
- URL: https://github.com/jungwoo-an/split-media-query-plugin
- Owner: Jungwoo-An
- Created: 2021-01-21T14:12:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-05T13:34:27.000Z (over 5 years ago)
- Last Synced: 2025-08-10T22:23:54.008Z (11 months ago)
- Topics: media-query, plugin, webpack, webpack-plugin
- Language: TypeScript
- Homepage: https://jungwoo-an.github.io/split-media-query-plugin/
- Size: 35.4 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
split-media-query-plugin
Webpack plugin for splitting media query into multiple css files
## Introduction
_Experimental repository_
**Examples**
- [Bootstrap](https://github.com/Jungwoo-An/split-media-query-plugin/tree/master/example)
## Getting Started
### Prerequisites
- webpack >= 4
- html-webpack-plugin >=4
### Installation
```bash
# via npm
$ npm install -D split-media-query-plugin
# via yarn
$ yarn add -D split-media-query-plugin
```
## Usage
```ts
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SplitMediaQueryPlugin = require('split-media-query-plugin');
module.exports = {
// ...
plugins: [new HtmlWebpackPlugin(), new SplitMediaQueryPlugin()],
};
```
**input**
```css
html {
font-size: 14px;
}
@media (max-width: 767px) {
html {
font-size: 10px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
html {
font-size: 11px;
}
}
@media (min-width: 1024px) {
html {
font-size: 12px;
}
}
```
**output**
```html
```