@prpl/plugin-css-imports

A plugin for PRPL that resolves CSS import statements at build time. Useful to avoid extra requests at runtime for imported CSS files.

This plugin should be disabled when using the PRPL dev server. The dev server is not yet aware of the graph of resources in your site and will not be able to detect changes in imported CSS files. There should be no difference in behavior given the CSS at-rule is supported in all modern browsers.

Dependencies

@prpl/plugin-css-imports has zero dependencies.

Usage

import { interpolate } from '@prpl/core';
import { resolveCSSImports } from '@prpl/plugin-css-imports';

await interpolate();
await resolveCSSImports();

Notes

Given CSS file a.css:

@import 'b.css';

h1 {
  color: mediumslateblue;
}

and CSS file b.css:

p {
  color: mediumslateblue;
}

and resolveCSSImports is called, the output of CSS file a.css will be:

p {
  color: mediumslateblue;
}

h1 {
  color: mediumslateblue;
}