cbl / blade-style
Installs: 17 802
Dependents: 3
Suggesters: 0
Security: 0
Stars: 18
Watchers: 1
Forks: 3
Open Issues: 0
Requires
- matthiasmullie/minify: ^1.3
- scssphp/scssphp: ^1.1
Requires (Dev)
- orchestra/testbench: ^5.0|^7.0|^8.0|^9.0
- phpunit/phpunit: ^9.3
README
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>
Introduction
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.
Compiler
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.
Installation
The package can be easily installed via composer.
composer require cbl/blade-style
now 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"
Include Styles
The blade component x-styles
includes all required styles, so it may be placed
in the head.
<head> ... <x-styles /> </head>
Usage
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>
Sass
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>
Optimizing Styles
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:cache
You may use the style:clear
command to clear the style cache:
php artisan style:clear