silbinarywolf / silverstripe-stampycss
A module for integrating the CSSCrush PHP preprocessor with Silverstripe.
Installs: 10
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 0
Forks: 1
Type:silverstripe-module
This package is not auto-updated.
Last update: 2020-01-24 16:27:52 UTC
README
Add support for CrushCSS using the Silverstripe Requirements Backend. This module comes with CSSCrush decoupled from the Requirements_Backend so you can integrate it with your own custom solutions.
Quick Install
- Put module in root folder
- Put the following in your _config.php
Requirements::set_backend(new Stampy\Requirements_Backend());
Enable Source Maps
- Update your YML so source map files will be generated
Stampy\CSSCrush: options: source_map: true
- Update your assets/.htaccess to allow the "map" file extension. Change from something like this:
Deny from all
<FilesMatch "\.(?i:html|htm|xhtml|js|css|bmp|png|gif|jpg|jpeg|ico|pcx|tif|tiff|au|mid|midi|mpa|mp3|ogg|m4a|ra|wma|wav|cda|avi|mpg|mpeg|asf|wmv|m4v|mov|mkv|mp4|ogv|webm|swf|flv|ram|rm|doc|docx|dotx|dotm|txt|rtf|xls|xlsx|xltx|xltm|pages|ppt|pptx|potx|potm|pps|csv|cab|arj|tar|zip|zipx|sit|sitx|svg|gz|tgz|bz2|ace|arc|pkg|dmg|hqx|jar|xml|pdf|gpx|kml)$">
Allow from all
</FilesMatch>
To this:
Deny from all
<FilesMatch "\.(?i:html|htm|xhtml|js|css|bmp|png|gif|jpg|jpeg|ico|pcx|tif|tiff|au|mid|midi|mpa|mp3|ogg|m4a|ra|wma|wav|cda|avi|mpg|mpeg|asf|wmv|m4v|mov|mkv|mp4|ogv|webm|swf|flv|ram|rm|doc|docx|dotx|dotm|txt|rtf|xls|xlsx|xltx|xltm|pages|ppt|pptx|potx|potm|pps|csv|cab|arj|tar|zip|zipx|sit|sitx|svg|gz|tgz|bz2|ace|arc|pkg|dmg|hqx|jar|xml|pdf|gpx|kml|map)$">
Allow from all
</FilesMatch>
Extending CSS Crush
With CSSCrush, you're able to add custom functions to the preprocessor.
Stampy\CSSCrush: extensions: [CSSCrushExtension]
<?php class CSSCrushExtension extends \Extension { public function onInit() { csscrush_add_function('px2vw', array($this, 'px2vw')); csscrush_add_function('px2vh', array($this, 'px2vh')); } public function px2vw(array $arguments, $context) { if (!isset($arguments[1])) { throw InvalidArgumentException(__FUNCTION__.' requires 2 parameters.'); } $dimen = (int)$arguments[0]; $screenDimen = (int)$arguments[1]; $result = ($dimen / $screenDimen) * 100; return $result.'vw'; } public function px2vh(array $arguments, $context) { if (!isset($arguments[1])) { throw InvalidArgumentException(__FUNCTION__.' requires 2 parameters.'); } $dimen = (int)$arguments[0]; $screenDimen = (int)$arguments[1]; $result = ($dimen / $screenDimen) * 100; return $result.'vh'; } }
Configuration
Stampy\CSSCrush: options: plugins: - 'px2em'
Roadmap
- Add 'updateOptions' extend to CSSCrush. Mainly so you can potentially use variables from SiteConfig or similar. This will require changing the option system to only store options on /dev/build or post-flush to ensure compatibility with caching.
Credits
CSS Crush 2.4.x by Peteboere Version: https://github.com/peteboere/css-crush/commit/9dc087f64371c772a2aa36284623185e76ed8c50