PHPackages                             wonderboymusic/mustache-css-modules - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. wonderboymusic/mustache-css-modules

ActiveLibrary[Templating & Views](/categories/templating)

wonderboymusic/mustache-css-modules
===================================

Use CSS Modules in Mustache templates.

0.2(6y ago)65[10 PRs](https://github.com/staylor/mustache-css-modules/pulls)MITJavaScript

Since Nov 14Pushed 3y ago1 watchersCompare

[ Source](https://github.com/staylor/mustache-css-modules)[ Packagist](https://packagist.org/packages/wonderboymusic/mustache-css-modules)[ Docs](https://github.com/staylor/mustache-css-modules)[ RSS](/packages/wonderboymusic-mustache-css-modules/feed)WikiDiscussions master Synced today

READMEChangelog (2)Dependencies (1)Versions (13)Used By (0)

mustache-css-modules
====================

[](#mustache-css-modules)

Use CSS Modules in mustache templates

The `example` folder contains an example implementation.

Install
-------

[](#install)

```
$ composer require wonderboymusic/mustache-css-modules
```

Move the contents of the `js/` folder in this repository to the root of your project, then:

```
$ npm i
```

Environment
-----------

[](#environment)

You 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.

JavaScript files check for this directory relative to project root:

```
const cssDir = path.join(__dirname, process.env.MUSTACHE_CSS_DIR);
```

PHP files look for the absolute path the folder containing your Mustache templates:

```
$cssDir = getenv('MUSTACHE_CSS_DIR');
```

Before autoloading, you can set this value directly in your bootstrap file:

```
putenv('MUSTACHE_CSS_DIR=' . __DIR__ . '/src/templates');

require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/src/app.php';
```

Usage
-----

[](#usage)

Let'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.

```
src/templates/footer.mustache
src/templates/footer.scss

```

Styles 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.

First, declare your styles:

```
/* footer.scss */

.wrap {
  display: block;
  margin: 0 auto;
  width: 780px;
}
```

Use the value of `.wrap` inside of your Mustache template:

```
Copyright © 2019
```

Use `footer` as a template in a Mustache file (e.g. `home.mustache`):

```

  Mustache + CSS Modules = 🤯

  Some body content on a page that has a footer.

  {{> footer }}

```

Before all of this will actually work, your PHP view logic needs to expose `css` to the template:

```
use Wonderboy\Mustache\ModulesLoader;
use Wonderboy\Mustache\Template\Utils;

class App {
  use ModulesLoader;

  public function run() {
    $css = Utils::getCSSMap();
    $html = $this->render('main', [ 'css' => $css ]);
    // call after rendering to get collected styles
    // only partials that are part of the render have their styles collected
    $styles = $this->getCssModules();
    // at this point, you can do whatever you want with the output and with the styles
    // I prefer to insert them directly into the , at the end
    $output = str_replace( '', $styles . PHP_EOL . '', $html );

    // probably unnecessary, but you can reset the CSS Modules
    // $this->resetCssModules();

    // more logic?
    echo $output;
  }
}

$app = new App();
$app->run();
```

Development
-----------

[](#development)

Run Gulp to automatically generate the build artifacts that make this all work:

```
$ npm run dev

```

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity9

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

2368d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d030a8052af765bccedb1601d849a0fb1d30732429707c89a81fab4db419c4ee?d=identicon)[wonderboymusic](/maintainers/wonderboymusic)

---

Top Contributors

[![staylor](https://avatars.githubusercontent.com/u/52932?v=4)](https://github.com/staylor "staylor (8 commits)")

---

Tags

csstemplatingmustache

### Embed Badge

![Health badge](/badges/wonderboymusic-mustache-css-modules/health.svg)

```
[![Health](https://phpackages.com/badges/wonderboymusic-mustache-css-modules/health.svg)](https://phpackages.com/packages/wonderboymusic-mustache-css-modules)
```

###  Alternatives

[mustache/mustache

A Mustache implementation in PHP.

3.3k44.6M291](/packages/mustache-mustache)[salesforce/handlebars-php

Handlebars processor for php

80713.2k11](/packages/salesforce-handlebars-php)[zombor/kostache

Logic-less View/Mustache Module for the Kohana Framework

1382.1k2](/packages/zombor-kostache)[bobthecow/mustache-bundle

Symfony Mustache.php Bundle

1886.1k](/packages/bobthecow-mustache-bundle)[voodoophp/handlebars

Handlebars processor for php

34158.9k2](/packages/voodoophp-handlebars)[mustache/silex-provider

A Mustache service provider for Silex.

1462.4k1](/packages/mustache-silex-provider)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)