fix: workaround for replaced ' and " when using react renderToString

tw-in-js · Feb 15, 2022 · 08c66ee · 08c66ee
1 parent 5d99f5a
commit 08c66ee
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/.changeset/popular-camels-doubt.md b/.changeset/popular-camels-doubt.md
@@ -0,0 +1,5 @@
+---
+'twind': patch
+---
+
+fix: workaround for replaced `'` and `" when using react renderToString`
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -98,6 +98,7 @@ jobs:
         # 3. only run once in the matrix
         if: ${{ github.repository == 'tw-in-js/twind' && github.event_name == 'pull_request' && matrix.node == '16.x' }}
         uses: tomjschuster/cloudflare-pages-deploy-action@v0
+        continue-on-error: true
         with:
           account-id: '${{ secrets.CF_ACCOUNT_ID }}'
           api-key: '${{ secrets.CF_GLOBAL_APIKEY }}'
@@ -113,6 +114,7 @@ jobs:
         if: ${{ github.repository == 'tw-in-js/twind' && github.event_name == 'push' && matrix.node == '16.x' }}
         # TODO: if: ${{ steps.changesets.outputs.published == 'true' }}
         uses: tomjschuster/cloudflare-pages-deploy-action@v0
+        continue-on-error: true
         with:
           account-id: '${{ secrets.CF_ACCOUNT_ID }}'
           api-key: '${{ secrets.CF_GLOBAL_APIKEY }}'

diff --git a/examples/README.md b/examples/README.md
@@ -12,7 +12,7 @@ Some examples of how to use the Twind. These are great for reproductions of bugs
 | Example                                                                               | Try it live at                                                                                                                                                                                        | Description                                                                                                                                                                                                                                                                                                                |
 | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [Tailwind Forms](https://github.com/tw-in-js/twind/tree/next/examples/tailwind-forms) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/next/examples/using-tailwind-forms) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/next/examples/using-tailwind-forms) | using [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/next/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/next/packages/preset-tailwind) and [@twind/preset-tailwind-forms](https://github.com/tw-in-js/twind/tree/next/packages/preset-tailwind-forms) |
-| [Twind CDN](https://github.com/tw-in-js/twind/tree/next/examples/using-twind-cdn)     | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/next/examples/using-twind-cdn) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/next/examples/twind-cdn)                 | using [@twind/cdn](https://github.com/tw-in-js/twind/tree/next/packages/cdn)                                                                                                                                                                                                                                               |
+| [Twind CDN](https://github.com/tw-in-js/twind/tree/next/examples/using-twind-cdn)     | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/next/examples/using-twind-cdn) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/next/examples/using-twind-cdn)           | using [@twind/cdn](https://github.com/tw-in-js/twind/tree/next/packages/cdn)                                                                                                                                                                                                                                               |
 
 ## Frameworks
 

diff --git a/packages/twind/src/consume.ts b/packages/twind/src/consume.ts
@@ -63,7 +63,23 @@ export function consume(markup: string, tw: (className: string) => string = tw$)
 
   extract(markup, (startIndex, endIndex, quote) => {
     const value = markup.slice(startIndex, endIndex)
-    const className = tw(value)
+
+    // Lets handle some special react case that messes with arbitrary values for `content-`
+    // <span class="before:content-[&#x27;asas&#x27;]"></span>
+    // <span class="before:content-[&quot;asas&quot;]"></span>
+    //
+    // if a class name contains `'` or `"` those will be replaced with HTMl entities
+    // To fix this we replace those for depending on the actual quote that is being used
+    // as an alternative we could always escape class names direcly in twind like react does
+    // but this works for now
+    const token =
+      quote == `"`
+        ? value.replace(/(\[)&#x27;|&#x27;(])/g, `$1'$2`)
+        : quote == `'`
+        ? value.replace(/(\[)&quot;|&quot;(])/g, `$1"$2`)
+        : value
+
+    const className = tw(token)
 
     // We only need to shift things around if we need to actually change the markup
     if (changed(value, className)) {