CSS @supports Block Watcher & Remover

Overview

This script watches a specified CSS file and automatically removes a problematic @supports block that can cause issues when using Tailwind CSS in a ServiceNow project with the now-cli UI Component extension.

It was created to fix a specific compatibility problem between Tailwind’s generated CSS and the SCSS version used in the project.
The block removed matches the following pattern:

@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
  ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
  ...;
}

This watcher ensures that any time the file changes—such as after a Tailwind build—the offending @supports section is automatically stripped out, keeping the CSS compatible with the ServiceNow environment.

How It Works

• Watches a target CSS file for changes using chokidar.
• On every change:
  • Scans for the exact @supports block using a regex.
  • Uses brace depth counting to correctly remove the entire block, even if nested braces are inside.
  • Writes the cleaned CSS back to the same file.
  • Ignores self-triggered changes for 500 ms to prevent infinite write loops.
• Runs an initial cleanup immediately on start.

Notes

• Requires Node.js 14+ (for async/await with fs.promises).
• The regex is specific to the known problematic Tailwind @supports block.
  If Tailwind changes its generated CSS, you may need to adjust the regex in config.pattern.
• Works best in tandem with now-cli ui-component workflows where Tailwind is locally installed.