From 0bd593bb41e78b2743dface54d761cf112d4ad8c Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Tue, 13 Jun 2023 17:00:05 +0100
Subject: [PATCH] Fix comments breaking a class

---
 scripts/convert-tokens.ts      |  9 ++++----
 styles/dist/tailwind-tokens.js | 38 +++++++++++++++++++++-------------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts
index e744b1d5..9096cc19 100644
--- a/scripts/convert-tokens.ts
+++ b/scripts/convert-tokens.ts
@@ -190,13 +190,14 @@ const makeColorUtility = (
     colors
       .filter((color) => color.name.startsWith(tokenPrefix))
       .map(
-        (color) => `
-				'${
+        (color) => `${
           (color.original.description &&
             // FIXME: Remove replace once https://github.com/tailwindlabs/tailwindcss/issues/7420 is fixed
-            `/* ${color.original.description.trim()} */ \\n`.replace(/,/g, ';')) ||
+            `
+            /* ${color.original.description.trim()} */
+            `.replace(/,/g, ';')) ||
           ''
-        }.${color.name.replace(tokenPrefix, classPrefix)}': {
+        }'.${color.name.replace(tokenPrefix, classPrefix)}': {
 					${properties.map((prop) => `'${prop}': 'var(--${color.name})'`)}
 				}`,
       )
diff --git a/styles/dist/tailwind-tokens.js b/styles/dist/tailwind-tokens.js
index 06919205..38c25868 100644
--- a/styles/dist/tailwind-tokens.js
+++ b/styles/dist/tailwind-tokens.js
@@ -224,7 +224,8 @@ module.exports.colorUtilities = {
   '.bg-disabled': {
     'background-color': 'var(--surface-disabled)',
   },
-  '/* Command menu backdrop */ \n.bg-scrim': {
+  /* Command menu backdrop */
+  '.bg-scrim': {
     'background-color': 'var(--surface-scrim)',
   },
   '.bg-accent': {
@@ -311,7 +312,8 @@ module.exports.colorUtilities = {
   '.border-raise': {
     'border-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.border-surface': {
+  /* Matches the default surface color */
+  '.border-surface': {
     'border-color': 'var(--stroke-surface)',
   },
   '.border-accent': {
@@ -401,7 +403,8 @@ module.exports.colorUtilities = {
   '.border-l-raise': {
     'border-left-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.border-l-surface': {
+  /* Matches the default surface color */
+  '.border-l-surface': {
     'border-left-color': 'var(--stroke-surface)',
   },
   '.border-l-accent': {
@@ -491,7 +494,8 @@ module.exports.colorUtilities = {
   '.border-r-raise': {
     'border-right-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.border-r-surface': {
+  /* Matches the default surface color */
+  '.border-r-surface': {
     'border-right-color': 'var(--stroke-surface)',
   },
   '.border-r-accent': {
@@ -581,7 +585,8 @@ module.exports.colorUtilities = {
   '.border-t-raise': {
     'border-top-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.border-t-surface': {
+  /* Matches the default surface color */
+  '.border-t-surface': {
     'border-top-color': 'var(--stroke-surface)',
   },
   '.border-t-accent': {
@@ -671,7 +676,8 @@ module.exports.colorUtilities = {
   '.border-b-raise': {
     'border-bottom-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.border-b-surface': {
+  /* Matches the default surface color */
+  '.border-b-surface': {
     'border-bottom-color': 'var(--stroke-surface)',
   },
   '.border-b-accent': {
@@ -766,7 +772,8 @@ module.exports.colorUtilities = {
     'border-left-color': 'var(--stroke-raise)',
     'border-right-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.border-x-surface': {
+  /* Matches the default surface color */
+  '.border-x-surface': {
     'border-left-color': 'var(--stroke-surface)',
     'border-right-color': 'var(--stroke-surface)',
   },
@@ -886,7 +893,8 @@ module.exports.colorUtilities = {
     'border-top-color': 'var(--stroke-raise)',
     'border-bottom-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.border-y-surface': {
+  /* Matches the default surface color */
+  '.border-y-surface': {
     'border-top-color': 'var(--stroke-surface)',
     'border-bottom-color': 'var(--stroke-surface)',
   },
@@ -1001,7 +1009,8 @@ module.exports.colorUtilities = {
   '.ring-raise': {
     '--tw-ring-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.ring-surface': {
+  /* Matches the default surface color */
+  '.ring-surface': {
     '--tw-ring-color': 'var(--stroke-surface)',
   },
   '.ring-accent': {
@@ -1091,7 +1100,8 @@ module.exports.colorUtilities = {
   '.outline-raise': {
     'outline-color': 'var(--stroke-raise)',
   },
-  '/* Matches the default surface color */ \n.outline-surface': {
+  /* Matches the default surface color */
+  '.outline-surface': {
     'outline-color': 'var(--stroke-surface)',
   },
   '.outline-accent': {
@@ -1220,10 +1230,10 @@ module.exports.colorUtilities = {
   '.chart-stroke-y-axis': {
     stroke: 'var(--chart-stroke-y-axis)',
   },
-  '/* Used as a stroke in conjuction with a fill. For discrete shapes e.g. bar charts; pie charts; tree maps. */ \n.chart-stroke-item':
-    {
-      stroke: 'var(--chart-stroke-item)',
-    },
+  /* Used as a stroke in conjuction with a fill. For discrete shapes e.g. bar charts; pie charts; tree maps. */
+  '.chart-stroke-item': {
+    stroke: 'var(--chart-stroke-item)',
+  },
   '.chart-stroke-item-inactive': {
     stroke: 'var(--chart-stroke-item-inactive)',
   },