feature(template syntax): santization before PostCSS #3028
Conversation
- Added a santizeStyles option to account for templating syntax. Can use as either complete block or CSS values either in <mj-style> tag or style=“” attributes - Added optional templateSyntax array of objects for multiple syntax types - Created a shim for minifyCSS to minifyCss for CLI
| let sanitizedValue = styleValue | ||
| syntaxes.forEach(({ prefix, suffix }, idx) => { | ||
| const regex = new RegExp( | ||
| `(\\s*)${escapeRegex(prefix)}\\s*([\\s\\S]*?)\\s*${escapeRegex(suffix)}(\\s*)`, |
There was a problem hiding this comment.
If you have something like <div data-broken="{{var:broken" data-first="{{var:first_name}}" data-last="[[var:last_name]]">, I think it will match "{{var:broken" data-first="{{var:first_name}}" as a single entity and thus replace all of this with a placeholder.
Not sure if we have checks beforehand that prevent broken syntax like this to be passed to this function, if that's the case feel free to disregard this comment
There was a problem hiding this comment.
The function only processes content either between <style> tags or within the style="" attribute so it wouldn't look at data attributes. I have added a precheck for unbalanced delimeters though even though it's not strictly necessary as the point of the sanitization is to pass PostCSS validation and this would cause it to fail and alert the user to an issue.
- Removed spaces from restored values when using sanitizeStyles - Added allowMixedSyntax to allow bost block and CSS propertiy/value pairs in the same document - Added function to precheck for unbalanced delimeters before sanitizing - Added unit tests - Update docs
What:
Added sanitisation options for when users add templating syntax
Why:
PostCSS was choking on template syntax
How: