Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

135
Views
Rollup imported css in a webcomponent

I am creating simple webcomponent now I want to import css , I found a method using adpotedstylesheet.

Here is how I import it my webcomponet

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

class Demo extends HTMLElement{

   constructor() {
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(Demo.content.cloneNode(true));
    document.adoptedStyleSheets = [sheet];
    this.shadowRoot.adoptedStyleSheets = [sheet];
   }
}

window.customElements.define("demo-component", Demo);

and here is my rollup settup for bundling my component

import summary from "rollup-plugin-summary";
import { terser } from "rollup-plugin-terser";
import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import postcss from "rollup-plugin-postcss";
import { eslint } from "rollup-plugin-eslint";
import babel from "rollup-plugin-babel";
import { uglify } from "rollup-plugin-uglify";
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: "index.js",
  output: {
    file: "dist/index.js",
    format: "esm",
  },
  onwarn(warning) {
    if (warning.code !== "THIS_IS_UNDEFINED") {
      console.error(`(!) ${warning.message}`);
    }
  },
  plugins: [
    postcss({
      plugins: [],
      extensions: [".css"],
    }),
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
    eslint({
      exclude: ["src/styles/**"],
    }),
    babel({
      exclude: "node_modules/**",
    }),
    terser({
      ecma: 2017,
      module: true,
      warnings: true,
      mangle: {
        properties: {
          regex: /^__/,
        },
      },
    }),
    summary(),
    replace({
      "Reflect.decorate": "undefined",
      preventAssignment: true,
      ENV: JSON.stringify(process.env.NODE_ENV || "development"),
    }),
    process.env.NODE_ENV === "production" && uglify(),
  ],
};

Now when i run npm run buil I get the following error.

[!] (plugin commonjs) SyntaxError: Unexpected token (3:38)`

enter image description here

What am I doing wrong here ???

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Currenly, Rollup doesn't support import assertions. There is open issue for Rollup to address it. There is an experimental Rollup plugin that supports this but it seems to have some issues.

Another option you can try is to use rollup-string-plugin. You can use it to read CSS file as a string and then build your constructible stylesheets and assign it to adoptedStyleSheets property as explained here for Webpack. Following is one example of doing it..

// Read SCSS file as a raw CSS text
import styleText from './my-component.css';

const sheet = new CSSStyleSheet();
sheet.replaceSync(styleText);

// Custom Web component
class FancyComponent1 extends HTMLElement {

  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });

    // Attaching the style sheet to the Shadow DOM of this component
    shadowRoot.adoptedStyleSheets = [sheet];

    shadowRoot.innerHTML = `
      <div>
        <p>Hello World</p>
      </div>
    `;

  }
}

Side note: With Webpack, you can use raw-loader.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!