Remove some not future css plugins (#375)

Author: Semigradsky

docs/content/features.md

@@ -9,7 +9,6 @@ backgroundModifier: darkRoad
 
 **Note that according to your [browser scope](/usage/#browsers) some
 transformation can be skipped to avoid extra useless output.**
-Eg: if you use don't cover IE 8, rem fallback and rgba fallback might be skipped.
 
 ## automatic vendor prefixes
 
@@ -259,22 +258,6 @@ body {
 |
 [Plugin documentation](https://github.com/postcss/postcss-color-hex-alpha)
 
-## `rgba` function (`rgb` fallback)
-
-Add solid colors fallback for rgba colors
-(if your browser scope cover old browsers, eg: IE8).
-
-```css
-body {
-  background: rgba(153, 221, 153, 0.8);
-  /* you will have the same value without alpha as a fallback */
-}
-```
-
-[Specification](http://www.w3.org/TR/css3-color/)
-|
-[Plugin documentation](https://github.com/postcss/postcss-color-rgba-fallback)
-
 ## `rebeccapurple` color
 
 Allows you to use the new color keyword as a homage to
@@ -356,21 +339,6 @@ div {
 |
 [Plugin documentation](https://github.com/maximkoretskiy/postcss-initial)
 
-## `rem` unit (`px` fallback)
-
-`rem` fallback to `px`
-(if your browser scope cover old browsers, eg: IE8).
-
-```css
-h1 {
-  font-size: 1.5rem;
-}
-```
-
-[Specification](http://www.w3.org/TR/css3-values/#rem-unit)
-|
-[Plugin documentation](https://github.com/robwierzbowski/node-pixrem)
-
 ## `:any-link` pseudo-class
 
 Allows you to use `:any-link` pseudo class.
@@ -416,21 +384,6 @@ p:not(:first-child, .special) {
 |
 [Plugin documentation](https://github.com/postcss/postcss-selector-NOT)
 
-## `::` pseudo syntax (`:` fallback)
-
-Adjust `::` to `:`
-(if your browser scope cover old browsers, eg: IE8).
-
-```css
-a::before {
-  /* ... */
-}
-```
-
-[Specification](http://www.w3.org/TR/css3-selectors/#pseudo-elements)
-|
-[Plugin documentation](https://github.com/axa-ch/postcss-pseudoelements)
-
 ## `overflow-wrap` property (`word-wrap` fallback)
 
 Converts `overflow-wrap` to `word-wrap` (many browser support only the old [word-wrap](http://caniuse.com/#feat=wordwrap) property).

docs/content/index.md

@@ -87,13 +87,6 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#rrggbbaa-colors"><code>#rrggbbaa</code> colors</a>
       </li>
-      <li class="r-Grid-cell r-minS--1of2">
-        <a href="/features/#rgba-function-rgb-fallback"><code>rgba</code> function
-          <small class="cssnext-FeaturesList-small">
-            (<code>rgb</code> fallback</code>)
-          </small>
-        </a>
-      </li>
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#rebeccapurple-color"><code>rebeccapurple</code> color</a>
       </li>
@@ -109,12 +102,6 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#initial-value"><code>initial</code> value</a>
       </li>
-      <li class="r-Grid-cell r-minS--1of2">
-        <a href="/features/#rem-unit-px-fallback"><code>rem</code> unit</a>
-        <small class="cssnext-FeaturesList-small">
-          (<code>px</code> fallback)
-        </small>
-      </li>
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#any-link-pseudo-class"><code>:any-link</code> pseudo-class</a>
       </li>
@@ -127,12 +114,6 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
           (to l.3)
         </small>
       </li>
-      <li class="r-Grid-cell r-minS--1of2">
-        <a href="/features/#pseudo-syntax-fallback"><code>::</code>pseudo syntax</a>
-        <small class="cssnext-FeaturesList-small">
-          (<code>:</code> fallback)
-        </small>
-      </li>
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#replace-overflow-wrap"><code>overflow-wrap</code> property</a>
         <small class="cssnext-FeaturesList-small">

docs/content/playground.html

@@ -11,9 +11,9 @@
     <textarea class="js-cssnext-Playground-from cssnext-Playground-code cssnext-Playground-code--from" spellcheck="false">
 /* custom properties */
 :root {
---fontSize: 1rem;
---mainColor: #12345678;
---highlightColor: hwb(190, 35%, 20%);
+  --fontSize: 1rem;
+  --mainColor: #12345678;
+  --highlightColor: hwb(190, 35%, 20%);
 }
 
 /* custom properties set & @apply rule */
@@ -34,16 +34,16 @@
 
 /* some var() & calc() */
 body {
-color: var(--mainColor);
+  color: var(--mainColor);
 
-font-size: var(--fontSize);
-line-height: calc(var(--fontSize) * 1.5);
-padding: calc((var(--fontSize) / 2) + 1px);
+  font-size: var(--fontSize);
+  line-height: calc(var(--fontSize) * 1.5);
+  padding: calc((var(--fontSize) / 2) + 1px);
 }
 
 /* custom media query usage */
 @media (--viewport-medium) {
-body { font-size: calc(var(--fontSize) * 1.2); }
+  body { font-size: calc(var(--fontSize) * 1.2); }
 }
 
 /* custom selectors */
@@ -52,17 +52,17 @@
 
 /* image-set function */
 .foo {
-    background-image:
-      image-set(
-        url(img/test.png) 1x,
-        url(img/test-2x.png) 2x
-      );
+  background-image:
+    image-set(
+      url(img/test.png) 1x,
+      url(img/test-2x.png) 2x
+    );
 }
 
 /* colors stuff */
 a {
-color: var(--highlightColor);
-transition: color 1s; /* autoprefixed ! */
+  color: var(--highlightColor);
+  transition: color 1s; /* autoprefixed ! */
 }
 a:hover { color: gray(255, 50%) }
 a:active { color: rebeccapurple }
@@ -71,34 +71,34 @@
 
 /* font stuff */
 h2 {
-font-variant-caps: small-caps;
+  font-variant-caps: small-caps;
 }
 
 table {
-font-variant-numeric: lining-nums;
+  font-variant-numeric: lining-nums;
 }
 
 /* filters */
 .blur {
-filter: blur(4px);
+  filter: blur(4px);
 }
 .sepia {
-filter: sepia(.8);
+  filter: sepia(.8);
 }
 
 /* overflow-wrap fallback */
 body {
-overflow-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 /* attribute case insensitive */
 [frame=hsides i] {
-border-style: solid none;
+  border-style: solid none;
 }
 
 /* system-ui font-family */
 body {
-font-family: system-ui;
+  font-family: system-ui;
 }
 
     </textarea>

package.json

@@ -24,7 +24,6 @@
     "autoprefixer": "^6.0.2",
     "caniuse-api": "^1.5.3",
     "chalk": "^1.1.1",
-    "pixrem": "^3.0.0",
     "pleeease-filters": "^3.0.0",
     "postcss": "^5.0.4",
     "postcss-apply": "^0.3.0",
@@ -37,7 +36,6 @@
     "postcss-color-hwb": "^2.0.0",
     "postcss-color-rebeccapurple": "^2.0.0",
     "postcss-color-rgb": "^1.1.4",
-    "postcss-color-rgba-fallback": "^2.0.0",
     "postcss-custom-media": "^5.0.0",
     "postcss-custom-properties": "^5.0.0",
     "postcss-custom-selectors": "^3.0.0",
@@ -48,7 +46,6 @@
     "postcss-media-minmax": "^2.1.0",
     "postcss-nesting": "^2.0.5",
     "postcss-pseudo-class-any-link": "^1.0.0",
-    "postcss-pseudoelements": "^3.0.0",
     "postcss-replace-overflow-wrap": "^1.0.0",
     "postcss-selector-matches": "^2.0.0",
     "postcss-selector-not": "^2.0.0"

src/__tests__/fixtures/features/color-rgba.browsers

@@ -4,14 +4,6 @@ import cssnext from ".."
 
 tape("cssnext browsers option", function(t) {
 
-  // no recent browser need pixrem
-  const remInput = "body{font-size:2rem}"
-  t.equal(
-    cssnext({ browsers: "last 1 version" }).process(remInput).css,
-    remInput,
-    "should not enable px fallback when all browsers support it"
-  )
-
   const customPropsInput = ":root{--foo:bar}baz{qux:var(--foo)}"
   const customPropsOutput = "baz{qux: bar}"
 
@@ -60,33 +52,3 @@ tape("cssnext browsers option propagation to autoprefixer", function(t) {
 
   t.end()
 })
-
-tape("cssnext browsers option propagation to pixrem", function(t) {
-  const input = "body{font-size: 1rem}"
-  const output = "body{font-size: 16px;font-size: 1rem}"
-
-  // IE 8 needs rem fallback
-  t.equal(
-    cssnext({ browsers: "ie 8" }).process(input).css,
-    output,
-    "should propagate browsers option to pixrem"
-  )
-
-  // IE 9 doesn't need rem fallback on a simple font-size
-  t.equal(
-    cssnext({ browsers: "ie 9" }).process(input).css,
-    input,
-    "should propagate browsers option to pixrem"
-  )
-
-  // IE 9 needs rem on pseudo element
-  const inputWeirdCase = input.replace("body", "body::before")
-  const outputWeirdCase = output.replace("body", "body::before")
-  t.equal(
-    cssnext({ browsers: "ie 9" }).process(inputWeirdCase).css,
-    outputWeirdCase,
-    "should propagate browsers option to pixrem"
-  )
-
-  t.end()
-})

src/__tests__/fixtures/features/color-rgba.css

@@ -66,12 +66,6 @@ export default {
   // https://npmjs.com/package/postcss-initial
   initial: (options) => require("postcss-initial")(options),
 
-  // https://npmjs.com/package/pixrem
-  rem: (options) => require("pixrem")(options),
-
-  // https://npmjs.com/package/postcss-pseudoelements
-  pseudoElements: (options) => require("postcss-pseudoelements")(options),
-
   // https://npmjs.com/package/postcss-selector-matches
   pseudoClassMatches: (options) => require("postcss-selector-matches")(options),
 
@@ -81,9 +75,6 @@ export default {
   // https://npmjs.com/package/postcss-pseudo-class-any-link
   pseudoClassAnyLink: (options) => require("postcss-pseudo-class-any-link")(options),
 
-  // https://npmjs.com/package/postcss-color-rgba-fallback
-  colorRgba: (options) => require("postcss-color-rgba-fallback")(options),
-
   // https://www.npmjs.com/package/postcss-replace-overflow-wrap
   overflowWrap: (options) => require("postcss-replace-overflow-wrap")(options),
 

src/__tests__/fixtures/features/color-rgba.expected.css

@@ -18,7 +18,7 @@ const plugin = postcss.plugin("postcss-cssnext", (options) => {
   const features = options.features
 
   // propagate browsers option to plugins that supports it
-  const pluginsToPropagateBrowserOption = [ "autoprefixer", "rem" ]
+  const pluginsToPropagateBrowserOption = [ "autoprefixer" ]
   pluginsToPropagateBrowserOption.forEach((name) => {
     const feature = features[name]