Use @supports not for break-anywhere polyfill

Author: serkodev

src/corePlugins.js

@@ -1539,10 +1539,11 @@ export let corePlugins = {
       '.break-all': { 'word-break': 'break-all' },
       '.break-keep': { 'word-break': 'keep-all' },
       '.break-anywhere': {
-        'word-break': 'break-word',
         '@supports (overflow-wrap: anywhere)': {
           'overflow-wrap': 'anywhere',
-          'word-break': 'normal',
+        },
+        '@supports not (overflow-wrap: anywhere)': {
+          'word-break': 'break-word',
         },
       },
     })

tests/plugins/wordBreak.test.js

@@ -14,13 +14,14 @@ quickPluginTest('wordBreak').toMatchFormattedCss(css`
   .break-keep {
     word-break: keep-all;
   }
-  .break-anywhere {
-    word-break: break-word;
-  }
   @supports (overflow-wrap: anywhere) {
     .break-anywhere {
       overflow-wrap: anywhere;
-      word-break: normal;
+    }
+  }
+  @supports not (overflow-wrap: anywhere) {
+    .break-anywhere {
+      word-break: break-word;
     }
   }
 `)