Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some difficult questions (SCSS import as string)... #108

Open
unit-404 opened this issue Apr 4, 2024 · 7 comments
Open

Some difficult questions (SCSS import as string)... #108

unit-404 opened this issue Apr 4, 2024 · 7 comments
Labels
enhancement New feature or request question Further information is requested

Comments

@unit-404
Copy link

unit-404 commented Apr 4, 2024 •
edited

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.
@unit-404 unit-404 closed this as not planned Won't fix, can't repro, duplicate, stale Apr 4, 2024
@unit-404 unit-404 changed the title "Error: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!" and nothing any sense... Some difficult questions (SCSS import as string)... Apr 4, 2024
@unit-404 unit-404 reopened this Apr 4, 2024
@webdiscus
Copy link
Owner

webdiscus commented Apr 4, 2024 •
edited

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.

@webdiscus webdiscus added the question Further information is requested label Apr 4, 2024
@unit-404
Copy link
Author

unit-404 commented Apr 5, 2024 •
edited

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.

@webdiscus
Copy link
Owner

webdiscus commented Apr 5, 2024 •
edited

@unit-404

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

@webdiscus
Copy link
Owner 

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')

@unit-404
Copy link
Author

unit-404 commented Apr 5, 2024 •
edited

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.

@webdiscus
Copy link
Owner

webdiscus commented Apr 5, 2024 •
edited

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?

@webdiscus
Copy link
Owner

@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.

@webdiscus webdiscus added the enhancement New feature or request label Apr 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@webdiscus @unit-404