PostCSS Eik plugin to support the use of import maps to map "bare" import specifiers in CSS @import rules.

$ npm install @eik/postcss-plugin

const postcss = require('postcss');
const plugin = require('@eik/postcss-plugin');
const fs = require('fs');

// CSS to be processed
const css = fs.readFileSync('css/input.css', 'utf8');

postcss()
    .use(plugin())
    .process(css, {
        // `from` option is needed here
        from: 'css/input.css',
    })
    .then(function (result) {
        console.log(result.css);
    });

This plugin transforms "bare" import specifiers to absolute URL specifiers in CSS modules by applying an Import Map ahead of time.

For a more detailed description of Import Maps, please see our Import Maps section.

The main target for Import Maps is to map import statements in EcmaScript Modules but it can be applied to CSS import statements too.

Given the following CSS:

@import 'normalize.css';

body {
    background: black;
}

when applaying the following Import Map:

{
    "imports": {
        "normalize.css": "https://cdn.eik.dev/normalize.css@8/normalize.css"
    }
}

one will get a transformed CSS like so:

@import 'https://cdn.eik.dev/normalize.css@8/normalize.cs