expected } but instead the file ends

[damien-schneider]

✖ CSS Formatter Error: Expected '}' but File Ends

Issue Summary

When working with .css files in a Tailwind CSS environment, the formatter occasionally throws an error:

✖ expected '}' but instead the file ends

This error often occurs when using directives like @apply and functions such as theme(). Despite appearing to be a syntax error, the root cause is typically a missing semicolon (;) at the end of a line using these directives.

Environment Details

• Framework: Tailwind CSS
• Tools: Modul (as referenced in the example)
• File Type: .css
• Common Directives: @apply, theme()

Example Code Causing the Error

In the following CSS snippet used within Modul, the formatter reports an error:

.excalidraw__canvas {
  @apply rounded-3xl
}
.excalidraw {
  @apply overflow-visible !important;
}

Error Message:

✖ expected '}' but instead the file ends

Root Cause

The error is misleading and does not point directly to the actual issue. The real problem is a missing semicolon (;) at the end of lines that use @apply or theme() directives. Without the semicolon, the formatter misinterprets the CSS syntax, leading to the erroneous expected '}' message.

Solution

Ensure that every @apply and theme() directive line ends with a semicolon (;). Here's the corrected version of the example:

.excalidraw__canvas {
  @apply rounded-3xl;
}
.excalidraw {
  @apply overflow-visible !important;
}

Additional Notes

• Ignored Files: Even files marked to be ignored by the formatter can trigger this error if the semicolon is missing.
• Community Contribution: I created this discussion after finding no existing solutions, hoping it might assist others facing the same issue.

Conclusion

If you encounter the ✖ expected '}' but instead the file ends error in a Tailwind CSS environment, check for missing semicolons (;) at the end of lines using @apply or theme(). Adding the missing semicolon should resolve the formatting error.

[damien-schneider]

Solution

Ensure that every @apply and theme() directive line ends with a semicolon ;. Here's the corrected version of the example: