README

简介

欢迎来到CSS生成器！这个库可以帮助您根据断点生成CSS字符串。

安装

使用Composer安装CSS生成器

composer require ucraft-com/css-generator

StyleCollector

StyleCollector用于收集生成CSS所需的所有数据。

使用示例

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...']

调用generate()方法后，它将返回数组数据结构，键将是之前提供的$breakpointId。

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

如果您有需要使用断点生成的样式，我们必须分配->assignBreakpoints($breakpoints)，其中$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

变体样式数据示例如下

$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() - 将用于生成背景和解析器，用于解析媒体路径。
assignBreakpoints() - 所有断点作为数组。
assignVariantsStyles() - 所有样式数据，按选择器分组。
assignColorMediaQuery - 为深色或浅色模式生成样式。
build() - 将数据转换为对应的数据结构。
buildWithoutBreakpoint() - 内部方法，将数据转换为对应的数据结构，不使用任何断点。
buildWithBreakpointId() - 样式将在该断点上生成。

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...', 
    ...
]

许可证

CSS生成器是开源软件，使用MIT许可证许可。