Retina images generation demo

View result online

How it works

1. Generate .webp images. view code 👀

2. webpcss add links to WebP images for browsers that support it. view code 👀

3. postcss-image-set-generator generate miniatures for all image-set(<one_image_set_options>). view code 👀

4. postcss-image-set-polyfill convert all image-set() to @media(min-resolution: XXXdpi){/*...*/}. view code 👀

5. autoprefixer fixed @media rules. view code 👀

6. css-mqpacker groups duplicated media rules. view code 👀

7. csso minify css code. view code 👀

⚠️ The order of postcss plugins

№	plugin	required
1	webpcss
2	postcss-image-set-generator	✔
3	postcss-image-set-polyfill	✔
4	autoprefixer	✔
5	css-mqpacker	✔
6	postcss-csso

Install & use

Clone this repo and install npm packages:

yarn
npm i

Run build:

yarn run build
npm run build