PostCSS Styled JS

Import JavaScript file which exports styled.css

Why, Why, Why another tool?

Some how CSS post processing are little complicated, and do not provide best editing experience and we cannot debug what is being generated.

Benefits

1. You

Getting Started

Installation

1. `npm install -D postcss-import-styled-js
2. Add postcss-import-styled-js as a plugin

module.exports = (ctx) => ({
    map: { ... ctx.options.map, sourcesContent: false },
    plugins: [
        require("postcss-import-styled-js")(), // <-- this one
        require('postcss-preset-env')(),
        require("postcss-import")(),
        require("postcss-import-ext-glob")(),
        require("postcss-nested")(),
        require("cssnano")()
    ]
});

Examples

main.css

/** This will import JS files */
@import-styled-js "./**/*.css.js";

Sample CSS JS File

body.css.js

import styled from "postcss-import-styled-js";

const animations = Object.entries({
    div: "red",
    span: "blue"
}).map(([name, color]) =>
    styled.css `
        & ${name} {
            color: ${color};
        }
`);

export default styled.css `
    body {
        font-weight: 500;
        ${animations}
    }

`;

Above code will be transpiled as,

body {
    font-weight: 500;

    & div {
        color: red;
    }
    & span {
        color: blue;
    }
}

What is happening?

postcss-import-styled-js will compile all .css.js files to .css file and import the generated file in the target main css file.