Arbitrary values aren't recognised in Ruby percent arrays

[developius]

Thank you for an awesome tool! I've been using it in all my projects recently and the productivity gains have been immense.

What version of Tailwind CSS are you using?

Tailwind v3.2.4

What build tool (or framework if it abstracts the build tool) are you using?

postcss: 8.4.19, postcss-cli 10.0.0

What version of Node.js are you using?

Node v16.18.1

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

I have added a test case that fails, showing the incorrect behaviour. This is the first time I've popped the hood on Tailwind, so forgive me if the regexes I've linked are the incorrect ones.

developius@5fb86ab

Describe your issue

We're using Ruby on Rails with Tailwind and use the Ruby percent string syntax to generate arrays.
Something like %w[text-[#bada55]] becomes ["text-[#bada55]"] in Ruby.

The following ERB code doesn't correctly generate the arbitrary value Tailwind class:

<%= content_tag(:div, class: %w[text-[#bada55]]) {} %>

However, this does work:

<%= content_tag(:div, class: ["text-[#a55bad]"]) {} %>

As noted in my commit above, I think this is due to the extra closing square bracket tripping up the regex here¹ but my knowledge of Tailwind's internals is very vague.

I'm not sure if there's a way to fix this or not, as I appreciate that handling extremely specific scenarios like this is a direction the project might not want to head in. But maybe there's a quick fix? Thanks for checking this issue out, anyway 😄

Footnotes

1. https://github.com/tailwindlabs/tailwindcss/blob/master/src/lib/defaultExtractor.js#L65 ↩

[thecrypticace]

So, just following up on this. Making this working might require some regex hijinks (and may not work well in general but will take a look). You are right the extra ] at the end is what is tripping it up. The reason being is because in HTML class="text-[#bada55]" is a valid use of a class but class="text-[#bada55]]" is not (because it wouldn't match).

I'm pretty sure you can add spaces around the values in a percent-style array and this will be properly picked up by Tailwind CSS and produce the same output in Ruby:
%w[ text-[#bada55] ]

[thecrypticace]

Another idea is to use transformers to transform the source files before Tailwind CSS sees it:

module.exports = {
  content: {
    files: [
      "./src/**/*.erb",
    ],
    transform: {
      erb: content => content.replace(/%w\[(.*)\]/g, '%w[ $1 ]'),
    }
  },
}

[developius]

The transformer works perfectly, thank you @thecrypticace. I also validated that no other classes got added to the generated CSS - it only included the previously-unmatching one 💯

Do you feel that a modification to the regex is a path we can take here? We can use the transformer in the meantime.

[thecrypticace]

Hey, I've merged a fix for this which will be in our next release. In the mean time you can test it by installing our insiders build: npm install tailwindcss@insiders. It'll take a few minutes for the changes to build, test, and publish to npm. Thanks! ✨