Awk TailwindCSS Util... I forget why I needed this.

gen-replace-classes.awk

#!/usr/bin/awk -f

## Awk script to convert @apply directives in a CSS file to a list of sed commands

BEGIN { RS = "}\n" }
/@apply/ {
    # Extract the @apply directive name to the left of the left-curly-brace
    class_name = substr($0, index($0, ".") + 1, index($0, "{") - index($0, ".") - 1);
    # trim whitespace from ends
    gsub(/^[ \t\n]+|[ \t\n]+$/, "", class_name);

    # debug class_name
    # print "class_name: " class_name;

    # Capture the body of the braces, excluding final semicolon
    search_string = substr($0, index($0, "{") + 1, length($0) - index($0, "{") - 2);

    # remove @apply directive and newline
    gsub(/@apply[ \t]+/, "", search_string);
    gsub(/\n/, "", search_string);

    # trim whitespace from ends
    gsub(/^[ \t]+|[ \t]+$/, "", search_string);

    # debug search_string
    # print "search_string: " search_string;

    # output sed command
    print "s/" search_string "/" class_name "/g";
}

# example usage:    awk -f gen-replace-classes.awk < src/source.css > output.sed
# example sed call: sed -f output.sed < index.html > output.css
# example one-liner: awk -f gen-replace-classes.awk < input.css | sed -f - index.html > index.new.html