postcss-inline-class

Inline the declarations of other CSS classes in your CSS classes.

Usage no npm install needed!

<script type="module">
  import postcssInlineClass from 'https://cdn.skypack.dev/postcss-inline-class';
</script>

README

postcss-inline-class

Inline CSS classes in other CSS classes using postcss.

Examples

Minimal example

.a {
    color: red;
}

.b {
    @inline .a;
    font-size: 14px;
}

becomes

.a {
    color: red;
}

.b {
    color: red;
    font-size: 14px;
}

Multiple blocks

.a {
    color: red;
}

.a, .b {
    font-size: 14px
}

.c {
    @inline .a;
}

becomes

.a {
    color: red;
}

.a, .b {
    font-size: 14px
}

.c {
    color: red;
    font-size: 14px;
}

Different files

/* foo.css */

.a {
    color: red;
}

/* bar.css */

.b {
    @inline .a from './foo.css';
    font-size: 14px;
}

becomes

/* foo.css */

.a {
    color: red;
}

/* bar.css */

.b {
    color: red;
    font-size: 14px;
}