pug-plugin Some difficult questions (SCSS import as string)...

How to use scss as compiled, but inline string when import from JS? import styles from './index.scss?scss';

Tried, but there is weird effect with additional loader (in result empty string, or error when no css-loader).

// use require when mjs
import { createRequire } from 'module'
const require = createRequire(import.meta.url)

//
export default {
    resourceQuery: /scss/,
    type: 'asset/source',
    use: [{
        loader: 'postcss-loader',
        options: {
            postcssOptions: require("../config/postcss.config.cjs")
        }
    }, 'sass-loader']
};

Earlier here was an error problem concerning misrepresentation. Error: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'! However, this is regarding pug-loader.

Apr 04 '24 14:04 L2NE-dev

Hello @unit-404,

You can't use the type: 'asset/source' for imported SCSS in JS to inline CSS. That will be not works. You can inline CSS imported in JS using the css.inline option.

See the test case js-import-css-inline-css.

Note

The pug-plugin v5.x === html-bundler-webpack-plugin, therefore you can use the README of the html-bundler-webpack-plugin.

Apr 04 '24 20:04 webdiscus

I just needs to make support of some web-components in runtime, such as <template> files in .pug format, with embedded compiled SCSS (but prefer compiled into (bit indirectly) blob (in runtime) -> URL.createObjectURL -> in runtime, import in css/style, for reduce memory consumption).

template.launcher.immersive
    .wrap
        .grid(part='inner')
            slot

    // webpackIgnore: true
    style(scoped='').
        @import url("./modules/uno.css");

    // webpackIgnore: true
    style(scoped='').
        @import url("./modules/styles.css");

    // exact moment, but in practice harder
    style(scoped='')
        include ./x-grid.scss

Our project (hidden) using splitting into build phase and runtime or browser phase.

Apr 05 '24 03:04 L2NE-dev

@unit-404

can you please create a small repo with your use case.

Apr 05 '24 07:04 webdiscus

template.launcher.immersive
    .wrap
        .grid(part='inner')
            slot

    // webpackIgnore: true
    style(scoped='').
        @import url("./modules/uno.css");

    // webpackIgnore: true
    style(scoped='').
        @import url("./modules/styles.css");

    // exact moment, but in practice harder
-    style(scoped='')
-        include ./x-grid.scss
     //- you can inline a style using `?inline` query (no webpack configuration required)
          in generated HTML will be <style>... compiled CSS ...</style>
+    link(href='./x-grid.scss?inline' rel='stylesheet')

Apr 05 '24 10:04 webdiscus

I sometimes thought that <link> is still for the <head> tag, and is more intended for global styles, while <style> still implies scoped (attribute) ie within the web component.

Apr 05 '24 10:04 L2NE-dev

I sometimes thought that <link> is still for the <head> tag, and is more intended for global styles, while <style> still implies scoped ie within the web component.

you can use link tag in Pug anywhere, not only in head, this is just a syntax that allow you to include CSS anywhere in your template:

template
  div.component
     link(href='./x-grid.scss?inline' rel='stylesheet' scope='some')

will be compiled to (yet not implemented, it's only suggestion):

<tremplate>
  <div class="component">
    <style scope="some">
      ... CSS ...
    </style>
  </div>
</tremplate>

Would this syntax be a solution for your use case?

Apr 05 '24 10:04 webdiscus

@unit-404

I have added experimental support to include a compiled CSS directly to style tag using the require() and the ?include query:

style(scoped='some')=require('./x-grid.scss?include')

The generated HTML:

<style scope="some">
    ... CSS ...
</style>

Please, update the plugin to the version 5.2.0.

Apr 05 '24 23:04 webdiscus