ucraft-com / css-generator
Converts Ucraft variantsStyles into css.
Installs: 3 616
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 4
Forks: 0
Open Issues: 0
Requires
- php: >=8.0
Requires (Dev)
- phpunit/phpunit: ^9.5.10
- dev-master
- v1.4.7
- v1.4.6
- v1.4.5
- v1.4.4
- v1.4.3
- v1.4.2
- v1.4.1
- v1.4.0
- v1.3.6
- v1.3.4
- v1.3.3
- v1.3.2
- v1.3.1
- v1.3.0
- v1.2.8
- v1.2.7
- v1.2.6
- v1.2.5
- v1.2.4
- v1.2.3
- v1.2.2
- v1.2.1
- v1.2.0
- v1.1.8
- v1.1.7
- v1.1.6
- v1.1.5
- v1.1.4
- v1.1.3
- v1.1.2
- v1.1.1
- v1.1.0
- v1.0.16
- v1.0.15
- v1.0.14
- v1.0.13
- v1.0.12
- v1.0.11
- v1.0.10
- v1.0.9
- v1.0.8
- v1.0.7
- v1.0.6
- v1.0.5
- v1.0.4
- v1.0.3
- v1.0.2
- v1.0.1
- v1.0.0
- dev-added-breakpoint-media-query
- dev-css-logs
This package is auto-updated.
Last update: 2024-11-26 07:51:19 UTC
README
Introduction
Welcome to the Css Generator! This library helps to generate css string from variants styles based on breakpoints.
Installation
Install the Css Generator using Composer:
composer require ucraft-com/css-generator
StyleCollector
The StyleCollector
is used for collecting all the data that is needed for generating css.
Usage Example
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...']
After calling generate()
method, it will return array data structure, which key will be $breakpointId
that we provided earlier.
$cssGenerator = new CssGenerator($styleCollector); // previously described style collector $cssGenerator->generate(); // will return [$breakpointId => 'all generated styles are here...']
If you have styles that are generating with breakpoints we must assign ->assignBreakpoints($breakpoints)
,
$breakpoints
is array list of breakpoints
Example breakpoints:
$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
Variants styles data example is like this:
$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 ] ] ];
assignMedia()
- the media that will be used for generating background, and resolver, for resolving media path.
assignBreakpoints()
- all breakpoints as array.
assignVariantsStyles()
- all style data, grouped by selector.
assignColorMediaQuery
- generate styles for dark or light mode.
build()
- convert data to corresponding data structures.
buildWithoutBreakpoint()
- Internal method, convert data to corresponding data structures without any breakpoints.
buildWithBreakpointId()
- Style will be generated on this breakpoint.
CssGenerator
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...', ... ]
License
The Css Generator is open-source software licensed under the MIT License.