Idea: Include CSS auto vendor prefixing with help of csscrush?

[mandrasch]

(Hey, thanks very much for providing this as open source!)

The official bootstrap docs recommend Autoprefixer (node) for sass source files (https://getbootstrap.com/docs/5.0/getting-started/download/#source-files). Vendor prefixing is (unfortunately) still needed, see e.g. https://css-tricks.com/is-vendor-prefixing-dead/#conclusion.

To provide the best cross browser experience I think it's good to use bootstrap source files with auto vendor prefixes as recommended.

A PHP alternative for Autoprefixer I found is csscrush (https://the-echoplex.net/csscrush/).

I ran a quick test adding it to Classes/Parser/ScssParser.php after adding it via composer require css-crush/css-crush:

        // Compile file
        $compilationResult = $scss->compileString('@import "' . $absoluteFilename . '"');
        $css = $compilationResult->getCss();

        // Fix paths in url() statements to be relative to temp directory
        $relativeTempPath = $settings['cache']['tempDirectoryRelativeToRoot'];
        $search = '%url\s*\(\s*[\\\'"]?(?!(((?:https?:)?\/\/)|(?:data:?:)))([^\\\'")]+)[\\\'"]?\s*\)%';
        $replace = 'url("' . $relativeTempPath . '$3")';
        $css = (string) preg_replace($search, $replace, $css);

        // NEW: Add vendor Prefixing with csscrush
        $css = csscrush_string($css,['minify' => false,'boilerplate' => false, 'versioning' => false]);
        // EO NEW

        return [
            'css' => $css,
            'cache' => [

This worked for me, all vendor prefixes were added. Unfortunately I'm not sure if this will mess with source map or other features/options. 🤔

If somebody has a hint whether this could be useful, I would really appreciate it.

References:

• This was also discussed in issue https://github.com/benjaminkott/bootstrap_package/issues/637#issuecomment-863126082

Optional information for people interested in this:

If you're reading this and want to use it right away, I discovered that you can override the bootstrap package parser class via ext_localconf.php in your custom extension, e.g.

// Register css processing parser
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/bootstrap-package/css']['parser'][\BK2K\BootstrapPackage\Parser\ScssParser::class] =
    \YourName\YourExtension\Parser\ScssParser::class;

Copy the the ScssParser file to your extensions /Classes/Parser directory and change namespace + change reference to AbstractParser:

namespace \YourName\YourExtension\Parser;
use \BK2K\BootstrapPackage\Parser\AbstractParser as AbstractParser;

Add $css = csscrush_string($css,['minify' => false,'boilerplate' => false, 'versioning' => false]); before return and you should be all set.