Fix CSS escaping + add tests for Tailwind CSS

Author: yuanqing

packages/build/src/utilities/build-bundles-async/esbuild-css-modules-plugin.ts

@@ -78,7 +78,11 @@ async function createCssFilePathAsync(
 }
 
 const backQuoteRegex = /`/g
-const backSlashColonRegex = /\\:/g
+const backSlashRegex = /\\/g
+
+function escapeCss(css: string) {
+  return css.replace(backQuoteRegex, '\\`').replace(backSlashRegex, '\\\\')
+}
 
 async function createGlobalCssJavaScriptAsync(
   cssFilePath: string,
@@ -105,9 +109,7 @@ async function createGlobalCssJavaScriptAsync(
     if (document.getElementById('${elementId}') === null) {
       const element = document.createElement('style');
       element.id = '${elementId}';
-      element.innerHTML = \`${css
-        .replace(backQuoteRegex, '\\`')
-        .replace(backSlashColonRegex, '\\\\:')}\`;
+      element.textContent = \`${escapeCss(css)}\`;
       document.head.${isBaseCss === true ? 'prepend' : 'append'}(element);
     }
     export default {};
@@ -152,9 +154,7 @@ async function createCssModulesJavaScriptAsync(
     if (document.getElementById('${elementId}') === null) {
       const element = document.createElement('style');
       element.id = '${elementId}';
-      element.textContent = \`${css
-        .replace(backQuoteRegex, '\\`')
-        .replace(backSlashColonRegex, '\\\\:')}\`;
+      element.textContent = \`${escapeCss(css)}\`;
       document.head.append(element);
     }
     export default ${classNamesJson};

packages/build/test/build-async/build-async.ts

@@ -450,6 +450,39 @@ test('global CSS', async function (t) {
   await cleanUpAsync()
 })
 
+test('tailwind CSS', async function (t) {
+  t.plan(11)
+  const directoryPath = join(__dirname, 'fixtures', '14-tailwind-css')
+  process.chdir(directoryPath)
+  await cleanUpAsync()
+  t.false(await pathExists('build'))
+  t.false(await pathExists('manifest.json'))
+  t.false(await pathExists('node_modules'))
+  t.false(await pathExists('src/styles.css.d.ts'))
+  await installFigmaPluginTypingsAsync()
+  await symlinkCreateFigmaPluginTsConfigAsync()
+  await buildAsync({ ...buildAsyncOptions, outputDirectory: directoryPath })
+  const manifestJson = JSON.parse(await fs.readFile('manifest.json', 'utf8'))
+  t.deepEqual(manifestJson, {
+    api: '1.0.0',
+    editorType: ['figma'],
+    id: '42',
+    name: 'a',
+    main: 'build/main.js',
+    ui: 'build/ui.js'
+  })
+  t.true(await pathExists('build/main.js'))
+  t.true(await pathExists('build/ui.js'))
+  const uiJs = await fs.readFile('build/ui.js', 'utf8')
+  t.true(uiJs.indexOf('.\\\\!top-\\\\[117px\\\\]') !== -1)
+  t.true(
+    uiJs.indexOf(".before\\\\:content-\\\\[\\\\'foo\\\\'\\\\]::before") !== -1
+  )
+  t.true(uiJs.indexOf('.hover\\\\:bg-\\\\[\\\\#bada55\\\\]:hover') !== -1)
+  t.true(await pathExists('src/styles.css.d.ts'))
+  await cleanUpAsync()
+})
+
 test('preact', async function (t) {
   t.plan(6)
   const directoryPath = join(__dirname, 'fixtures', '15-preact')

packages/build/test/build-async/fixtures/14-tailwind-css/package.json

@@ -0,0 +1,8 @@
+{
+  "figma-plugin": {
+    "id": "42",
+    "name": "a",
+    "main": "src/main.ts",
+    "ui": "src/ui.ts"
+  }
+}

packages/build/test/build-async/fixtures/14-tailwind-css/src/main.ts

@@ -0,0 +1,7 @@
+import { showUI } from '@create-figma-plugin/utilities'
+
+export default function () {
+  const options = { height: 120, width: 240 }
+  const data = { greeting: 'Hello, World!' }
+  showUI(options, data)
+}

packages/build/test/build-async/fixtures/14-tailwind-css/src/styles.css

@@ -0,0 +1,13 @@
+.\!top-\[117px\] {
+  top: 117px !important;
+}
+
+.before\:content-\[\'foo\'\]::before {
+  --tw-content: 'foo';
+  content: var(--tw-content);
+}
+
+.hover\:bg-\[\#bada55\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(186 218 85 / var(--tw-bg-opacity));
+}

packages/build/test/build-async/fixtures/14-tailwind-css/src/ui.ts

@@ -0,0 +1,5 @@
+import '!./styles.css'
+
+export default function (rootNode: HTMLElement, data: { greeting: string }) {
+  rootNode.innerHTML = `<p class="!top-[117px] hover:bg-[#bada55] before:content-['foo']">${data.greeting}</p>`
+}

packages/build/test/build-async/fixtures/14-tailwind-css/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@create-figma-plugin/tsconfig",
+  "compilerOptions": {
+    "typeRoots": ["node_modules/@figma"]
+  },
+  "include": ["src/**/*.ts"]
+}