Tailwindcss directives do not work with multiline

[marceloclp]

Hi, I can't get the tailwindcss @apply directive to work with multilines:

The following works:

@layer components
  .input
    @apply px-10 // Works with single classes on a single line
    @apply border border-gray-300 // Works with multiple classes on the same line

The following breaks:

@layer components
  .input
    // One class per line doesnt work
    @apply
      px-10
      border
      border-gray-300
    // Using parenthesis doesn't work
    @apply (
      px-10
      border
      border-gray-300)
    // Using \ doesn't work
    @apply \
      px-10 \
      border \
      border-gray-300
    // Using a semicolon at the end of each line doesn't work
    @apply px-10,
      border,
      border-gray-300

I am wondering if I am doing something wrong here?

[ai]

Nope. We just have not support for multiline at-rules.

Do you want to send PR with parenthesis, \ and semicolon at the end features for at-rules?

[marceloclp]

Yes, could you point me on where to look?

[ai]

Sure.

1. I recommend starting from test. Then with npx jest -t 'TEST NAME' you will be able to debug some specific case.
2. Check out what atrule() method parser.js accepts. Try to find how decl() method handle multiline values and back-port it to atrule().