A package to easily minify styles and make use of sass, less, etc in your blade components.
<button class="btn">{{ $slot }}</button>
<x-style lang="css">
.btn{
height: 2rem;
line-height: 2rem;
border-radius:3px;
}
</x-style>Already some javascript frameworks (e.g. Vue) brought an architecture where styles and html markup could be written in the same file. This design pattern is a considerable simplification of the workflow in frontend development.
With blade styles there is no need to run a compiler when working on your styles. Also, only the styles of required blade components are included. This saves you from loading large css files and the size can be reduced to a minimum.
Currently there is a Sass compiler for blade styles. If you want to build a
compiler for Less or Stylus, you can do so using the Sass package as an
example.
The package can be easily installed via composer.
composer require cbl/blade-stylenow the necessary assets must be published. This includes the style.php config and the storage folder where the compiled styles are stored.
php artisan vendor:publish --provider="BladeStyle\ServiceProvider"The blade component x-styles includes all required styles, so it may be placed
in the head.
<head>
...
<x-styles />
</head>Each blade view can contain exactly one x-style component. Your styles can
then be written inside the wrapper like so.
<img src="http://lorempixel.com/400/200/" class="my-image"/>
<x-style lang="css">
.my-image{
border: 1px solid #ccc;
border-radius: 3px;
}
</x-style>You can build reusable blade components:
<button class="btn">{{ $slot }}</button>
<x-style lang="css">
.btn{
height: 2rem;
line-height: 2rem;
border-radius:3px;
}
</x-style>You may set a CSS extension langauge in the lang attribute, like so:
<button class="btn">My Button</button>
<x-style lang="scss">
$color: purple;
.btn{
background: $color;
}
</x-style>Blade styles share the same behavior as Views. As suggested in the
View documentation, the
style:cache command can be added to your deployment workflow to ensure that
all styles are compiled and thus improve performance.
php artisan style:cacheYou may use the style:clear command to clear the style cache:
php artisan style:clear