All Projects → SuperOl3g → postcss-image-set-polyfill

SuperOl3g / postcss-image-set-polyfill

Licence: MIT License
PostCSS plugin for polyfilling image-set CSS function

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to postcss-image-set-polyfill

dva-typescript-antd-starter-kit
A admin dashboard application demo based on antd by typescript and dva
Stars: ✭ 61 (+35.56%)
Mutual labels:  postcss
ECardFlow
🍭A custom ViewPager for multiple card flow system. && A layout which provide beautiful background effects for ViewPager.
Stars: ✭ 47 (+4.44%)
Mutual labels:  background-image
hugo-starter-tailwind-basic
A basic and simple to set up Hugo with TailwindCSS starter project.
Stars: ✭ 80 (+77.78%)
Mutual labels:  postcss
stencil-tailwind-plugin
Plugin for using tailwindcss with StencilJS
Stars: ✭ 17 (-62.22%)
Mutual labels:  postcss
vite-ts-tailwind-starter
Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter template w/ tests and CI.
Stars: ✭ 228 (+406.67%)
Mutual labels:  postcss
ying-template
这是一个基于 `webpack@^5.27.2` + `typescript@^4.2.3` + `@babel/core@^7.2.2` + `jest@^26.6.3` + `eslint@^7.22.0` 的多页面脚手架。
Stars: ✭ 125 (+177.78%)
Mutual labels:  postcss
aik
Frontend Playground
Stars: ✭ 43 (-4.44%)
Mutual labels:  postcss
postcss-relaxed-unit
🍮Postcss-relaxed-unit is a postcss plugin for unit tranformation and make write css easier with custom unit.
Stars: ✭ 44 (-2.22%)
Mutual labels:  postcss
postcss-bidirection
PostCSS plugin that polyfill Bi-directional CSS properties and values to suppot rtl and ltr rules in all browsers
Stars: ✭ 24 (-46.67%)
Mutual labels:  postcss
caesura
📏 A reasonable breakpoint scale using @Custom-Media
Stars: ✭ 14 (-68.89%)
Mutual labels:  postcss
webpack-typescript-react
Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
Stars: ✭ 185 (+311.11%)
Mutual labels:  postcss
tailwindcss-postcss-browsersync-boilerplate
Tailwind CSS + PostCSS + BrowserSync boilerplate
Stars: ✭ 28 (-37.78%)
Mutual labels:  postcss
tailwind-bootstrap-grid
Tailwind CSS plugin that generates Bootstrap's flexbox grid
Stars: ✭ 96 (+113.33%)
Mutual labels:  postcss
postcss-sort-media-queries
PostCSS plugin for combine and sort CSS media queries with mobile first or desktop first methods.
Stars: ✭ 118 (+162.22%)
Mutual labels:  postcss
postcss-shopify-settings-variables
PostCSS plugin for variable of theme setting in shopify css file.
Stars: ✭ 14 (-68.89%)
Mutual labels:  postcss
postcss-aspect-ratio
A PostCSS plugin to fix an element's dimensions to an aspect ratio.
Stars: ✭ 38 (-15.56%)
Mutual labels:  postcss
meteor-postcss
PostCSS for Meteor
Stars: ✭ 68 (+51.11%)
Mutual labels:  postcss
Webpack-Starter-Kit
Webpack 4 stater kit with SCSS, PostCSS, Babel & ESLint
Stars: ✭ 41 (-8.89%)
Mutual labels:  postcss
postcss-combine-duplicated-selectors
automatically keep css selectors unique.
Stars: ✭ 69 (+53.33%)
Mutual labels:  postcss
building-realworld-user-interfaces-using-tailwind
Demo of building real-world UIs using TailwindCSS
Stars: ✭ 87 (+93.33%)
Mutual labels:  postcss

postcss-image-set-polyfill Build Status npm version

PostCSS plugin for polyfilling image-set CSS function for most browsers.

/* Input example */
.foo {
    background-image: image-set(url(img/test.png) 1x,
                                url(img/test-2x.png) 2x,
                                url(my-img-print.png) 600dpi);
}
/* Output example */
.foo {
    background-image: url(img/test.png);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .foo {
        background-image: url(img/test-2x.png);
    }
}


@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
    .foo {
        background-image: url(my-img-print.png);
    }
}

→Try it online←

❗️ Resolution media query is supported only by IE9+.

Installation

npm i postcss-image-set-polyfill -D

Usage

var postcssImageSet = require('postcss-image-set-polyfill');

postcss([postcssImageSet]).process(YOUR_CSS, /* options */);

See PostCSS docs for examples for your environment.

⚠️️ Warning

If you use autoprefixer, place this plugin before it to prevent styles duplication.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].