From 7e5d147e842ad9b394ecd91db82e5287bb1eafc6 Mon Sep 17 00:00:00 2001
From: Leo Ji <leo@leoji.codes>
Date: Mon, 15 Jan 2024 11:04:52 -0600
Subject: [PATCH] adds text-wrap, text-nowrap to align with
 https://github.com/tailwindlabs/tailwindcss/pull/11320

---
 README.md     | 14 +++++++++++++-
 src/index.ts  |  2 ++
 tests/test.ts | 28 ++++++++++++++++++++--------
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index d658134..714eba5 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,10 @@
 
 Adds utilty classes for `text-wrap: balance` and `text-wrap: pretty` in Tailwind CSS.
 
+This plugin is intended to act as a stepping stone until tailwindcss supports `text-wrap: balance` natively.
+It aims to act as a drop-in
+for [tailwindcss pull request #11320](https://github.com/tailwindlabs/tailwindcss/pull/11320).
+
 See the [Chrome Developers Blog](https://developer.chrome.com/blog/css-text-wrap-balance/) for more
 information about `text-wrap: balance` in CSS and why it's useful.
 
@@ -25,7 +29,7 @@ module.exports = {
 }
 ```
 
-This plugin generates the following utilities:
+This plugin generates the following utilities when the classes are used:
 
 ```css
 .text-balance {
@@ -35,6 +39,14 @@ This plugin generates the following utilities:
 .text-pretty {
     text-wrap: pretty;
 }
+
+.text-wrap {
+    text-wrap: wrap;
+}
+
+.text-nowrap {
+    text-wrap: nowrap;
+}
 ```
 
 Not all browsers support `text-wrap: balance` yet. You can use the
diff --git a/src/index.ts b/src/index.ts
index df97ab7..4bc5089 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,6 +8,8 @@ const textBalance = plugin(function({ addUtilities }) {
     '.text-pretty': {
       'text-wrap': 'pretty',
     },
+    '.text-wrap': { 'text-wrap': 'wrap' },
+    '.text-nowrap': { 'text-wrap': 'nowrap' },
   })
 })
 
diff --git a/tests/test.ts b/tests/test.ts
index cb228fa..2427b5d 100644
--- a/tests/test.ts
+++ b/tests/test.ts
@@ -35,22 +35,34 @@ it('should output the text-wrap:pretty css', async () => {
   `)
 })
 
-// skipping this test because the actual output is doubled, and I don't know why
-it.skip('should output the text-wrap:balance and text-wrap:pretty css', async () => {
+it('should output the text-wrap:wrap css', async () => {
   const { css } = await postcss([
     require('tailwindcss')({
-      content: [{ raw: 'text-balance text-pretty' }],
+      content: [{ raw: 'text-wrap' }],
       plugins: [plugin],
       corePlugins: { preflight: false },
     }),
   ]).process('@tailwind utilities;', { from: undefined })
 
   expect(css).toMatchInlineSnapshot(`
-    ".text-balance {
-        text-wrap: balance
-    }
-    .text-pretty {
-        text-wrap: pretty
+    ".text-wrap {
+        text-wrap: wrap
     }"
   `)
 })
+
+it('should output the text-wrap:nowrap css', async () => {
+  const { css } = await postcss([
+    require('tailwindcss')({
+      content: [{ raw: 'text-nowrap' }],
+      plugins: [plugin],
+      corePlugins: { preflight: false },
+    }),
+  ]).process('@tailwind utilities;', { from: undefined })
+
+  expect(css).toMatchInlineSnapshot(`
+    ".text-nowrap {
+        text-wrap: nowrap
+    }"
+  `)
+})
\ No newline at end of file