benjaminkott / benjaminkott/bootstrap_package
Idea: Include CSS auto vendor prefixing with help of csscrush?
- 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.