update css-crush 4.13 for php8.2

This commit is contained in:
gtbu 2023-04-09 17:10:41 +02:00
parent 09589e3646
commit 0755591d8d
40 changed files with 3195 additions and 8 deletions

View file

@ -0,0 +1,29 @@
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Validate composer.json and composer.lock
run: composer validate --strict
- name: Cache Composer packages
id: composer-cache
uses: actions/cache@v2
with:
path: vendor
key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
restore-keys: |
${{ runner.os }}-php-
- name: Install dependencies
run: composer install --prefer-dist --no-progress
- name: Run test suite
run: composer run-script test

View file

@ -0,0 +1,36 @@
{
"name": "css-crush/css-crush",
"type": "library",
"description": "CSS preprocessor",
"keywords": ["css", "preprocessor"],
"homepage": "http://the-echoplex.net/csscrush",
"license": "MIT",
"scripts": {
"test": "vendor/bin/phpunit tests"
},
"authors": [
{
"name": "Pete Boere",
"email": "pete@the-echoplex.net"
},
{
"name": "GitHub contributors",
"homepage": "https://github.com/peteboere/css-crush/contributors"
}
],
"require": {
"php": ">=7.1"
},
"require-dev": {
"phpunit/phpunit": "8.*",
"psr/log": "1.0.*@dev",
"twig/twig": "1.*"
},
"bin": [
"bin/csscrush"
],
"autoload": {
"psr-0": { "CssCrush": "lib/" },
"files": [ "lib/functions.php" ]
}
}

View file

@ -0,0 +1,3 @@
# CSS-Crush Documentation
Rendered online at http://the-echoplex.net/csscrush

View file

