# posthtml-css-modules

**Repository Path**: mirrors_posthtml/posthtml-css-modules

## Basic Information

- **Project Name**: posthtml-css-modules
- **Description**: Use CSS modules in HTML
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-25
- **Last Updated**: 2025-10-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# posthtml-css-modules
[![npm version](https://badge.fury.io/js/posthtml-css-modules.svg)](http://badge.fury.io/js/posthtml-css-modules)
[![Build Status](https://travis-ci.org/posthtml/posthtml-css-modules.svg?branch=master)](https://travis-ci.org/posthtml/posthtml-css-modules)

[PostHTML](https://github.com/posthtml/posthtml) plugin that inlines [CSS modules](https://github.com/css-modules/css-modules) in HTML.


## Usage
I suggest using [postcss-modules](https://github.com/outpunk/postcss-modules) to generate CSS modules.
Check [the PostHTML documentation](https://github.com/posthtml/posthtml#usage) for integration examples with grunt, gulp, and other build systems.

If you're more into webpack then you don't need all these modules at all.
With `css`, `style`, and `html` loaders you can achieve the same result:
[css-modules-webpack-example](https://github.com/maltsev/css-modules-webpack-example)

### Global file
Let's say we have `cssClasses.json` with all CSS modules inside:
```json
{
  "title": "_title_116zl_1 _heading_9dkf",
  "profile": {
    "user": "_profile_user_f93j"
  }
}
```

Now we can inline these CSS modules in our HTML:
```js
var posthtml = require('posthtml');

posthtml([require('posthtml-css-modules')('./cssClasses.json')])
    .process(
        '<h1 css-module="title">My profile</h1>' +
        // You can also use nested modules
        '<div css-module="profile.user">John</div>'
    )
    .then(function (result) {
        console.log(result.html);
    });

// <h1 class="_title_116zl_1 _heading_9dkf">My profile</h1>
// <div class="_profile_user_f93j">John</div>
```

### Directory with several files
CSS modules could be also separated into several files.
For example, `profile.js` and `article.js` inside directory `cssModules/`:
```js
// profile.js
module.exports = {
  user: '_profile_user_f93j'
}
```

```js
// article.js
module.exports = {
  title: '_article__tile _heading'
}
```
You can use both JS and JSON for a declaration, as long as the file could be required via `require()`.

```js
var posthtml = require('posthtml');

posthtml([require('posthtml-css-modules')('./cssModules/')])
    .process(
        '<div class="baseWrapper" css-module="profile.user">John</div>' +
        '<h2 css-module="article.title"></h2>'
    )
    .then(function (result) {
        console.log(result.html);
    });

// <div class="baseWrapper _profile_user_f93j">John</div>
// <h2 class="_article__tile _heading"></h2>
```


### Object
You can also pass CSS modules as an object to the plugin:
```js
var posthtml = require('posthtml'),
    cssModules = {
        title: "_title_116zl_1 _heading_9dkf",
        profile: {
            user: "_profile_user_f93j"
        }
    };

posthtml([require('posthtml-css-modules')(cssModules)])
    .process(
        '<h1 css-module="title">My profile</h1>' +
        // You can also use nested modules
        '<div css-module="profile.user">John</div>'
    )
    .then(function (result) {
        console.log(result.html);
    });

// <h1 class="_title_116zl_1 _heading_9dkf">My profile</h1>
// <div class="_profile_user_f93j">John</div>
```