PHPackages                             ucraft-com/css-generator - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ucraft-com/css-generator

ActiveLibrary[Utility & Helpers](/categories/utility)

ucraft-com/css-generator
========================

Converts Ucraft variantsStyles into css.

v1.4.7(1y ago)04.1k1PHPPHP >=8.0

Since Jul 26Pushed 1y ago5 watchersCompare

[ Source](https://github.com/ucraft-com/css-generator)[ Packagist](https://packagist.org/packages/ucraft-com/css-generator)[ RSS](/packages/ucraft-com-css-generator/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (52)Used By (0)

Css Generator
=============

[](#css-generator)

Introduction
------------

[](#introduction)

Welcome to the Css Generator! This library helps to generate css string from variants styles based on breakpoints.

Installation
------------

[](#installation)

Install the Css Generator using [Composer](https://getcomposer.org/):

```
composer require ucraft-com/css-generator
```

StyleCollector
--------------

[](#stylecollector)

The `StyleCollector` is used for collecting all the data that is needed for generating css.

### Usage Example

[](#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
------------

[](#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
-------

[](#license)

The Css Generator is open-source software licensed under the [MIT License](LICENSE.md).

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance38

Infrequent updates — may be unmaintained

Popularity18

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 85.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~10 days

Recently: every ~36 days

Total

49

Last Release

539d ago

PHP version history (2 changes)v1.0.0PHP ^8.0

v1.0.1PHP >=8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/f27fc61586c657de576cc2eb314e50979fdae18730accb87589b5d4f41a674a7?d=identicon)[ucraft](/maintainers/ucraft)

---

Top Contributors

[![miqayelsrapionyan](https://avatars.githubusercontent.com/u/66951632?v=4)](https://github.com/miqayelsrapionyan "miqayelsrapionyan (6 commits)")[![ptuchik](https://avatars.githubusercontent.com/u/4479697?v=4)](https://github.com/ptuchik "ptuchik (1 commits)")

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/ucraft-com-css-generator/health.svg)

```
[![Health](https://phpackages.com/badges/ucraft-com-css-generator/health.svg)](https://phpackages.com/packages/ucraft-com-css-generator)
```

###  Alternatives

[thujohn/rss

RSS builder for Laravel 4

72130.0k3](/packages/thujohn-rss)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)