LESS import CSS into Shadow Root

#1

In my package I am using a third party framework, with some custom CSS from the author. My less looks like

div.my-package-class::shadow {
 @import (inline, css) "./thirdparty.css";
}

If I copy any paste the CSS file into my LESS, the styles are applied, but not when I import from another file. What am I doing wrong?

#2

I’m not using the import feature much, but it appears it just copy the whole content of the CSS in the output without processing it. So let’s say that in a file a.css there’s your snippet:

div.my-package-class::shadow {
 @import (inline, css) "./b.css";
}

And in b.css there’s:

.foo {
  color: red;
}

Less produces:

div.my-package-class::shadow {
  .foo {
    color: red;
  }
}

which is not valid CSS, OTOH this is:

div.my-package-class::shadow .foo {
  color: red;
}
#3

Thanks @abe. I changed it to

div.my-package-class::shadow {
  @import (less) "./b.css";
}

which applies the processing correctly.