GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → komachi → postcss-clip-path-polyfill

komachi / postcss-clip-path-polyfill

Licence: other
PostCSS plugin which add SVG hack for clip-path property to make it work in Firefox

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

postcss-plugins

Projects that are alternatives of or similar to postcss-clip-path-polyfill

Autoprefixer
Parse CSS and add vendor prefixes to rules by Can I Use
Stars: ✭ 20,001 (+83237.5%)
Mutual labels:  postcss-plugins
Postcss Font Family System Ui
PostCSS plugin to transform W3C CSS font-family: system-ui to a practical font-family list
Stars: ✭ 91 (+279.17%)
Mutual labels:  postcss-plugins
Stylefmt
stylefmt is a tool that automatically formats stylesheets.
Stars: ✭ 2,123 (+8745.83%)
Mutual labels:  postcss-plugins
Postcss Cssnext
`postcss-cssnext` has been deprecated in favor of `postcss-preset-env`.
Stars: ✭ 5,388 (+22350%)
Mutual labels:  postcss-plugins
Postcss At Rules Variables
PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else and more...
Stars: ✭ 52 (+116.67%)
Mutual labels:  postcss-plugins
Postcss High Contrast
Create high contrast version of your project with ease.
Stars: ✭ 108 (+350%)
Mutual labels:  postcss-plugins
postcss-copy
An async postcss plugin to copy all assets referenced in CSS files to a custom destination folder and updating the URLs.
Stars: ✭ 39 (+62.5%)
Mutual labels:  postcss-plugins
laggard
Automatically generate CSS fallbacks for legacy browsers, built on PostCSS
Stars: ✭ 23 (-4.17%)
Mutual labels:  postcss-plugins
Postcss Nested Ancestors
👩‍👧‍👦 PostCSS plugin to reference any parent/ancestor selector in nested CSS.
Stars: ✭ 79 (+229.17%)
Mutual labels:  postcss-plugins
Rucksack
A little bag of CSS superpowers, built on PostCSS
Stars: ✭ 1,861 (+7654.17%)
Mutual labels:  postcss-plugins
Postcss Start To End
PostCSS plugin that lets you control your layout (LTR or RTL) through logical rather than physical rules
Stars: ✭ 18 (-25%)
Mutual labels:  postcss-plugins
Postcss Selector Not
PostCSS plugin to transform :not() W3C CSS level 4 pseudo class to more compatible CSS (multiple css3 :not() selectors)
Stars: ✭ 49 (+104.17%)
Mutual labels:  postcss-plugins
Postcss Instagram
📷 PostCSS plugin for using Instagram filters in CSS
Stars: ✭ 111 (+362.5%)
Mutual labels:  postcss-plugins
Postcss Sorting
PostCSS plugin to keep rules and at-rules content in order.
Stars: ✭ 438 (+1725%)
Mutual labels:  postcss-plugins
postcss-stylestats
[Unmainted] PostCSS plugin for StyleStats.
Stars: ✭ 13 (-45.83%)
Mutual labels:  postcss-plugins
Postcss Utilities
PostCSS plugin to add a collection of mixins, shortcuts, helpers and tools for your CSS
Stars: ✭ 293 (+1120.83%)
Mutual labels:  postcss-plugins
Postcss Plugins
The "officially unofficial" consolidated list of PostCSS plugins in a ready-to-use package
Stars: ✭ 107 (+345.83%)
Mutual labels:  postcss-plugins
postcss-gtk
Processes GTK+ CSS into browser CSS
Stars: ✭ 23 (-4.17%)
Mutual labels:  postcss-plugins
postcss-if-media
A PostCSS plugin to inline or nest media queries within CSS rules & properties.
Stars: ✭ 35 (+45.83%)
Mutual labels:  postcss-plugins
Postcss Aspect Ratio Mini
A PostCSS plugin to fix an element's dimensions to an aspect ratio
Stars: ✭ 123 (+412.5%)
Mutual labels:  postcss-plugins
View All Similar Projects ➔

postcss-clip-path-polyfill

PostCSS plugin which add SVG hack for clip-path property to make it work in Firefox. Currently supports only polygon().

/* Input */
.test1 {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* Output */
.test1 {
  clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0.5 0, 0 1, 1 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p');
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

It doesn't add vendor prefixes so you should use it with autoprefixer.

Installation

npm i postcss postcss-clip-path-polyfill --save-dev

Usage

Check out PostCSS documentation on how to use PostCSS plugins.

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].