Added: overflow-wrap fallback (MoOx#280)

Author: MattDiMu

docs/content/features.md

@@ -392,6 +392,20 @@ a::before {
 |
 [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).
+
+```css
+body {
+  overflow-wrap: break-word;
+}
+```
+
+[Specification](https://drafts.csswg.org/css-text-3/#propdef-word-wrap)
+|
+[Plugin documentation](https://github.com/MattDiMu/postcss-replace-overflow-wrap)
+
 ## @todo
 
 Any omissions of the CSS specifications (even in draft) that are subject to be

docs/content/index.md

@@ -126,6 +126,12 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
           (<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">
+          (<code>word-wrap</code> fallback)
+        </small>
+      </li>
     </ul>
     <small
       class="cssnext-FeaturesList-small"

docs/content/playground.html

@@ -61,6 +61,11 @@
 }
 .sepia {
 filter: sepia(.8);
+}
+
+/* overflow-wrap fallback */
+body {
+overflow-wrap: break-word;  
 }
 
     </textarea>

package.json

@@ -43,6 +43,7 @@
     "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/replace-overflow-wrap.css

@@ -0,0 +1,3 @@
+body {
+  overflow-wrap: break-word;
+}

src/__tests__/fixtures/features/replace-overflow-wrap.expected.css

@@ -0,0 +1,3 @@
+body {
+  word-wrap: break-word;
+}

src/features.js

@@ -66,6 +66,9 @@ export default {
   // 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
+  replaceOverflowWrap: (options) => require("postcss-replace-overflow-wrap")(options),
+
   // https://npmjs.com/package/autoprefixer
   autoprefixer: (options) => require("autoprefixer")(options),
 }