felixdorn/klass

在您的 Blade 组件中提取动态类

dev-master 2021-05-23 21:00 UTC

This package is auto-updated.

Last update: 2024-08-24 03:47:22 UTC


README

Klass 将您的 Blade 组件中的动态类提取到一个文件中,以便 PurgeCSS 处理。

Tests Formats Version Total Downloads License

安装

需要 PHP 8.0.0+

您可以通过 composer 安装此包

composer require felixdorn/klass

使用方法

// app/View/Components/Button.php
class Button extends Component {
    public string $color;
    
    public function __construct(string $color = 'blue') {
        $this->color = $color;
    }
    
    public function render() {
        return view('components.button');
    } 
}
<!-- resources/views/components/button.blade.php -->
<button class="bg-{{ $color }}-500" {{ $attributes }}>
    {{ $slot }}
</button>
<!-- resources/views/welcome.blade.php -->
<x-button color="red"/>
<x-button/>
php artisan klass:extract
// storage/framework/extracted-classes.txt
bg-red-500 bg-blue-500

现在您可以将其文件添加到 PurgeCSS 或类似工具中,以将这些类包含在最终的 CSS 构建。

配置

您可以使用以下命令发布配置文件

php artisan vendor:publish --provider="Felix\\Klass\\KlassServiceProvider" --tag="klass-config"

这是已发布配置文件的内容

return [
    'components_paths' => [
        resource_path('views/components'),
        base_path('vendor'),
    ],

    'views_paths' => [
        resource_path('views'),
    ],

    'output' => base_path('storage/framework/extracted-classes.txt'),
];

Tailwind & JIT 编译

Klass 与旧的 Tailwind 工作流程配合良好,即在使用大量类进行开发后,然后在生产中删除所有未使用的类。然而,最近 Tailwind 获得了一个 JIT 编译器,以便在开发中拥有类似生产的 CSS。

Klass 可以很容易地与 JIT 编译器一起工作。在编译时,应调用 php artisan klass:extract,但我还没有想出如何以智能的方式做到这一点。

Livewire

在 Livewire 组件中使用的 Blade 组件会被分析。但我们不支持 Livewire 组件本身。我没有任何计划在传统的 Blade 组件边缘情况得到解决之前支持它。如果你愿意贡献,我会合并一个添加其支持的 PR。

测试

composer test

KlassFélix Dorn,16 岁的制造商 根据 MIT 许可证 创建。