Use @supports not for break-anywhere polyfill

tailwindlabs · Oct 3, 2023 · cd9b140 · cd9b140
1 parent fba49ce
commit cd9b140
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/corePlugins.js b/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',
         },
       },
     })

diff --git a/tests/plugins/wordBreak.test.js b/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;
     }
   }
 `)