Tailwind Parser JS

JS Style: Vanilla JS with limited use of jQuery.

File Path: /js/tailwind-parser.js

The Tailwind Parser JS script provides Tailwind parsing support for Gutenberg blocks that provide a class name field. This support is found in all ACF Engine Core blocks, as well as all WordPress core blocks. We expect it to be found in most (or all) 3rd-party blocks as well as most custom blocks created with the ACF Engine Block Type UI.

The main role of the Tailwind Parser JS is to check if Tailwind classes used in the custom class name field are already loaded into the output.css Tailwind file. If classes are not found, these classes are loaded by sending an AJAX Post Request to a PHP AJAX hook that will then parse the classes from the appropriate Tailwind Raw File and add these to the Tailwind Class Registry.

Critical Feature Reference

Trigger Parsing of Unfound CSS Rules

If the user enters a Tailwind CSS class that does not exist in the Tailwind Output File an AJAX Post Request is sent to the hook “acfg_tw_parse”. This triggers an attempt to parse the class from the Tailwind Raw Files and if this is successful the class is parsed and registered, and the final CSS rule is returned in the AJAX response.

Function Reference

injectStyles( css )

Appends inline CSS to Gutenberg temporarily to enable that CSS to work immediately without a page refresh. Only newly added Tailwind Classes are added this way, and on future page refreshes or use of the same class they will already be loaded into the Tailwind Output CSS file.

parseUnfoundRules( er, br )

Parses custom CSS class names and check with ruleExists() function if the given rule exists in the DOM loaded stylesheet.

getClassInput( c )

Identify the custom CSS input field in the DOM for the given block.

getBlockRules( c )

Get block CSS rules from the identified block class name input field.

ruleExists( rules, ruleToFind )

Checks if an of an array of CSS rules are found loaded in the DOM currently.


Loads existing DOM stylesheet rules.