@ -0,0 +1,84 @@
<!--{
"title": "API functions"
}-->
## csscrush_file()
Process CSS file and return the compiled file URL.
<code>csscrush_file( string $file [, array [$options](#api--options) ] )</code>
***************
## csscrush_tag()
Process CSS file and return an html `link` tag with populated href.
<code>csscrush_tag( string $file [, array [$options](#api--options) [, array $tag\_attributes ]] )</code>
***************
## csscrush_inline()
Process CSS file and return CSS as text wrapped in html `style` tags.
<code>csscrush_inline( string $file [, array [$options](#api--options) [, array $tag\_attributes ]] )</code>
***************
## csscrush_string()
Compile a raw string of CSS string and return it.
<code>csscrush_string( string $string [, array [$options](#api--options) ] )</code>
***************
## csscrush_get()
Retrieve a config setting or option default.
`csscrush_get( string $object_name, string $property )`
### Parameters
* `$object_name` Name of object you want to inspect: 'config' or 'options'.
* `$property`
***************
## csscrush_set()
Set a config setting or option default.
`csscrush_set( string $object_name, mixed $settings )`
### Parameters
* `$object_name` Name of object you want to modify: 'config' or 'options'.
* `$settings` Associative array of keys and values to set, or callable which argument is the object specified in `$object_name`.
***************
## csscrush_plugin()
Register a plugin.
`csscrush_plugin( string $name, callable $callback )`
***************
## csscrush_stat()
Get compilation stats from the most recent compiled file.
`csscrush_stat()`

View file

@ -0,0 +1,103 @@
<!--{
"title": "Options"
}-->
<table>
<tr>
<th class="option">Option
<th class="values">Values (default in bold)
<th>Description
</tr>
<tr>
<td class="option">minify
<td class="values"><b>true</b> | false | Array
<td>Enable or disable minification. Optionally specify an array of advanced minification parameters. Currently the only advanced option is 'colors', which will compress all color values in any notation.
</tr>
<tr>
<td class="option">formatter
<td class="values"><b>block</b> | single-line | padded
<td>Set the formatting mode. Overrides minify option if both are set.
</tr>
<tr>
<td class="option">newlines
<td class="values"><b>use-platform</b> | windows/win | unix
<td>Set the output style of newlines
</tr>
<tr>
<td class="option">boilerplate
<td class="values"><b>true</b> | false | Path
<td>Prepend a boilerplate to the output file
</tr>
<tr>
<td class="option">versioning
<td class="values"><b>true</b> | false
<td>Append a timestamped querystring to the output filename
</tr>
<tr>
<td class="option">vars
<td class="values">Array
<td>An associative array of CSS variables to be applied at runtime. These will override variables declared globally or in the CSS.
</tr>
<tr>
<td class="option">cache
<td class="values"><b>true</b> | false
<td>Turn caching on or off.
</tr>
<tr>
<td class="option">output_dir
<td class="values">Path
<td>Specify an output directory for compiled files. Defaults to the same directory as the host file.
</tr>
<tr>
<td class="option">output_file
<td class="values">Output filename
<td>Specify an output filename (suffix is added).
</tr>
<tr>
<td class="option">asset_dir
<td class="values">Path
<td>Directory for SVG and image files generated by plugins (defaults to the main file output directory).
</tr>
<tr>
<td class="option">stat_dump
<td class="values"><b>false</b> | true | Path
<td>Save compile stats and variables to a file in json format.
</tr>
<tr>
<td class="option">vendor_target
<td class="values"><b>"all"</b> | "moz", "webkit", ... | Array
<td>Limit aliasing to a specific vendor, or an array of vendors.
</tr>
<tr>
<td class="option">rewrite_import_urls
<td class="values"><b>true</b> | false | "absolute"
<td>Rewrite relative URLs inside inlined imported files.
</tr>
<tr>
<td class="option">import_paths
<td class="values">Array
<td>Additional paths to search when resolving relative import URLs.
</tr>
<tr>
<td class="option">plugins
<td class="values">Array
<td>An array of plugin names to enable.
</tr>
<tr>
<td class="option">source_map
<td class="values">true | <b>false</b>
<td>Output a source map (compliant with the Source Map v3 proposal).
</tr>
<tr>
<td class="option">context
<td class="values">Path
<td>Context for importing resources from relative urls (Only applies to `csscrush_string()` and command line utility).
</tr>
<tr>
<td class="option">doc_root
<td class="values">Path
<td>Specify an alternative server document root for situations where the CSS is being served behind an alias or url rewritten path.
</tr>
</table>

View file

@ -0,0 +1,44 @@
<!--{
"title": "Abstract rules"
}-->
Abstract rules are generic rules that can be [extended](#core--inheritance) with the `@extend` directive or mixed in (without arguments) like regular [mixins](#core--mixins) with the `@include` directive.
```crush
@abstract ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@abstract heading {
font: bold 1rem serif;
letter-spacing: .1em;
}
.foo {
@extend ellipsis;
display: block;
}
.bar {
@extend ellipsis;
@include heading;
}
```
```css
.foo,
.bar {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.foo {
display: block;
}
.bar {
font: bold 1rem serif;
letter-spacing: .1em;
}
```

View file

@ -0,0 +1,39 @@
<!--{
"title": "Auto prefixing"
}-->
Vendor prefixes for properties, functions, @-rules and declarations are **automatically generated** based on [trusted](http://caniuse.com) [sources](http://developer.mozilla.org/en-US/docs/CSS/CSS_Reference) so you can maintain cross-browser support while keeping your source code clean and easy to maintain.
```crush
.foo {
background: linear-gradient(to right, red, white);
}
```
```css
.foo {
background: -webkit-linear-gradient(to right, red, white);
background: linear-gradient(to right, red, white);
}
```
```crush
@keyframes bounce {
50% { transform: scale(1.4); }
}
```
```css
@-webkit-keyframes bounce {
50% {-webkit-transform: scale(1.4);
transform: scale(1.4);}
}
@keyframes bounce {
50% {-webkit-transform: scale(1.4);
transform: scale(1.4);}
}
```

View file

@ -0,0 +1,25 @@
<!--{
"title": "Direct @import"
}-->
Files referenced with the `@import` directive are inlined directly to save on http requests. Relative URL paths in the CSS are also updated if necessary.
If you specify a media designation following the import URL — as per the CSS standard — the imported file content is wrapped in a `@media` block.
```crush
/* Standard CSS @import statements */
@import "print.css" print;
@import url( "small-screen.css" ) screen and ( max-width: 500px );
```
```css
@media print {
/* Contents of print.css */
}
@media screen and ( max-width: 500px ) {
/* Contents of small-screen.css */
}
```

View file

@ -0,0 +1,25 @@
<!--{
"title": "Fragments"
}-->
Fragments defined and invoked with the <code>@fragment</code> directive work in a similar way to [mixins](#core--mixins), except that they work at block level:
```crush
@fragment input-placeholder {
#(1)::-webkit-input-placeholder { color: #(0); }
#(1):-moz-placeholder { color: #(0); }
#(1)::placeholder { color: #(0); }
#(1).placeholder-state { color: #(0); }
}
@fragment input-placeholder(#777, textarea);
```
```css
textarea::-webkit-input-placeholder { color: #777; }
textarea:-moz-placeholder { color: #777; }
textarea::placeholder { color: #777; }
textarea.placeholder-state { color: #777; }
```

View file

@ -0,0 +1,26 @@
<!--{
"title": "a-adjust()"
}-->
Manipulate the opacity (alpha channel) of a color value.
<code>a-adjust( *color*, *offset* )</code>
## Parameters
* *`color`* Any valid CSS color value
* *`offset`* The percentage to offset the color opacity
## Returns
The modified color value
## Examples
```css
/* Reduce color opacity by 10% */
color: a-adjust( rgb(50,50,0) -10 );
```

View file

@ -0,0 +1,33 @@
<!--{
"title": "data-uri()"
}-->
Create a data-uri.
<code>data-uri( *url* )</code>
## Parameters
* *`url`* URL of an asset
`url` cannot be external, and must not be written with an http protocol prefix.
The following file extensions are supported: jpg, jpeg, gif, png, svg, svgz, ttf, woff
## Returns
The created data-uri as a string inside a CSS url().
## Examples
```crush
background: silver data-uri(../images/stripe.png);
```
```css
background: silver url(data:<img-data>);
```

View file

@ -0,0 +1,24 @@
<!--{
"title": "h-adjust()"
}-->
Adjust the hue of a color value.
<code>h-adjust( *color*, *offset* )</code>
## Parameters
* *`color`* Any valid CSS color value
* *`offset`* The percentage to offset the color hue (percent mark optional)
## Returns
The modified color value.
## Examples
```css
color: h-adjust( deepskyblue -10 );
```

View file

@ -0,0 +1,27 @@
<!--{
"title": "hsl-adjust()"
}-->
Manipulate the hue, saturation and lightness of a color value
<code>hsl-adjust( *color*, *hue-offset*, *saturation-offset*, *lightness-offset* )</code>
## Parameters
* *`color`* Any valid CSS color value
* *`hue-offset`* The percentage to offset the color hue
* *`saturation-offset`* The percentage to offset the color saturation
* *`lightness-offset`* The percentage to offset the color lightness
## Returns
The modified color value
## Examples
```css
/* Lighten and increase saturation */
color: hsl-adjust( red 0 5 5 );
```

View file

@ -0,0 +1,27 @@
<!--{
"title": "hsla-adjust()"
}-->
Manipulate the hue, saturation, lightness and opacity of a color value.
<code>hsla-adjust( *color*, *hue-offset*, *saturation-offset*, *lightness-offset*, *alpha-offset* )</code>
## Parameters
* *`color`* Any valid CSS color value
* *`hue-offset`* The percentage to offset the color hue
* *`saturation-offset`* The percentage to offset the color saturation
* *`lightness-offset`* The percentage to offset the color lightness
* *`alpha-offset`* The percentage to offset the color opacity
## Returns
The modified color value.
## Examples
```css
color: hsla-adjust( #f00 0 5 5 -10 );
```

View file

@ -0,0 +1,24 @@
<!--{
"title": "l-adjust()"
}-->
Adjust the lightness of a color value.
<code>l-adjust( *color*, *offset* )</code>
## Parameters
* *`color`* Any valid CSS color value
* *`offset`* The percentage to offset the color hue (percent mark optional)
## Returns
The modified color value.
## Examples
```css
color: l-adjust( deepskyblue 10 );
```

View file

@ -0,0 +1,19 @@
<!--{
"title": "math()"
}-->
Evaluate a raw mathematical expression.
<code>math( *expression* [, *unit*] )</code>
## Examples
```crush
font-size: math( 12 / 16, em );
```
```css
font-size: 0.75em;
```

View file

@ -0,0 +1,54 @@
<!--{
"title": "query()"
}-->
Copy a value from another rule.
<code>query( *target* [, *property-name* = default] [, *fallback*] )</code>
## Parameters
* *`target`* A rule selector, an abstract rule name or context keyword: `previous`, `next` (also `parent` and `top` within nested structures)
* *`property-name`* The CSS property name to copy, or just `default` to pass over. Defaults to the calling property
* *`fallback`* A CSS value to use if the target property does not exist
## Returns
The referenced property value, or the fallback if it has not been set.
## Examples
```css
.foo {
width: 40em;
height: 100em;
}
.bar {
width: query( .foo ); /* 40em */
margin-top: query( .foo, height ); /* 100em */
margin-bottom: query( .foo, default, 3em ); /* 3em */
}
```
Using context keywords:
```css
.foo {
width: 40em;
.bar {
width: 30em;
.baz: {
width: query( parent ); /* 30em */
.qux {
width: query( top ); /* 40em */
}
}
}
}
```

View file

@ -0,0 +1,25 @@
<!--{
"title": "s-adjust()"
}-->
Adjust the saturation of a color value.
<code>s-adjust( *color*, *offset* )</code>
## Parameters
* *`color`* Any valid CSS color value
* *`offset`* The percentage to offset the color hue (percent mark optional)
## Returns
The modified color value.
## Examples
```css
/* Desaturate */
color: s-adjust( deepskyblue -100 );
```

View file

@ -0,0 +1,39 @@
<!--{
"title": "this()"
}-->
Reference another property value from the same containing block.
Restricted to referencing properties that don't already reference other properties.
<code>this( *property-name*, *fallback* )</code>
## Parameters
* *`property-name`* Property name
* *`fallback`* A CSS value
## Returns
The referenced property value, or the fallback if it has not been set.
## Examples
```css
.foo {
width: this( height );
height: 100em;
}
```
********
```css
/* The following both fail because they create circular references. */
.bar {
height: this( width );
width: this( height );
}
```

View file

@ -0,0 +1,127 @@
<!--{
"title": "Rule inheritance"
}-->
By using the `@extend` directive and passing it a named ruleset or selector from any other rule you can share styles more effectively across a stylesheet.
[Abstract rules](#core--abstract) can be used if you just need to extend a generic set of declarations.
```crush
.negative-text {
overflow: hidden;
text-indent: -9999px;
}
.sidebar-headline {
@extend .negative-text;
background: url( headline.png ) no-repeat;
}
```
```css
.negative-text,
.sidebar-headline {
overflow: hidden;
text-indent: -9999px;
}
.sidebar-headline {
background: url( headline.png ) no-repeat;
}
```
Inheritance is recursive:
```crush
.one { color: pink; }
.two { @extend .one; }
.three { @extend .two; }
.four { @extend .three; }
```
```css
.one, .two, .three, .four { color: pink; }
```
## Referencing by name
If you want to reference a rule without being concerned about later changes to the identifying selector use the `@name` directive:
```crush
.foo123 {
@name foo;
text-decoration: underline;
}
.bar {
@include foo;
}
.baz {
@extend foo;
}
```
## Extending with pseudo classes/elements
`@extend` arguments can adopt pseudo classes/elements by appending an exclamation mark:
```crush
.link-base {
color: #bada55;
text-decoration: underline;
}
.link-base:hover,
.link-base:focus {
text-decoration: none;
}
.link-footer {
@extend .link-base, .link-base:hover!, .link-base:focus!;
color: blue;
}
```
```css
.link-base,
.link-footer {
color: #bada55;
text-decoration: underline;
}
.link-base:hover,
.link-base:focus,
.link-footer:hover,
.link-footer:focus {
text-decoration: none;
}
.link-footer {
color: blue;
}
```
The same outcome can also be achieved with an [Abstract rule](#core--abstract) wrapper to simplify repeated use:
```crush
.link-base {
color: #bada55;
text-decoration: underline;
}
.link-base:hover,
.link-base:focus {
text-decoration: none;
}
@abstract link-base {
@extend .link-base, .link-base:hover!, .link-base:focus!;
}
.link-footer {
@extend link-base;
color: blue;
}
```

View file

@ -0,0 +1,41 @@
<!--{
"title": "Loops"
}-->
For...in loops with lists and generator functions.
```crush
@for fruit in apple, orange, pear {
.#(fruit) {
background-image: url("images/#(fruit).jpg");
}
}
```
```css
.apple { background-image: url(images/apple.jpg); }
.orange { background-image: url(images/orange.jpg); }
.pear { background-image: url(images/pear.jpg); }
```
```crush
@for base in range(2, 24) {
@for i in range(1, #(base)) {
.grid-#(i)-of-#(base) {
width: math(#(i) / #(base) * 100, %);
}
}
}
```
```css
.grid-1-of-2 { width: 50%; }
.grid-2-of-2 { width: 100%; }
/*
Intermediate steps ommited.
*/
.grid-23-of-24 { width: 95.83333%; }
.grid-24-of-24 { width: 100%; }
```

View file

@ -0,0 +1,95 @@
<!--{
"title": "Mixins"
}-->
Mixins make reusing small snippets of CSS much simpler. You define them with the `@mixin` directive.
Positional arguments via the argument function `#()` extend the capability of mixins for repurposing in different contexts.
```crush
@mixin display-font {
font-family: "Arial Black", sans-serif;
font-size: #(0);
letter-spacing: #(1);
}
/* Another mixin with default arguments */
@mixin blue-theme {
color: #(0 navy);
background-image: url("images/#(1 cross-hatch).png");
}
/* Applying the mixins */
.foo {
@include display-font(100%, .1em), blue-theme;
}
```
```css
.foo {
font-family: "Arial Black", sans-serif;
font-size: 100%;
letter-spacing: .1em;
color: navy;
background-image: url("images/cross-hatch.png");
}
```
## Skipping arguments
Mixin arguments can be skipped by using the **default** keyword:
```crush
@mixin display-font {
font-size: #(0 100%);
letter-spacing: #(1);
}
/* Applying the mixin skipping the first argument so the
default value is used instead */
#foo {
@include display-font(default, .3em);
}
```
Sometimes you may need to use the same positional argument more than once. In this case the default value only needs to be specified once:
```crush
@mixin square {
width: #(0 10px);
height: #(0);
}
.foo {
@include square;
}
```
```css
#foo {
width: 10px;
height: 10px;
}
```
## Mixing-in from other sources
Normal rules and [abstract rules](#core--abstract) can also be used as static mixins without arguments:
```crush
@abstract negative-text {
text-indent: -9999px;
overflow: hidden;
}
#main-content .theme-border {
border: 1px solid maroon;
}
.foo {
@include negative-text, #main-content .theme-border;
}
```

View file

@ -0,0 +1,49 @@
<!--{
"title": "Nesting"
}-->
Rules can be nested to avoid repetitive typing when scoping to a common parent selector.
```crush
.homepage {
color: #333;
background: white;
.content {
p {
font-size: 110%;
}
}
}
```
```css
.homepage {
color: #333;
background: white;
}
.homepage .content p {
font-size: 110%;
}
```
## Parent referencing
You can use the parent reference symbol `&` for placing the parent selector explicitly.
```crush
.homepage {
.no-js & {
p {
font-size: 110%;
}
}
}
```
```css
.no-js .homepage p {
font-size: 110%;
}
```

View file

@ -0,0 +1,80 @@
<!--{
"title": "Selector aliases"
}-->
Selector aliases can be useful for grouping together common selector chains for reuse.
They're defined with the `@selector` directive, and can be used anywhere you might use a pseudo class.
```crush
@selector heading :any(h1, h2, h3, h4, h5, h6);
@selector radio input[type="radio"];
@selector hocus :any(:hover, :focus);
/* Selector aliases with arguments */
@selector class-prefix :any([class^="#(0)"], [class*=" #(0)"]);
@selector col :class-prefix(-col);
.sidebar :heading {
color: honeydew;
}
:radio {
margin-right: 4px;
}
:col {
float: left;
}
p a:hocus {
text-decoration: none;
}
```
```css
.sidebar h1, .sidebar h2,
.sidebar h3, .sidebar h4,
.sidebar h5, .sidebar h6 {
color: honeydew;
}
input[type="radio"] {
margin-right: 4px;
}
[class^="col-"],
[class*=" col-"] {
border: 1px solid rgba(0,0,0,.5);
}
p a:hover,
p a:focus {
text-decoration: none;
}
```
## Selector splatting
Selector splats are a special kind of selector alias that expand using passed arguments.
```crush
@selector-splat input input[type="#(text)"];
form :input(time, text, url, email, number) {
border: 1px solid;
}
```
```css
form input[type="time"],
form input[type="text"],
form input[type="url"],
form input[type="email"],
form input[type="number"] {
border: 1px solid;
}
```

View file

@ -0,0 +1,22 @@
<!--{
"title": "Selector grouping"
}-->
Selector grouping with the `:any` pseudo class (modelled after CSS4 :matches) simplifies the creation of complex selector chains.
```crush
:any( .sidebar, .block ) a:any( :hover, :focus ) {
color: lemonchiffon;
}
```
```css
.block a:hover,
.block a:focus,
.sidebar a:hover,
.sidebar a:focus {
color: lemonchiffon;
}
```

View file

@ -0,0 +1,62 @@
<!--{
"title": "Variables"
}-->
Declare variables in your CSS with a `@set` directive and use them with the `$()` function.
Variables can also be injected at runtime with the [vars option](#api--options).
```crush
/* Defining variables */
@set {
dark: #333;
light: #F4F2E2;
smaller-screen: screen and (max-width: 800px);
}
/* Using variables */
@media $(smaller-screen) {
ul, p {
color: $(dark);
/* Using a fallback value with an undefined variable */
background-color: $(accent-color, #ff0);
}
}
```
*******
```css
/* Interpolation */
.username::before {
content: "$(greeting)";
}
```
## Conditionals
Sections of CSS can be included and excluded on the basis of variable existence with the `@ifset` directive:
```crush
@set foo #f00;
@set bar true;
@ifset foo {
p {
color: $(foo);
}
}
p {
font-size: 12px;
@ifset not foo {
line-height: 1.5;
}
@ifset bar(true) {
margin-bottom: 5px;
}
}
```

View file

@ -0,0 +1,26 @@
<!--{
"title": "JavaScript"
}-->
This preprocessor is written in PHP, so as prerequisite you will need to have PHP installed on your system to use the JS api.
```shell
npm install csscrush
```
All methods can take the standard options (camelCase) as the second argument.
```php
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');
```

View file

@ -0,0 +1,17 @@
<!--{
"title": "PHP"
}-->
If you're using [Composer](http://getcomposer.org) you can use Crush in your project with the following line in your terminal:
```shell
composer require css-crush/css-crush
```
If you're not using Composer yet just download the library ([zip](http://github.com/peteboere/css-crush/zipball/master) or [tar](http://github.com/peteboere/css-crush/tarball/master)) into a convenient location and require the bootstrap file:
```php
<?php require_once 'path/to/CssCrush.php'; ?>
```

View file

@ -0,0 +1,21 @@
Pseudo classes for working with ARIA roles, states and properties.
* [ARIA roles spec](http://www.w3.org/TR/wai-aria/roles)
* [ARIA states and properties spec](http://www.w3.org/TR/wai-aria/states_and_properties)
````crush
:role(tablist) {...}
:aria-expanded {...}
:aria-expanded(false) {...}
:aria-label {...}
:aria-label(foobarbaz) {...}
````
````css
[role="tablist"] {...}
[aria-expanded="true"] {...}
[aria-expanded="false"] {...}
[aria-label] {...}
[aria-label="foobarbaz"] {...}
````

View file

@ -0,0 +1,55 @@
Bitmap image generator.
Requires the GD image library bundled with PHP.
```crush
/* Create square semi-opaque png. */
@canvas foo {
width: 50;
height: 50;
fill: rgba(255, 0, 0, .5);
}
body {
background: white canvas(foo);
}
```
*****
```crush
/* White to transparent east facing gradient with 10px
margin and background fill. */
@canvas horz-gradient {
width: #(0);
height: 150;
fill: canvas-linear-gradient(to right, #(1 white), #(2 rgba(255,255,255,0)));
background-fill: powderblue;
margin: 10;
}
/* Rectangle 300x150. */
body {
background: canvas(horz-gradient, 300);
}
/* Flipped gradient, using canvas-data() to generate a data URI. */
.bar {
background: canvas-data(horz-gradient, 100, rgba(255,255,255,0), white);
}
```
*****
```crush
/* Google logo resized to 400px width and given a sepia effect. */
@canvas sepia {
src: url(http://www.google.com/images/logo.png);
width: 400;
canvas-filter: greyscale() colorize(45, 45, 0);
}
.bar {
background: canvas(sepia);
}
```

View file

@ -0,0 +1,37 @@
Expanded easing keywords for transitions.
* ease-in-out-back
* ease-in-out-circ
* ease-in-out-expo
* ease-in-out-sine
* ease-in-out-quint
* ease-in-out-quart
* ease-in-out-cubic
* ease-in-out-quad
* ease-out-back
* ease-out-circ
* ease-out-expo
* ease-out-sine
* ease-out-quint
* ease-out-quart
* ease-out-cubic
* ease-out-quad
* ease-in-back
* ease-in-circ
* ease-in-expo
* ease-in-sine
* ease-in-quint
* ease-in-quart
* ease-in-cubic
* ease-in-quad
See [easing demos](http://easings.net) for live examples.
```crush
transition: .2s ease-in-quad;
```
```css
transition: .2s cubic-bezier(.550,.085,.680,.530);
```

View file

@ -0,0 +1,16 @@
Pseudo classes for working with forms.
```crush
:input(date, search, email) {...}
:checkbox {...}
:radio {...}
:text {...}
```
```css
input[type="date"], input[type="search"], input[type="email"] {...}
input[type="checkbox"] {...}
input[type="radio"] {...}
input[type="text"] {...}
```

View file

@ -0,0 +1,12 @@
Composite :hover/:focus/:active pseudo classes.
```crush
a:hocus { color: red; }
a:pocus { color: red; }
```
```css
a:hover, a:focus { color: red; }
a:hover, a:focus, a:active { color: red; }
```

View file

@ -0,0 +1,21 @@
Property sorting.
Examples use the predefined property sorting table. To define a custom sorting order pass an array to `csscrush_set_property_sort_order()`
```crush
color: red;
background: #000;
opacity: .5;
display: block;
position: absolute;
```
```css
position: absolute;
display: block;
opacity: .5;
color: red;
background: #000;
```

View file

@ -0,0 +1,48 @@
Functions for creating SVG gradients with a CSS gradient like syntax.
Primarily useful for supporting Internet Explorer 9.
## svg-linear-gradent()
Syntax is the same as [linear-gradient()](http://dev.w3.org/csswg/css3-images/#linear-gradient)
```syntax
svg-linear-gradent( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
```
### Returns
A base64 encoded svg data-uri.
### Known issues
Color stops can only take percentage value offsets.
```css
background-image: svg-linear-gradient( to top left, #fff, rgba(255,255,255,0) 80% );
background-image: svg-linear-gradient( 35deg, red, gold 20%, powderblue );
```
## svg-radial-gradent()
Syntax is similar to but more limited than [radial-gradient()](http://dev.w3.org/csswg/css3-images/#radial-gradient)
```syntax
svg-radial-gradent( [ <origin> | at <position> ,]? <color-stop> [, <color-stop>]+ )
```
### Returns
A base64 encoded svg data-uri.
### Known issues
Color stops can only take percentage value offsets.
No control over shape - only circular gradients - however, the generated image can be stretched with background-size.
```css
background-image: svg-radial-gradient( at center, red, blue 50%, yellow );
background-image: svg-radial-gradient( 100% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) );
```

View file

@ -0,0 +1,74 @@
Define and embed simple SVG elements, paths and effects inside CSS
```crush
@svg foo {
type: star;
star-points: #(0 5);
radius: 100 50;
margin: 20;
stroke: black;
fill: red;
fill-opacity: .5;
}
/* Embed SVG with svg() function (generates an svg file). */
body {
background: svg(foo);
}
/* As above but a 3 point star creating a data URI instead of a file. */
body {
background: svg-data(foo, 3);
}
```
*******
```crush
/* Using path data and stroke styles to create a plus sign. */
@svg plus {
d: "M0,5 h10 M5,0 v10";
width: 10;
height: 10;
stroke: white;
stroke-linecap: round;
stroke-width: 2;
}
```
*******
```crush
/* Skewed circle with radial gradient fill and drop shadow. */
@svg circle {
type: circle;
transform: skewX(30);
diameter: 60;
margin: 20;
fill: svg-radial-gradient(at top right, gold 50%, red);
drop-shadow: 2 2 0 rgba(0,0,0,1);
}
```
*******
```crush
/* 8-sided polygon with an image fill.
Note: images usually have to be converted to data URIs, see known issues below. */
@svg pattern {
type: polygon;
sides: 8;
diameter: 180;
margin: 20;
fill: pattern(data-uri(kitten.jpg), scale(1) translate(-100 0));
fill-opacity: .8;
}
```
### Known issues
Firefox [does not allow linked images](https://bugzilla.mozilla.org/show_bug.cgi?id=628747#c0) (or other svg) when svg is in "svg as image" mode.

View file

@ -160,7 +160,7 @@ export default {
};
export function watch(file, options={}) {
({file: options.input, context: options.context} = resolveFile(file));
({file: options.input, context: options.context} = resolveFile(file, {watch: true}));
return (new Process()).watch(options);
}
@ -174,7 +174,7 @@ export function string(string, options={}) {
return (new Process()).exec(options);
}
const resolveFile = input => {
const resolveFile = (input, {watch}={}) => {
if (Array.isArray(input)) {
@ -197,7 +197,9 @@ const resolveFile = input => {
initial ||= result;
previous = result;
setTimeout(poller, 2000);
if (watch) {
setTimeout(poller, 2000);
}
return result;
};

View file

@ -5,7 +5,7 @@
*
*/
namespace CssCrush;
#[\AllowDynamicProperties]
class Process
{
use EventEmitter;
@ -630,8 +630,8 @@ class Process
preg_match($rulePatt, $this->string->raw, $ruleMatch, PREG_UNMATCHED_AS_NULL, $traceOffset);
$selector = trim($ruleMatch['selector']);
$block = trim($ruleMatch['block_content']);
$selector = trim($ruleMatch['selector'] ?? null);
$block = trim($ruleMatch['block_content'] ?? null);
$replace = '';
// If rules are nested inside we set their parent property.
@ -651,12 +651,12 @@ class Process
}
}
else {
$rule = new Rule($selector, $block, $ruleMatch['trace_token']);
$rule = new Rule($selector, $block, $ruleMatch['trace_token'] ?? null);
}
$replace = $tokens->add($rule, 'r', $rule->label) . $replace;
$this->string->splice($replace, $traceOffset, strlen($ruleMatch[0]));
$this->string->splice($replace, $traceOffset, strlen($ruleMatch[0]) ?? null);
}
// Flip, since we just captured rules in reverse order.

1664
include/thirdparty/css-crush/package-lock.json generated vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,32 @@
{
"name": "csscrush",
"version": "4.1.3",
"description": "CSS-Crush, CSS preprocessor",
"main": "./index.js",
"repository": {
"type": "git",
"url": "https://github.com/peteboere/css-crush.git"
},
"bugs": {
"url": "https://github.com/peteboere/css-crush/issues"
},
"bin": {
"csscrush": "./bin/csscrush"
},
"scripts": {
"lint": "eslint --fix index.js"
},
"homepage": "http://the-echoplex.net/csscrush",
"license": "MIT",
"devDependencies": {
"eslint": "~8.16.0",
"normalize.css": "7.0.0"
},
"dependencies": {
"glob": "~8.0.3"
},
"type": "module",
"engines": {
"node": ">=16"
}
}