{"id":13805130,"url":"https://github.com/cbl/blade-style","last_synced_at":"2025-06-12T07:36:18.596Z","repository":{"id":56448683,"uuid":"272088067","full_name":"cbl/blade-style","owner":"cbl","description":"A package to easily minify styles and make use of sass, less, etc. in your Blade components.","archived":false,"fork":false,"pushed_at":"2024-05-13T09:18:56.000Z","size":93,"stargazers_count":19,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-04T05:35:04.739Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cbl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-13T21:24:43.000Z","updated_at":"2024-11-16T23:05:35.000Z","dependencies_parsed_at":"2024-06-20T11:19:32.823Z","dependency_job_id":null,"html_url":"https://github.com/cbl/blade-style","commit_stats":{"total_commits":47,"total_committers":3,"mean_commits":"15.666666666666666","dds":0.06382978723404253,"last_synced_commit":"73c8bccddbc8cba39807b2e910665cd5c0d2bbc6"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/cbl/blade-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbl%2Fblade-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbl%2Fblade-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbl%2Fblade-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbl%2Fblade-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cbl","download_url":"https://codeload.github.com/cbl/blade-style/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbl%2Fblade-style/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259421100,"owners_count":22854737,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:00:57.782Z","updated_at":"2025-06-12T07:36:18.570Z","avatar_url":"https://github.com/cbl.png","language":"PHP","funding_links":[],"categories":["Libraries"],"sub_categories":[],"readme":"# Blade Style\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/cbl/blade-style/actions\"\u003e\u003cimg src=\"https://github.com/cbl/blade-style/workflows/tests/badge.svg\" alt=\"Build Status\"\u003e\u003c/a\u003e\n\t\u003ca href=\"https://packagist.org/packages/cbl/blade-style\"\u003e\u003cimg src=\"https://img.shields.io/github/license/cbl/blade-style?color=%2331c653\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA package to easily minify styles and make use of sass, less, etc in your blade\ncomponents.\n\n```php\n\u003cbutton class=\"btn\"\u003e{{ $slot }}\u003c/button\u003e\n\n\u003cx-style lang=\"css\"\u003e\n.btn{\n    height: 2rem;\n    line-height: 2rem;\n    border-radius:3px;\n}\n\u003c/x-style\u003e\n```\n\n## Introduction\n\nAlready some javascript frameworks (e.g. [Vue](https://vuejs.org/)) brought an\narchitecture where styles and html markup could be written in the same file.\nThis design pattern is a considerable simplification of the workflow in frontend\ndevelopment.\n\nWith blade styles there is no need to run a compiler when working on your\nstyles. Also, only the styles of required blade components are included. This\nsaves you from loading large css files and the size can be reduced to a minimum.\n\n## Compiler\n\nCurrently there is a `Sass` compiler for blade styles. If you want to build a\ncompiler for `Less` or `Stylus`, you can do so using the `Sass` package as an\nexample.\n\n-   [Blade Style Sass](https://github.com/cbl/blade-style-sass)\n\n## Installation\n\nThe package can be easily installed via composer.\n\n```shell\ncomposer require cbl/blade-style\n```\n\nnow the necessary assets must be published. This includes the style.php config\nand the storage folder where the compiled styles are stored.\n\n```shell\nphp artisan vendor:publish --provider=\"BladeStyle\\ServiceProvider\"\n```\n\n## Include Styles\n\nThe blade component `x-styles` includes all required styles, so it may be placed\nin the head.\n\n```php\n\u003chead\u003e\n    ...\n\n    \u003cx-styles /\u003e\n\u003c/head\u003e\n```\n\n## Usage\n\nEach blade view can contain exactly one `x-style` component. Your styles can\nthen be written inside the wrapper like so.\n\n```php\n\u003cimg src=\"http://lorempixel.com/400/200/\" class=\"my-image\"/\u003e\n\n\u003cx-style lang=\"css\"\u003e\n.my-image{\n    border: 1px solid #ccc;\n    border-radius: 3px;\n}\n\u003c/x-style\u003e\n```\n\nYou can build reusable blade components:\n\n```php\n\u003cbutton class=\"btn\"\u003e{{ $slot }}\u003c/button\u003e\n\n\u003cx-style lang=\"css\"\u003e\n.btn{\n    height: 2rem;\n    line-height: 2rem;\n    border-radius:3px;\n}\n\u003c/x-style\u003e\n```\n\n### Sass\n\nYou may set a CSS extension langauge in the `lang` attribute, like so:\n\n```php\n\u003cbutton class=\"btn\"\u003eMy Button\u003c/button\u003e\n\n\u003cx-style lang=\"scss\"\u003e\n    $color: purple;\n\n    .btn{\n        background: $color;\n    }\n\u003c/x-style\u003e\n```\n\n## Optimizing Styles\n\nBlade styles share the same behavior as Views. As suggested in the\n[View documentation](https://laravel.com/docs/7.x/views#optimizing-views), the\n`style:cache` command can be added to your deployment workflow to ensure that\nall styles are compiled and thus improve performance.\n\n```shell\nphp artisan style:cache\n```\n\nYou may use the `style:clear` command to clear the style cache:\n\n```shell\nphp artisan style:clear\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbl%2Fblade-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcbl%2Fblade-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbl%2Fblade-style/lists"}