@greenwood/plugin-import-raw

@greenwood/plugin-import-raw

Overview

A Greenwood plugin to use ESM (import) syntax to load any file contents as a string exported as a JavaScript module. Inspired by webpack's raw loader. For more information and complete docs on Greenwood, please visit our website.

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

Installation

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

# npm
$ npm i -D @greenwood/plugin-import-raw

# yarn
$ yarn add @greenwood/plugin-import-raw --dev

# npm
$ pnpm add -D @greenwood/plugin-import-raw

Usage

Add this plugin to your greenwood.config.js:

import { greenwoodPluginImportRaw } from '@greenwood/plugin-import-raw';

export default {
  // ...

  plugins: [
    greenwoodPluginImportRaw()
  ]
}

This will then allow you to use ESM (import) to include any file as an arbitrary string exported as a JavaScript module.

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

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

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).

Options

Matches

Optionally, you can provide an array of "matcher" patterns for the plugin to transform custom paths, which can be useful for handling imports you can't change, like third party files in node_modules.

import { greenwoodPluginImportRaw } from '@greenwood/plugin-import-raw';

export default {
  plugins: [
    greenwoodPluginImportRaw({
      matches: [
        '/node_modules/some-package/dist/styles.css'
      ]
    })
  ]
}