Global CSS import does not handle backslashes correctly

[jsardev]

I wanted to use Tailwind CSS arbitrary values and it did not work correctly with current create-figma-plugin implementation.

The problem is that Tailwind outputs properly escaped [/] signs in css, but it is not handled correctly in the inline import logic.

Consider this output.css file

.grid-cols-\[1fr_1fr\] {
  grid-template-columns: 1fr 1fr;
}

After importing it via import '!./output.css' we get:

.grid-cols-[1fr_1fr] {
  grid-template-columns: 1fr 1fr;
}

Which is incorrect CSS - the [/] values are considered atrribute selectors and not strings.

Additional info

Version: 3.1.0

[arkus-pm]

As for some reason 210 is not merged for a month and 182 is not merged for 6 months, here's temporary fix for arbitary values in Tailwind:

❗️ replace tailwind in filter: /tailwind\.js$/ with the name of your tailwind output file, which you import in your tsx files.

/* build-figma-plugin.ui.js */

const { readFileSync } = require("fs")

function fixTailwindInjectionPlugin() {
  return {
    name: "fix-tailwind-injection-plugin",
    setup(build) {
      build.onLoad({ filter: /tailwind\.js$/ }, async (args) => {
        const contents = readFileSync(args.path, "utf8")

        const modifiedContents = contents
          .replaceAll("\\2c ", "\\\\,")
          .replaceAll("\\[", "\\\\[")
          .replaceAll("\\]", "\\\\]")

        return { contents: modifiedContents, loader: "js" }
      })
    },
  }
}

module.exports = function (buildOptions) {
  return {
    ...buildOptions,
    define: {
      global: "window",
    },
    plugins: [
      ...buildOptions.plugins
      fixTailwindInjectionPlugin(),
    ],
  }
}

[jsardev]

@arkus-pm Thank you for the workaround! ❤️

[pawelkontek]

@yuanqing could you merge this / fix this, pretty please? 🙏 It is bugging me, and I am not that versed in applying this change in my local setup.