Skip to main content

Using Eik with PostCSS

This guide describes how to configure postcss to use build-time import mapping for your CSS. The guide assumes you have an eik.json containing at least one "import-map".

Getting started​

Install @eik/postcss-plugin, and postcss if you haven't already.

npm install --save-dev postcss postcss-cli @eik/postcss-plugin

Configure your build​

Create postcss.config.js or extend your existing config to add the Eik plugin.

import eik from "@eik/postcss-plugin";

/** @type {import('postcss-load-config').Config} */
export default {
	map: true,
	plugins: [eik()],
};

You can also use the JavaScript API for postcss.

import fs from "node:fs";
import path from "node:path";
import eik from "@eik/postcss-plugin";
import postcss from "postcss";

const from = "css/input.css";
const to = "public/output.css";

const css = fs.readFileSync(path.join(process.cwd(), from), "utf-8");

postcss()
	.use(eik())
	.process(css, {
		from,
	})
	.then((result) => {
		fs.writeFileSync(path.join(process.cwd(), to), result.css, "utf-8");
	});

Run your build​

Assuming you use postcss-cli and postcss.config.js, add these scripts to package.json if you haven't already.

{
	"scripts": {
		"build": "postcss src/input.css --output ./public/output.css --config ./postcss.config.js",
		"dev": "npm run build -- --watch"
	}
}

Advanced usage​