https://github.com/posthtml/posthtml-css-modules
Use CSS modules in HTML
https://github.com/posthtml/posthtml-css-modules
css-modules posthtml
Last synced: 3 months ago
JSON representation
Use CSS modules in HTML
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-css-modules
- Owner: posthtml
- License: mit
- Created: 2016-02-07T11:58:14.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-03T07:42:13.000Z (over 8 years ago)
- Last Synced: 2025-10-01T12:35:06.966Z (4 months ago)
- Topics: css-modules, posthtml
- Language: JavaScript
- Size: 16.6 KB
- Stars: 55
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# posthtml-css-modules
[](http://badge.fury.io/js/posthtml-css-modules)
[](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(
'
My profile
' +
// You can also use nested modules
'John'
)
.then(function (result) {
console.log(result.html);
});
//
My profile
// John
```
### 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(
'
John' +
''
)
.then(function (result) {
console.log(result.html);
});
//
John
//
```
### 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(
'
My profile
' +
// You can also use nested modules
'John'
)
.then(function (result) {
console.log(result.html);
});
//
My profile
// John
```