Stencil: Import css/scss unclear - or how to use jQuery UI in StencilJS context?

[kristianmandrup]

I have some old jQuery legacy widgets in an app I need to reuse. Trying to repackage the app and widgets as Custom Elements via StencilJS (obviously!).

However when I try to import jquery-ui as I did before (using webpack with appropriate loader), I get this error:

[ ERROR ]  bundling: ...pos/tecla5/red-ui/packages/red-widgets/node_modules/jquery-ui-dist/jquery-ui.css, line: 9
           Unexpected token 

      L8:  ----------------------------------*/
      L9:  .ui-helper-hidden {
     L10:   display: none;

Note: Previous app was a Vue app using Poi (wrapper of Webpack I think?)

This is what fails

// jQuery UI CSS
import 'jquery-ui-dist/jquery-ui.css'
import 'jquery-ui-dist/jquery-ui.structure.css'
import 'jquery-ui-dist/jquery-ui.theme.css'

Would I need to use bower and insert the includes directly in my index.html now!?
Please advise and add this tip to your docs.

On another note, I used to have a VSC plugin which auto-compiled my .scss files on save to .css and min.css files. Then the stencil builder complained it didn't know which to use/resolve.
Would be awesome if there could be a priority setting, such as to always prefer and use .scss if such a file exists... just saying ;)

Cheers guys!

[jgw96]

Hey! So currently you cannot import css files and with our move to ES modules coming soon (which do not allow importing css) this will definitely not work haha. But, since your packaging the components to be used elsewhere, why couldn't the consumer of your components include script tags in their app to link to this css ? Just wanting to make sure i completely understand the use case here.

[kristianmandrup]

Well, I thought you might well use the loader concept from webpack? Then import css would be possible and "just work" ;)

[jgw96]

So just thought of something that should work haha.

@Component({
  tag: 'jquery-component',
  styleUrl: 'jquery-ui-dist/jquery-ui.css'
}) 

the styleUrl should be able to pull in the css. Mind giving that a try and seeing if it works for you?

[jgw96]

Hello! I am going to close this issue for now as it has been a while since there was any activity. Thanks for using Stencil!

[iofirag]

i'm try with the way of:

@Component({
  tag: 'jquery-component',
  styleUrl:s ['../../../node_modules\material-design-lite\material.min.css']
}) 

but getting:

[ ERROR ]  bundling: node_modules\material-design-lite\material.min.css, line: 8
           Unexpected character '@'

      L8:  @charset "UTF-8";html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{
      L9:  /*# sourceMappingURL=material.min.css.map */

[35:55.8]  rebuild failed, watching for changes... in 4.83 s

[OnlyAGhost]

I know this is super necro-posting on this, just in case someone comes across this:
styleUrl:s ['../../../node_modules\material-design-lite\material.min.css']

This is obviously mixing up slashes and it should be styleUrls, the s is on the wrong side of the :

[segevofer]

so how can we load css files from a different node_module?

[OnlyAGhost]

@segevofer have you tried adding the import statement to your scss file? You can reference node_modules via something like this:
@import '~@angular/material/theming';

So for the component, set your styleUrls to your local scss file, and use the scss file to import from node_modules. The ~ is the reference point to node_modules

[segevofer]

@OnlyAGhost Thanks for your reply.
That's actually exactly what I did..
It worked for dev and build, but when I run the npm run test the tests fail for bad @import statement 😩

The tests worked perfectly before adding this change,
and they pass when I comment out the @import "~@my/scss/node/module"

Any ideas why this is failing when running the tests?
Thanks!

[OnlyAGhost]

@segevofer ahh, I just saw a ticket regarding react claiming the same issue. In that ticket they recommended adding the relative path (so like ../node_modules if you are one level outside of it or ../../../, etc).

[patarapolw]

There is still no way to create path alias in tsconfig.json (or .babelrc)?

import { Component, Prop, h } from '@stencil/core';
import { format } from '@/utils/utils';  // This works

@Component({
  tag: 'my-component',
  styleUrl: '~/bulma/css/bulma.css',  // This does not work
  shadow: true,
})
export class MyComponent {

// tsconfig.json
{
    "baseUrl": ".",
    "paths": {
      "~/*": ["./node_modules/*"],
      "@/*": ["./src/*"]
    }
}