Variables in css not recognised

[colinmackinlay]

I would like to have MPDF support variables in rgba css

This is mPDF and PHP version and environment (server/fpm/cli etc) I am using

mpdf 8.0.7 php 7.4

This is a HTML/CSS code snippet I use

.bg-red-400{
  --bg-opacity: 1;
  background-color: #f98080;
  background-color: rgba(249, 128, 128, var(--bg-opacity));
}

This CSS is generated by Tailwind which is pretty widely used. Since a few versions ago they've added the var approach to opacity that breaks mpdf at This occurs in processModeColour here:

case 'rgba':
return [static::MODE_RGBA, $cores[0], $cores[1], $cores[2], $cores[3] * 100];

Either mpdf could use the variable or could fall back to the RGB value provided.

Related to #1033 ?

[pokyworld]

All the default values in Tailwind CSS are 1 anyway (on opacity values). I'm forcing the purgeCSS, so my output has only the classes I'm using, so not such a big job to manually edit the output. All the same a "hack" would be greatly appreciated if not a complete fix. Also worth asking Tailwind to offer a config setting to prevent use of variables, and use values instead.

[pokyworld]

Ok, found a solution.

Install: npm install postcss-custom-properties --save-dev

Then you need two things: First: a config (assuming laravel-mix): const mix = require('laravel-mix'); const postcssCustomProperties = require('postcss-custom-properties');

mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require("tailwindcss"), postcssCustomProperties({ preserve: false, importFrom: 'public/css/app.css' }), ]);

(preserve: false - removes variables and replaces with values)

second: define the variables you want replacing in a :root { } block in the file to be processed (resources/css/app.css): :root { --tw-bg-opacity: 1; --tw-text-opacity: 1; } and when you run npm run dev (or watch) the variables are gone.

Without the preserve = false you get both a line with the value AND one with the variable:

.bg-white { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); }

This is a good fix for browsers that might not support variables (IE), but still breaks mPdf. Use: preserve: false

.bg-white { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, 1); }

[colinmackinlay]

@pokyworld Genius - thank you :)