# PostCSS-modules

> A PostCSS plugin to use CSS Modules everywhere: not only at the client side.

- URL: https://evilmartians.com/opensource/postcss-modules
- GitHub: https://github.com/css-modules/postcss-modules
- Authors: Alexander Madyankin

---

Let's say you have the following CSS:

```css
/* styles.css */
:global .page {
  padding: 20px;
}

.title {
  composes: title from "./mixins.css";
  color: green;
}

.article {
  font-size: 16px;
}

/* mixins.css */
.title {
  color: black;
  font-size: 40px;
}

.title:hover {
  color: red;
}
```

After the transformation, it will look like this:

```css
._title_116zl_1 {
  color: black;
  font-size: 40px;
}

._title_116zl_1:hover {
  color: red;
}

.page {
  padding: 20px;
}

._title_xkpkl_5 {
  color: green;
}

._article_xkpkl_10 {
  font-size: 16px;
}
```

And the plugin will give you a JSON object for transformed classes:

```json
{
  "title": "_title_xkpkl_5 _title_116zl_1",
  "article": "_article_xkpkl_10"
}
```