New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

rollup-plugin-import-assert

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rollup-plugin-import-assert

A Rollup plugin to add import assertion behavior and syntax support

  • 3.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

rollup-plugin-import-assert

🍣 A Rollup plugin which enables import assertions for top-level CSS and JSON modules.

Installation

This package is available on the npm registry under the name rollup-plugin-import-assert and can be installed with npm, yarn or however else you consume dependencies.

Example commands

npm:

npm i -D rollup-plugin-import-assert

yarn:

yarn add -D rollup-plugin-import-assert

Usage

Once the plugin is installed, you will also need to make sure you have the acorn-import-assertions package installed. You can then add both items to your Rollup configuration as below:

import { importAssertionsPlugin } from 'rollup-plugin-import-assert';
import { importAssertions } from 'acorn-import-assertions';

export default {
  input: 'path/to/file.js'
  output: {
    format: 'esm',
    dir: 'lib' // only necessary to enable dynamic imports
  },
  acornInjectPlugins: [ importAssertions ],
  plugins: [ importAssertionsPlugin() ]
}

These two plugins will enable the import assertion syntax and behavior in your Rollup build. In your input file, you can import files using type assertions as follows:

import styles from './styles.css' assert { type: 'css' };

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `<h1>Hello world</h1>`;
    root.adoptedStyleSheets = [ styles ];
  }
}

customElements.define('my-custom-element', MyCustomElement);

Assuming valid CSS in styles.css, the contents of the the CSS will be transformed to use CSS module scripts for use with DocumentOrShadowRoot.prototype.adoptedStyleSheets. Currently this API only exists in Chrome, but a polyfill exists to port the behavior back to IE11.

Limitations

This plugin will ignore dynamic imports with dynamic values, e.g.:

import(`./foo/${bar}.json`, { assert: { type: 'json' } }); // will be ignored

const foo = './foo.json';
import(foo, { assert: { type: 'json' } }); // will be ignored

Keywords

FAQs

Package last updated on 04 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc