css-crush/css-crush

CSS preprocessor

v4.1.3 2022-09-05 10:24 UTC

Requires

• php: >=7.1

Requires (Dev)

• phpunit/phpunit: 8.*
• psr/log: 1.0.*@dev
• twig/twig: 1.*

MIT

• Pete Boere
• GitHub contributors

• css
• preprocessor

README

A CSS preprocessor designed to enable a modern and uncluttered CSS workflow.

• Automatic vendor prefixing
• Variables
• Import inlining
• Nesting
• Functions (color manipulation, math, data-uris etc.)
• Rule inheritance (@extends)
• Mixins
• Minification
• Lightweight plugin system
• Source maps

See the docs for full details.

Setup (PHP)

If you're using Composer you can use Crush in your project with the following line in your terminal:

composer require css-crush/css-crush:dev-master

If you're not using Composer yet just download the library into a convenient location and require the bootstrap file:

<?php require_once 'path/to/CssCrush.php'; ?>

Basic usage (PHP)

<?php

echo csscrush_tag('css/styles.css');

?>

Compiles the CSS file and outputs the following link tag:

<link rel="stylesheet" href="css/styles.crush.css" media="all" />

There are several other functions for working with files and strings of CSS:

• csscrush_file($file, $options) - Returns a URL of the compiled file.
• csscrush_string($css, $options) - Compiles a raw string of css and returns the resulting css.
• csscrush_inline($file, $options, $tag_attributes) - Returns compiled css in an inline style tag.

There are a number of options available for tailoring the output, and a collection of bundled plugins that cover many workflow issues in contemporary CSS development.

Setup (JS)

npm install csscrush

Basic usage (JS)

// All methods can take the standard options (camelCase) as the second argument.
const csscrush = require('csscrush');

// Compile. Returns promise.
csscrush.file('./styles.css', {sourceMap: true});

// Compile string of CSS. Returns promise.
csscrush.string('* {box-sizing: border-box;}');

// Compile and watch file. Returns event emitter (triggers 'data' on compile).
csscrush.watch('./styles.css');

Contributing

If you think you've found a bug please create an issue explaining the problem and expected result.

Likewise, if you'd like to request a feature please create an issue with some explanation of the requested feature and use-cases.

Pull requests are welcome, though please keep coding style consistent with the project (which is based on PSR-2).

Licence

MIT