https://github.com/komachi/postcss-clip-path-polyfill
PostCSS plugin which add SVG hack for clip-path property to make it work in Firefox
https://github.com/komachi/postcss-clip-path-polyfill
postcss-plugins
Last synced: 8 months ago
JSON representation
PostCSS plugin which add SVG hack for clip-path property to make it work in Firefox
- Host: GitHub
- URL: https://github.com/komachi/postcss-clip-path-polyfill
- Owner: komachi
- Created: 2016-08-01T13:22:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-06-24T19:42:12.000Z (almost 4 years ago)
- Last Synced: 2025-05-11T23:48:15.625Z (11 months ago)
- Topics: postcss-plugins
- Language: JavaScript
- Size: 1.06 MB
- Stars: 23
- Watchers: 1
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# postcss-clip-path-polyfill
>PostCSS plugin which add SVG hack for clip-path property to make it work in Firefox. Currently supports only `polygon()`.
```css
/* Input */
.test1 {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
```
```css
/* 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](https://github.com/postcss/autoprefixer).
## Installation
```
npm i postcss postcss-clip-path-polyfill --save-dev
```
## Usage
Check out [PostCSS documentation](https://github.com/postcss/postcss#usage) on how to use PostCSS plugins.