css prefixes, yes pleeease

If you CSS, you’re familiar with the browser -prefix. Chrome and Safari have -webkit, -moz for Firefox/Mozilla, and -ms for Edge. As browsers iterate, prefixes drop off, so packages have stepped in so you don’t have to write 60% more to cover all of your target browsers.

Pleeease

Pleeease adds browser prefixing that you can target while watching pseudo-elements, opacity, css filters, and rem. Pleeease supports the most popular css pre-processors, sass, less, and stylus, and has a nice list for post-processors as well. It’s small, simple, and flexible enough to plug into your workflow — fast!

{
  "autoprefixer": true,
  "filters": true,
  "rem": true,
  "pseudoElements": true,
  "opacity": true,

  "import": true,
  "minifier": true,
  "mqpacker": false,

  "sourcemaps": false
}

Target browsers based on Browserlist, or based on version queries:

• last 4 versions
• > 5% in US
• Firefox ESR

{
  "autoprefixer": {
    "browsers": [
      "last 4 versions",
      "Firefox ESR"
    ]
  }
}

Pleeease turns this…

.my-class {
  background: linear-gradient(grey, black);
  display: flex;
  opacity: .3;
  padding: 1rem;
  transform: .2s ease-in
}

…into this

.my-class {
  background: -webkit-linear-gradient(grey, black);
  background: linear-gradient(grey, black);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  padding: 16px;
  padding: 1rem;
  -webkit-transform: .2s ease-in;
      -ms-transform: .2s ease-in;
          transform: .2s ease-in
}

Pleeease, get started with docs and workflow. Let us know what you think!