benjaminkott / benjaminkott/bootstrap_package

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

Open
#1,073 0 comments 0 reactions 0 assignees View on GitHub
feature
Dominant language
PHP
Stars
355
Forks
212
Avg merge
1h 4m
Merged PRs (30d)
31

Description

(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`:

```php
// 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.