Develop Reference

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)`
What am I doing wrong here ???

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.

Be aware that adoptedStyleSheets is currently not supported by Safari on Mac and iOS. But, Rollup might handle this for you - I don't know.
Another solution is to check out:
https://www.npmjs.com/package/csshtml-module
This CLI tool can be set up to let you automatically compile CSS/HTML to native JS modules.
I created that CLI tool to tackle this issue. It might not be for everyone - but maybe it resonate with you.

How do Vite MPAs using the Vue plugin work?

I have a Vite app created and I need it to have multiple pages. I read the docs and found how to do this (can be found here), however when I run the server I get a blank page.
My vite.config.js file:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
const { resolve } = require('path')
module.exports = {
build: {
rollupOptions: {
input: {
home: resolve(__dirname, 'src/Home/index.html')
}
}
}
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
Here's what my file structure looks like:
Edit: I have changed the config to what tony posted below, but it is still showing a blank page.
Edit 2: I found out that you don't need to use the vite.config.js routing, there's an easier way
Create a copy of your main.js, App.vue, and index.html file and rename them to something different. After you rename them change the <script type="module" src="index.js"></script> to your new JS file, and change the .vue file import in your new main.js to your new .vue file. Here's my new structure:
All I did was copy the files and change the names and imports, and it worked!

You have two default exports in vite.config.js, but there should only be one:
module.exports = { 1️⃣
//...
}
export default defineConfig({ 2️⃣
//...
})
The config should be:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
home: resolve(__dirname, 'src/Home/index.html')
}
}
}
})
GitHub demo

Export class as a module in webpack

I'm using Webpack to import a javascript file that has a single class.
my_class.js
console.log('hello from my_class');
class myClass {
// ...
}
index.js
import './my_class.js';
webpack.config.js
const path = require('path')
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
I'm trying to use this class on a page.
index.html
<script src="./dist/bundle.js"></script>
<script>
const myClass = new myClass();
</script>
I am able to seem my console log ("hello from my_class") but myClass is showing up as undefined.
Uncaught ReferenceError: myClass is not defined
What do I need to do such that myClass is exported and available in the markup?

Firstly you should export the class.
export class myClass {
// ...
}
And for browsers you should use IIFE or UMD format:
output: {
library: 'someLibName',
libraryTarget: 'umd',
filename: 'bundle.js'
}
2021 and webpack thinks federated apps are higher priority than adding ES module support 🤷‍♂️ Use rollup if you don't want to use UMD.
And reference: someLibName.myClass

As you have not exported class from my_class.js file, you will not be able to import it.
console.log('hello from my_class');
class myClass {
// ...
}
export default myClass;
And your import should be like
import myClass from './my_class.js';

#storybook/angular cannot load scss file on stories index

I have been trying to use storybook for my angular project and I use this guide https://storybook.js.org/basics/guide-angular/
I use the recommended config for webpack for sass loader for scss files and the scss file related to the project works fine, but if I import a scss file in the stories index.ts file, this file it is not loaded.
stories/index.ts
import { storiesOf } from '#storybook/angular';
import { action } from '#storybook/addon-actions';
import { VideoPosterComponent } from '../src/app/modules/ui-common/video-poster/video-poster.component';
//This scss it is not loaded
import '../src/styles.scss';
storiesOf('Video Poster component', module)
.add('Video Poster with author data', () => ({
component: VideoPosterComponent,
props: {
title: "Cinemagraph With Custom title",
subtitle: "This is a custom subtitle!"
}
}))
.add('Video Poster without author data', () => ({
component: VideoPosterComponent,
props: {}
}));
.storybook/webpack.config.js (recommended in here --> https://storybook.js.org/basics/guide-angular/#configure-style-rules)
const genDefaultConfig = require('#storybook/angular/dist/server/config/defaults/webpack.config.js');
module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env);
// Overwrite .css rule
const cssRule = config.module.rules.find(rule => rule.test && rule.test.toString() === '/\\.css$/');
if (cssRule) {
cssRule.exclude = /\.component\.css$/;
}
// Add .scss rule
config.module.rules.unshift({
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader'],
});
return config;
};
And, the scss file for my component was loaded without problems
src/app/modules/ui-common/video-poster/video-poster.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-video-poster',
templateUrl: './video-poster.component.html',
styleUrls: ['./video-poster.component.scss'] // this were loaded without problems
})
export class VideoPosterComponent implements OnInit {
private hostUrl = 'https://s3-eu-west-1.amazonaws.com/video.gallereplay.com/portfolio/clients';
private baseUrl = `${this.hostUrl}/jaegermeister/Cinemagraph_plain/1920x1080`;
#Input()
public videoUrls = {
poster: `${this.baseUrl}/cinemagraph.jpg`,
mp4: `${this.baseUrl}/cinemagraph.mp4`,
webm: `${this.baseUrl}/cinemagraph.webm`,
}
#Input() public title = 'Custom Cinemagraph Productions';
#Input() public subtitle = 'Exclusive Content for Businesses';
constructor() { }
ngOnInit() {
}
}
Repository:
https://github.com/gpincheiraa/storybook-components-sample
run npm install && npm run storybook for check storybook running.
What I am doing wrong??

I assume that, like me, you're looking for a way to load global styles from SASS files into an Angular Storybook. I know it's been a while since you asked, but I came across this solution while searching for a way to accomplish this: https://github.com/storybookjs/storybook/issues/6364#issuecomment-485651328.
Basically, you can load your global styles in the Storybook config file. However, you need to use inline webpack loaders in the import path so Storybook will load them properly.
import '!style-loader!css-loader!sass-loader!../src/styles.scss';
That did the trick for me. In the end I didn't have to bother with the custom webpack config. Hopefully that solves your problem!

You are trying to import an scss file from your typescript. You must include it from your scss.
Please remove :
//This scss it is not loaded
import '../src/styles.scss';
In your scss file add :
#import "styles.scss";
In you angular.json add :
"styles": [
"src/styles.scss",
],
"stylePreprocessorOptions": {
"includePaths": [
"src/" // maybe not required in your case
]
},
In you .storybook/webpack.config.js please try :
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loaders: ["sass-loader"],
include: path.resolve(__dirname, "../src/")
}
]
}
};
Otherwise there is the possibility to add an alias as Xdecus said here https://github.com/storybooks/storybook/issues/3814#issuecomment-401756776
const path = require('path');
module.exports = {
resolve: {
alias: {
styles: path.resolve(__dirname, '../src/')
}
}
};

All style imports must be in Component metadata (specifically in styles or styleUrls field). You're trying to import style file as js file, which is wrong.

Webpack, bundle loader and common chunk plugin issue

I have a page A.js and a page B.js and have base class base.js for it.
I import base.js for each A and B and use it as extend for class A and B.
My router loads those pages via require('bundle!pages' + url + '.js');
I would like to have base.js as a part of one common.js.
I added common chunk plugin to webpack
new webpack.optimize.CommonsChunkPlugin({
children: true,
name: 'common',
filename: 'common.js',
minChunks: 2,
})
but as an output I still have duplicated base.js in class a.js and b.js.
Is there any issue with bundle loader and common chunk plugin?
a.js
import Base from '../base';
class A extends Base {
constructor() {
super();
}
create() {}
}
export default A;
b.js
import Base from '../base';
class B extends Base {
constructor() {
super();
}
create() {}
}
export default B;
base.js
class Base {
constructor() {}
}
export default Base;
router.js
let loader = require('bundle!pages' + url + '.js');
loader((module) => callback(module.default));

Try this:
in webpack.config.js add to the exporting object this property
externals: { 'base': 'Base' }
and include this in your html header
I think that feature is from webpack 2