how to load external css file with lit

Asked 18/10, 2021 at 8:39 Answered 9/4, 2023 at 23:27

Although lit provide some ways to deal with css, however I have some existing css files which I would like to use in some components, what should I do?

I have read this page https://lit.dev/docs/components/styles/ but now helpful with existing css files.

Duo answered 18/10, 2021 at 8:39 Comment(1)

That guide includes a bit about loading external stylesheets using link and why that's not recommended lit.dev/docs/components/styles/#external-stylesheet – Gerardogeratology 19/10, 2021 at 8:19

Modern method: Only work with chromium based browser and safari.
Read more Using CSS module scripts\

Chrome 123+

import styles from './my-styles.css' with { type: 'css' }; 
class MyEl extends LitElement { 
   static styles = [styles];
}

Before chrome < 123

import styles from './my-styles.css' assert { type: 'css' }; 
    class MyEl extends LitElement { 
         static styles = [styles];
    }

Other solution: By using vite build tools:

import style from "./style.css?inline";
class MyEl extends LitElement { 
   static styles = unsafeCSS(style);
}

Indignation answered 20/10, 2022 at 14:37 Comment(4)

When transpiling this with tsc, I get this error: error TS2307: Cannot find module './path/file.css' or its corresponding type declarations. Any hints? – Paraplegia 22/11, 2023 at 9:42

@JanDolejsi did you find any solution for this? I'm facing the same issue. – Stainless 27/11, 2023 at 10:34

Nope. If compiling using tsc into a CommonJS or ESM package is the goal, the only working solution I found was to paste the .css into the .ts file html template : ( But for a large 3rd party file, which would be insane to copy into the .ts component file, I decided to not use the shadow dom and leak the style from the main page into the component instead. All dirty. – Paraplegia 1/12, 2023 at 18:28

I got the following error when running the code: SyntaxError: Unexpected identifier 'assert'. I saw in another SO post that you can use with instead of assert due to Node.js updates and it seems to work. – Inactivate 28/8 at 8:37

My recommendation is: Don't.

The ShadyCSS polyfill doesn't support external style sheets.
External styles can cause a flash-of-unstyled-content (FOUC) while they load.
The URL in the href attribute is relative to the main document. This is okay if you're building an app and your asset URLs are well-known, but avoid using external style sheets when building a reusable element.

External css files should only be loaded in your html file (index.html most probably).

The css should be bundled with your element. An alternative for reusabilty would be to export shared styles and import them in your styles properties as follows:

static styles: CSSResult[] = [
    // language=CSS
    AnimatedStyles,
    ShadowStyles,
    css`
[...]`;

And import from a shared file.

export const ShadowStyles = css`
[...]
`;
export const AnimatedStyles = css`
[...]
`;

That way, they are also loaded only once.

Stefansson answered 13/1, 2022 at 20:33 Comment(0)

for example I use PicoCSS with Lit JS cdn on static HTML file

#1 tag css file on static index.html file

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
    />
  </head>

#2 and one inside Lit js elements, app.js file.

return html`
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
  />
`;

#3 Next, copy any components from the PicoCSS framework's official site.

https://picocss.com/docs/accordions.html

Here is my example below

https://codesandbox.io/s/static-html-js-module-imports-forked-stxvuh?file=/app.js:1376-1386

It's not the best practice, but I found it worked.

Media answered 9/4, 2023 at 23:27 Comment(0)

Recommended topics

Hot tags