How to support @tailwindcss/typography's prose?

[jqhoogland]

I'm having a hard time getting .prose working with [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin).

I figured you just need require('@tailwindcss/typography') in your tailwind config plugins, but when I run maizzle build I get the following error:

unhandledRejection: SyntaxError: Invalid regular expression: /(?:^|\s)prose :where(ul ul(?:\s|$)/: Unterminated group

• Maizzle Version: Framework: v4.0.2; Cli: 1.5.1
• Node.js Version: 18.6.0

[cossssmin]

Looks like it's an issue with a regex in posthtml-match-helper:

SyntaxError: Invalid regular expression: /(?:^|\s)prose :where(ul ul(?:\s|$)/: Unterminated group
    at <input css x_LZcS>:336:1
    at new RegExp (<anonymous>)
    at expandMatcher (maizzle\node_modules\posthtml-match-helper\index.js:35:24)
    at Array.map (<anonymous>)
    at module.exports (maizzle\node_modules\posthtml-match-helper\index.js:148:18)
    at maizzle\node_modules\@maizzle\framework\src\transformers\removeInlinedSelectors.js:32:20
    at maizzle\node_modules\postcss\lib\container.js:96:18
    at maizzle\node_modules\postcss\lib\container.js:55:18
    at Root.each (maizzle\node_modules\postcss\lib\container.js:41:16)
    at Root.walk (maizzle\node_modules\postcss\lib\container.js:52:17)
    at Root.walkRules (maizzle\node_modules\postcss\lib\container.js:94:19) {
  postcssNode: Rule {
    raws: { before: '\r\n', between: ' ', semicolon: true, after: '\r\n' },
    type: 'rule',
    nodes: [ [Declaration], [Declaration] ],
    parent: Root {
      raws: [Object],
      type: 'root',
      nodes: [Array],
      source: [Object],
      lastEach: 1,
      indexes: [Object],
      [Symbol(isClean)]: false,
      [Symbol(my)]: true
    },
    source: { start: [Object], input: [Input], end: [Object] },
    selector: '.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *))',
    [Symbol(isClean)]: false,
    [Symbol(my)]: true
  }
}

[cossssmin]

So the reason this fails is that it tries to clean up and remove classes that it may have inlined, but actually those classes have not really been inlined by the CSS inliner (it can't inline them).

A solution would be to disable removeInlinedClasses:

// config.production.js

module.exports = {
  // ...,
  removeInlinedClasses: false,
}

This will prevent Maizzle from trying to remove classes that have been inlined and will preserve the prose classes.

However, keep in mind that the typography plugin is made for the web, and will not work consistently in email, because it uses advanced CSS selectors and CSS variables that not all email clients support.

[cossssmin]

Related issues, also caused by removeInlinedClasses:

#745

#728

[cossssmin]

OK, this should work now in v4.1.2, give it a try :)

https://github.com/maizzle/framework/releases/tag/v4.1.2

[jqhoogland]

Thank you cossssmin!