@greenwood/plugin-import-css

Overview

A Greenwood plugin to allow you use ESM (import) syntax to load your CSS.

This package assumes you already have @greenwood/cli installed.

Installation

You can use your favorite JavaScript package manager to install this package.

examples:

# npm
npm install @greenwood/plugin-import-css --save-dev

# yarn
yarn add @greenwood/plugin-import-css --dev

Usage

Add this plugin to your greenwood.config.js and spread the export.

import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';

export default {
  // ...

  plugins: [
    greenwoodPluginImportCss()
  ]
}

This will then allow you to use import to include CSS in your JavaScript files.

import css from '../path/to/styles.css'; // must be a relative path per ESM spec

console.log(css); // h1 { color: red }

A couple notes:

• For SSR and prerender use cases, follow these steps
• For client side / browser code specifically, it is recommended to append ?type=css, e.g.

  import css from '../path/to/styles.css?type=css';

For libraries like Material Web Components, this plugin will resolve references to some-file.css if the equivalent exists that ends in .js (e.g. styles.css.js).

The plan is to coalesce around import assertions in time for the v1.0 release so the same standard syntax can be used on the client and the server.

PostCSS

If you plan to use PostCSS, then it is recommended to use our PostCSS plugin and make sure plugin-postcss comes before this plugin in your greenwood.config.js.

import { greenwoodPluginPostcss } from '@greenwood/plugin-postcss';
import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';

export default {
  // ...

  plugins: [
    greenwoodPluginPostcss(),
    greenwoodPluginImportCss()
  ]
}