Rollup with style sheet

[sensor-freak]

Hi,

I tried to use this template, but with limited success:

• defining code for onInit and onRender worked
• defining HTML/SVG did work
• defining the styles did not work
• defining customProperties did work

I couldn't find a place where to put the CSS styles in. Adding my own styles to style.css did work. The styles where not applied to the elements in the #shadow-root node. The cause for this might be the encapsulation borders in the DOM, or something like this.

Also, I wanted to extend the template to copy the style sheet file to the build directory, but didn't find a solution for this. Extending rollup.config.dev.js was not successfull :-(

Can you (or anyone else) help with this?

Kind regards

[ZuperZee]

Hello @sensor-freak.
I haven't added a way to add a style file, but you can add css plugins for rollup.
If it isn't what you're looking for you can add styles to the svg document tho.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style

<svg width="2560" height="1080" viewBox="0 0 2560 1080" xmlns="http://www.w3.org/2000/svg">
    <style>
        text {
            font-size: 24px;
        }
    </style>
    <text x="100" y="100">Hello</text>
</svg>

I do like the idea of style files. I'll try to implement it. It might take some time (2-3 days), because I'm a little busy ATM.

[sensor-freak]

I would appreciate if you could add support for a style file!

I've tried to add it by myself (playing around with rollup-plugin-scss), but didn't succeed - since I'm not a nodejs developer ;-)

I'm not in a hurry, so take your time...

Many thanks for your support!

[ZuperZee]

Hello again @sensor-freak.
I've updated the template to support style files through rollup-plugin-postcss.

Feedback is greatly appreciated :D

[sensor-freak]

Hi, I've made a short test of the CSS support - and it works!

Thank you very much for your effort!