standalone javascript runs, but no style in document

[pdr0663]

Describe the issue

I've added the following line in the head part of my html file:

<script type="module" src="https://esm.sh/@siimple/standalone"></script>

In Chrome, the console responds with:

[siimple:standalone] Welcome to @siimple/standalone standalone.js:2 [siimple:standalone] --> Documentation for @siimple/standalone is available at https://siimple.xyz/packages/standalone. standalone.js:2 [siimple:standalone] --> Please do not use it in production environments!!

which I assume means that the script ran correctly. The problem is, there is no formatting of my elements, and using the Chrome developer tools, the style part of the document is virtually empty (only bare minimum default values).

To reproduce

No response

Screenshots

No response

What browser(s) are you seeing the problem on?

Chrome

What version of siimple are you using?

v4.3.1

Additional context

No response

[pdr0663]

Here is the HTML source...

Here is the code:

siimple-test.txt

Sorry, I had to name the file without the .html extension for some reason...

[jmjuanes]

Hello! You need to add a <script type="text/siimple"> tag with your custom configuration of siimple. For example:

<script type="text/siimple">
    import base from "@siimple/preset-base";
    export default {
        ...base,
        // ...other configuration
    };
</script>

Full HTML example: https://github.com/jmjuanes/siimple/blob/main/packages/standalone/example.html

Reference: https://github.com/jmjuanes/siimple/tree/main/packages/standalone#usage

If you do not need to customize siimple, instead of using the standalone script just use our hosted CSS version:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple/siimple.css" />

[pdr0663]

Thanks for your help, I tried the static CSS files and it works fine, thanks. I'm not sure why the code I wrote didn;t work, as I have no custome configuration and followed the instructions. The javascript seemed to run, and the documentation saya that the CSS should be added to a style tag. Thanks anyway, I can proceed now.

Paul

[jmjuanes]

There is your HTML file working (you only needed to add the <script type="text/siimple"> tag with the default configuration): https://codesandbox.io/s/hidden-resonance-pihwxw?file=/index.html

It takes some seconds for downloading dependencies, but finally works (see the console output). That is the reason that I recommend using the hosted CSS, and use the standalone version only when you need to customize siimple for development/learning purposes.

Closing this issue. Thank you!