Lit-element: failed to convert value to cssstylesheet

[BhavyaSingh2611]

Description

Uncaught TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.
at HTMLElement.adoptStyles (aim-design.js:9)
at HTMLElement.initialize (aim-design.js:9)
at new rt (aim-design.js:9)
at new Et (aim-design.js:9)
at new s (aim-design.js:2)

Live Demo

https://www.github.com/BhavyaSingh2611/aim-design

Steps to Reproduce

bundle assets using npm run build
open a.html
view console error is there
the custom element is also not rendering

Expected Results

show a material design styled button with absd written in it

Actual Results

plain absd is shown (text)

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Edge
• [x] Safari 11
• [x] Safari 10
• [x] IE 11

Versions

• lit-element: v2.1.0
• webcomponents: v2.2.10

[luis-pato]

I am getting the same error. How did you solve this problem?

[BhavyaSingh2611]

Hi @luis-pato I was about to use for my next project Aim Design but the objectives are changed after the non resolution of the issue for a week.

[BhavyaSingh2611]

Aim design is a framework helpful in creating ui which is still in alpha stage thanks I am reopening this issue

[luis-pato]

If this interests you, i have fixed the error by using postcss (i am using rollup for my project) and littcss (because i am using webcomponents)

[BhavyaSingh2611]

Please refer to https://github.com/BhavyaSingh2611/aim-design/commit/d00d905f6459258d064f8f52ab09d041230d14f9 commit as there are further commits

[BhavyaSingh2611]

Can you if possible give me a solution with webpack

[BhavyaSingh2611]

@luis-pato for now give me the source of your project

[luis-pato]

The postcss has nice documentation on how to use it with webpack!
https://github.com/postcss/postcss#webpack

[BhavyaSingh2611]

By the what's the fix using postcss

[BhavyaSingh2611]

@luis-pato by the way what's the fix using postcss

[luis-pato]

My problem was that i am using webcomponent and i wasn't exporting the css correctly

[BhavyaSingh2611]

@luis-pato By the i was using scss

[luis-pato]

@luis-pato By the i was using scss

Please like in the webpack doku how to user scss. I am sure postcss can help you. They have lots of information on their websites! ;)