We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I wanted to use Tailwind CSS arbitrary values and it did not work correctly with current create-figma-plugin implementation.
create-figma-plugin
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
output.css
.grid-cols-\[1fr_1fr\] { grid-template-columns: 1fr 1fr; }
After importing it via import '!./output.css' we get:
import '!./output.css'
.grid-cols-[1fr_1fr] { grid-template-columns: 1fr 1fr; }
Which is incorrect CSS - the [/] values are considered atrribute selectors and not strings.
Version: 3.1.0
3.1.0
The text was updated successfully, but these errors were encountered:
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.
tailwind
filter: /tailwind\.js$/
/* 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(), ], } }
Sorry, something went wrong.
@arkus-pm Thank you for the workaround! ❤️
Successfully merging a pull request may close this issue.
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
fileAfter importing it via
import '!./output.css'
we get:Which is incorrect CSS - the
[
/]
values are considered atrribute selectors and not strings.Additional info
Version:
3.1.0
The text was updated successfully, but these errors were encountered: