postcss-clip-path-polyfill

1.1.0 • Public • Published

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-clip-path-polyfill --save-dev

Usage

Check out PostCSS documentation on how to use PostCSS plugins.

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i postcss-clip-path-polyfill

      Weekly Downloads

      188

      Version

      1.1.0

      License

      ISC

      Unpacked Size

      3.48 kB

      Total Files

      4

      Last publish

      Collaborators

      • anton.nesterov