PHP code example of ucraft-com / css-generator

1. Go to this page and download the library: Download ucraft-com/css-generator library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

ucraft-com / css-generator example snippets


use CssGenerator\StyleCollector\StyleCollector;

/*
 If you have static/global styles (that does not have breakpoints), style collector must be used like this

data example of static/global styles:
$staticGlobalStyles = [
    [
        'selector' => 'html',
        'styles'   => [
            'height' => 'auto',
        ],
    ],
]
 */
 $styleCollector = new StyleCollector();
 $styleCollector
    ->assignMedia($media, fn (string $filename = null) => storage_url(media_image_path($filename)))
    ->assignVariantsStyles($staticGlobalStyles)
    //->assignColorMediaQuery('@media (prefers-color-scheme: dark) {')
    ->buildWithBreakpointId($breakpointId); // $breakpointId is the value of concrete breakpoint, that style must be generated in, (usually default breakpoint)
// If you call here ->build(), it will return result like this [0 => 'all generated styles are here...']


$cssGenerator = new CssGenerator($styleCollector); // previously described style collector
$cssGenerator->generate(); // will return [$breakpointId => 'all generated styles are here...']


$breakpoint = [
    [
        'id'      => 1,
        'width'   => 1280,
        'default' => true
    ]
]
$styleCollector = new StyleCollector();
$styleCollector
    ->assignMedia($media, fn (string $filename = null) => storage_url(media_image_path($filename)))
    ->assignBreakpoints($breakpoints)
    ->assignVariantsStyles($styleData)
    //->assignColorMediaQuery('@media (prefers-color-scheme: dark) {')
    ->build(); // or ->buildWithoutBreakpoint(); which is internal will be called automatically when assignBreakpoints($breakpoints) is not called


$variantsStyles = [
    '[data-widget-hash="random-hash"]' => [
        [
            'styles'       => [
                [
                    "type"  => "font-family",
                    "value" => "Helvetica"
                ]
            ],
            'cssState'     => 'normal',
            'breakpointId' => 3
        ],
        [
            'styles'       => [
                [
                    "type"  => "color",
                    "value" => "rgb(0, 0, 0)"
                ]
            ],
            'cssState'     => 'hover',
            'breakpointId' => 1
        ]
    ]
];


use CssGenerator\CssGenerator;

$cssGenerator = new CssGenerator($styleCollector); // previously described style collector
$cssGenerator->generate(); // generates all css gouped by breakpoint ids like this: 
[
    1 => 'styles for 1 breakpoint id...', 
    2 => 'styles for 2 breakpoint id...', 
    ...
]