{"id":17087845,"url":"https://github.com/staylor/mustache-css-modules","last_synced_at":"2026-03-07T04:31:15.690Z","repository":{"id":36118165,"uuid":"221603961","full_name":"staylor/mustache-css-modules","owner":"staylor","description":"Use CSS Modules in mustache templates","archived":false,"fork":false,"pushed_at":"2023-01-05T00:50:48.000Z","size":779,"stargazers_count":6,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-20T18:43:34.722Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/staylor.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}},"created_at":"2019-11-14T03:30:44.000Z","updated_at":"2020-11-16T01:17:34.000Z","dependencies_parsed_at":"2023-01-17T00:00:46.938Z","dependency_job_id":null,"html_url":"https://github.com/staylor/mustache-css-modules","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/staylor/mustache-css-modules","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staylor%2Fmustache-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staylor%2Fmustache-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staylor%2Fmustache-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staylor%2Fmustache-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/staylor","download_url":"https://codeload.github.com/staylor/mustache-css-modules/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staylor%2Fmustache-css-modules/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30207999,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T03:24:23.086Z","status":"ssl_error","status_checked_at":"2026-03-07T03:23:11.444Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-10-14T13:35:07.339Z","updated_at":"2026-03-07T04:31:15.653Z","avatar_url":"https://github.com/staylor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mustache-css-modules\n\nUse CSS Modules in mustache templates\n\nThe `example` folder contains an example implementation.\n\n## Install\n\n```sh\n$ composer require wonderboymusic/mustache-css-modules\n```\n\nMove the contents of the `js/` folder in this repository to the root of your project, then:\n\n```js\n$ npm i\n```\n\n## Environment\n\nYou must set `MUSTACHE_CSS_DIR` in your application's environment. The value will be used to look for Mustache templates and the SCSS files that reside next to them.\n\nJavaScript files check for this directory relative to project root:\n\n```js\nconst cssDir = path.join(__dirname, process.env.MUSTACHE_CSS_DIR);\n```\n\nPHP files look for the absolute path the folder containing your Mustache templates:\n\n```php\n$cssDir = getenv('MUSTACHE_CSS_DIR');\n```\n\nBefore autoloading, you can set this value directly in your bootstrap file:\n\n```php\nputenv('MUSTACHE_CSS_DIR=' . __DIR__ . '/src/templates');\n\nrequire_once __DIR__ . '/vendor/autoload.php';\nrequire_once __DIR__ . '/src/app.php';\n```\n\n## Usage\n\nLet's say you have a bunch of Mustache templates in a folder named `src/templates`. If you have a `footer.mustache` file, add a `footer.scss` file in the same folder.\n\n```\nsrc/templates/footer.mustache\nsrc/templates/footer.scss\n```\n\nStyles declared in `footer.scss` will be scoped to `footer.mustache`, so you don't need to worry about global name collision. All of the class names you declare can be available to your view logic, and will be unique, so you also don't need to worry about the CSS cascade or nesting selectors.\n\nFirst, declare your styles:\n\n```css\n/* footer.scss */\n\n.wrap {\n  display: block;\n  margin: 0 auto;\n  width: 780px;\n}\n```\n\nUse the value of `.wrap` inside of your Mustache template:\n\n```html\n\u003cfooter class=\"{{ css.footer.wrap }}\"\u003eCopyright \u0026copy; 2019\u003c/footer\u003e\n```\n\nUse `footer` as a template in a Mustache file (e.g. `home.mustache`):\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMustache + CSS Modules = 🤯\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cmain class=\"{{ css.main.wrapper }}\"\u003e\n  Some body content on a page that has a footer.\n  \u003c/main\u003e\n  {{\u003e footer }}\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nBefore all of this will actually work, your PHP view logic needs to expose `css` to the template:\n\n```php\nuse Wonderboy\\Mustache\\ModulesLoader;\nuse Wonderboy\\Mustache\\Template\\Utils;\n\nclass App {\n  use ModulesLoader;\n\n  public function run() {\n    $css = Utils::getCSSMap();\n    $html = $this-\u003erender('main', [ 'css' =\u003e $css ]);\n    // call after rendering to get collected styles\n    // only partials that are part of the render have their styles collected\n    $styles = $this-\u003egetCssModules();\n    // at this point, you can do whatever you want with the output and with the styles\n    // I prefer to insert them directly into the \u003chead\u003e, at the end\n    $output = str_replace( '\u003c/head\u003e', $styles . PHP_EOL . '\u003c/head\u003e', $html );\n\n    // probably unnecessary, but you can reset the CSS Modules\n    // $this-\u003eresetCssModules();\n\n    // more logic?\n    echo $output;\n  }\n}\n\n$app = new App();\n$app-\u003erun();\n```\n\n## Development\n\nRun Gulp to automatically generate the build artifacts that make this all work:\n\n```\n$ npm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaylor%2Fmustache-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstaylor%2Fmustache-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaylor%2Fmustache-css-modules/lists"}