Inlining CSS via ?inline query is broken when importing CSS/SCSS in JavaScript files #102

daltonboll · 2024-07-22T23:08:46Z

Current behaviour

When I import a .css file or .scss file into a JavaScript file by using an import statement like import './styles.css?inline' or import './styles.css', I get an error when I build my project:

[INFO] ERROR in tutorial/js/tutorial.dc4ea4af8c0e4076240407f27b85c4bd.js
[INFO] tutorial/js/tutorial.dc4ea4af8c0e4076240407f27b85c4bd.js from Terser plugin
[INFO] Unexpected token: punc (.) [tutorial/js/tutorial.dc4ea4af8c0e4076240407f27b85c4bd.js:1,0]
[INFO]     at js_error (app/node_modules/terser/dist/bundle.min.js:536:11)
[INFO]     at croak (app/node_modules/terser/dist/bundle.min.js:1264:9)
[INFO]     at token_error (app/node_modules/terser/dist/bundle.min.js:1272:9)
[INFO]     at unexpected (app/node_modules/terser/dist/bundle.min.js:1278:9)
[INFO]     at statement (app/node_modules/terser/dist/bundle.min.js:1408:17)
[INFO]     at _embed_tokens_wrapper (app/node_modules/terser/dist/bundle.min.js:1329:26)
[INFO]     at parse_toplevel (app/node_modules/terser/dist/bundle.min.js:3607:23)
[INFO]     at parse (app/node_modules/terser/dist/bundle.min.js:3620:7)
[INFO]     at minify_sync_or_async (app/node_modules/terser/dist/bundle.min.js:31881:42)
[INFO]     at minify_sync_or_async.next (<anonymous>)
[INFO] 
[INFO]  HTML Bundler Plugin  ▶▶▶ (webpack 5.93.0) compiled with 1 error in 5608 ms
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE

Expected behaviour

Per this documentation, I would expect that importing the CSS in a JS file with this syntax would automatically inject the CSS into the HTML.

Reproduction Example

I'm using webpack to serve an app with a Spring Boot backend and a React frontend. I'm using babel transpile JS/JSX. The relevant files I'm using are found below:

styles.css (or styles.scss -- I've tried both)

.heading {
  color: red;
}

tutorial.js

import "./styles.css?inline"; // <= If I comment this out, the application runs without error and the JS is executed on the page just fine (the CSS is just absent from the webpage)
// import "./styles.css"; <= this syntax also causes an error

console.log('hello world!');

tutorial.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
  <title>Title</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p class="heading">Tutorial!</p>
  <script src="../js/tutorial.js" type="application/javascript"></script>
</body>

webpack.config.js

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

const FRONT_END_DIRECTORY = "src/main/frontend";
const BUILD_OUTPUT_DIRECTORY = "target/classes/static";

module.exports = (env, argv) => ({
  target: 'web',

  output: {
    path: path.resolve(__dirname, `./${BUILD_OUTPUT_DIRECTORY}`),
    clean: true,
    publicPath: '',
  },

  plugins: [
    new HtmlBundlerPlugin({
      entry: `${FRONT_END_DIRECTORY}/`,
      js: {
        filename: <redacted_function>,
        outputPath: '',
      },
      css: {
        filename: <redacted_function>,
        outputPath: '',
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, `./${FRONT_END_DIRECTORY}`),
        use: ['babel-loader']
      },
      {
        test: /\.(s?css)$/,
        include: path.resolve(__dirname, `./${FRONT_END_DIRECTORY}`),
        oneOf: [
          {
            resourceQuery: /inline/, // <= matches e.g., styles.scss?inline. I've also tried just not doing this query at all and always using 'css-loader' and 'sass-loader' with the default configurations.
            // TODO: is there some other configuration that I have to do in order to get the imports to work?
            use: [
              {
                loader: 'css-loader',
                options: {
                  // exportType: 'css-style-sheet', <= doesn't work, though it does allow me to import a CSSStyleSheet object and inject the CSS into the HTML using adoptedStyleSheets
                  // exportType: 'string', <= doesn't work
                  exportType: 'array', // <= doesn't work
                },
              },
              {
                loader: 'sass-loader',
              },
            ],
          },
          {
            use: [
              'css-loader',
              'sass-loader',
            ],
          }
        ],

      },
      {
        test: /\.(jpe?g|png|gif|svg|webp|ico)$/i,
        include: path.resolve(__dirname, `./${FRONT_END_DIRECTORY}`),
        type: 'asset',
        generator: {
          filename: <redacted_function>,
        },
        parser: {
          dataUrlCondition: {
            maxSize: 2 * 1024
          }
        },
      },
    ]
  },

  resolve: {
    modules: [
      path.resolve(__dirname, `./${FRONT_END_DIRECTORY}`),
      'node_modules'
    ],

    extensions: ['.js', '.jsx', '...'],

    alias: {
      '@bootstrap': path.join(__dirname, 'src/main/frontend/external/node_modules/bootstrap/scss'),
      '@bootstrap-base$': path.join(__dirname, 'src/main/frontend/external/bootstrap-base.scss'),
      Bootstrap$: path.resolve(__dirname, 'src/main/frontend/external/Bootstrap.js'),
      Popper$: path.resolve(__dirname, 'src/main/frontend/external/Popper.js'),
      React$: path.resolve(__dirname, 'src/main/frontend/external/React.js'),
      ReactDOM$: path.resolve(__dirname, 'src/main/frontend/external/ReactDOM.js'),
      ReactPopper$: path.resolve(__dirname, 'src/main/frontend/external/ReactPopper.js'),
    },
  },

  devServer: {
    port: 8081,
    compress: true,
    watchFiles: [
      `${FRONT_END_DIRECTORY}/**/*.html`,
      `${FRONT_END_DIRECTORY}/**/*.js`,
      `${FRONT_END_DIRECTORY}/**/*.jsx`,
      `${FRONT_END_DIRECTORY}/**/*.scss`,
      `${FRONT_END_DIRECTORY}/**/*.css`,
    ],
    proxy: [
      {
        context: '**',
        target: 'http://localhost:8080',
        secure: false,
        prependPath: false,
        headers: {
          'X-Devserver': '1',
        }
      }
    ]
  }
});

Environment

OS: macOS 14.2.1
version of Node.js: v20.15.1
version of Webpack: ^5.93.0
version of the Plugin: ^3.15.1
Babel versions:
- @babel/core: ^7.24.9
- @babel/preset-env: 7.24.8
- @babel/preset-react: ^7.24.7
- babel-loader: ^9.1.3

Additional context

Note that I realize that I could just have all CSS files be inline injected into the HTML via the global setting described here. However, I want the majority of my CSS files to remain separate. The reason why I'd like to selectively inline CSS files via JS imports is because I want each React component to have its own corresponding CSS/SCSS file.

I could utilize exportType = css-style-sheet and document.adoptedStyleSheets in each React component to manually inject the CSS into the html. However, it would definitely be nice to have this done automatically, because that extra step leaves room for errors and is just another thing to remember.

The documentation indicates that the behavior I desire should be available, so I'm assuming that this is a bug. Or maybe I have just misconfigured something. 😅

This is an absolutely amazing plugin by the way. It's so powerful, and this CSS import behavior is the last bit of configuration I need in order to have things working just the way I'd like them to. The documentation is also top-notch. Thank you so much for all of your incredible work on this!

Anyway, I would greatly appreciate any help you can provide. Thanks in advance! 😊

The text was updated successfully, but these errors were encountered:

webdiscus · 2024-07-23T07:04:21Z

Hello @daltonboll,

thank you for the issue report. I try to reproduce issue and find a solution.

P.S. Would be nice if you could create a small repo with reproducible issue.

webdiscus · 2024-07-23T15:43:34Z

@daltonboll

Note that the ?inline query is the reserver for the bundler plugin and can't be used in the resourceQuery: /inline/ Webpack option.

If you want to import a CSSStyleSheet object using a query, then use other query, e.g. as in the doc - resourceQuery: /sheet/. Then the css-loader option exportType must be css-style-sheet.

webdiscus · 2024-07-23T16:27:49Z

@daltonboll

I can reproduce the bug.
Using ?ìnline query for single CSS file in JS doesn't work:
import './style-d.css?inline'; <= will not be injected into HTML, the CSS is exported into separate file.

I will fix it.

daltonboll · 2024-07-23T16:46:26Z

Hi @webdiscus - thanks so much for your helpful reply and for getting back to me so quickly. I started putting together a small test repository for you to take a look at. In doing so, I simplified my code a bit and then was able to get rid of the error that I included in my original post. That error was my fault; the function I was providing to filename for JS and CSS files was generating a filename with some missing syntax. Once I fixed it, I no longer got an error when using the import <filename>.css?inline and import <filename>.css statements in JS files.

However, as you mentioned in your reply, including the ?inline query still does not inject the CSS into the HTML. It does put it into a separate file though, which is actually totally fine for my use case. It would be nice if you could fix it at some point, but there's absolutely no rush, as I'm satisfied with importing the CSS without the ?inline query.

Thanks again! :)

webdiscus · 2024-07-24T20:54:44Z

@daltonboll

the v3.17.0 is released. Now you can use the ?inline query for single style files imported in JavaScript:

import './style-a.scss?inline'; // the extracted CSS will be injected into HTML
import './style-b.scss'; // the extracted CSS will be saved into separate output file
import './style-c.scss?inline'; // the extracted CSS will be injected into HTML
import './style-d.scss'; // the extracted CSS will be saved into separate output file

So the CSS from many files with ?inline query will be squashed and injected into HTML:

style-a.scss + style-c.scss | => inject CSS into HTML

Other files will be squashed and saved into separate file:

style-b.scss + style-d.scss | => save CSS into file

For example, see please the test case. In the expected directory is the generated result.

daltonboll · 2024-07-24T21:46:47Z

This is awesome! I really appreciate your help with all of this. I will surely be recommending this plugin to everyone. :)

Thank you so much, and have a wonderful rest of your week!

-Dalton

webdiscus · 2024-07-25T00:26:04Z

@daltonboll Thank you for the donation!

daltonboll · 2024-08-03T10:58:00Z

@webdiscus I apologize for bothering you again about this, but I noticed that the CSS imports are still a bit buggy.

Specifically, when you use non-inline CSS imports and run webpack in development mode (webpack --mode development). By non-inline CSS imports, I mean imports in JS files of the form import "path/to/styles.scss"; These types of imports are working perfectly in production mode. However, in development mode, the styles are not getting applied correctly to the corresponding entry's html page. It appears as though they are not being included in the resulting bundled CSS file for the JS file that imported it.

The inline CSS imports (e.g., import "path/to/styles.scss?inline";) are working perfectly in both development and production mode though!

Could you please take another look at this when you get a chance? Thanks in advance! 🙂

webdiscus · 2024-08-03T11:04:17Z

@daltonboll can you please create small repo with reproducible issue

daltonboll · 2024-08-03T22:03:45Z

@webdiscus sure thing! Here's a small repo I created: https://github.com/daltonboll/debugging-html-bundler-webpack-plugin/tree/master

Info about how to reproduce is in the README.md. Thanks for your help! :)

webdiscus · 2024-08-08T19:30:38Z

@daltonboll thank you for the repo. I can reproduce the issue in dev mode und will fix it.

…another SCSS file via `?inline`, #102

webdiscus · 2024-08-09T14:00:55Z

@daltonboll
the issue is fixed in the v3.17.3

Thank you!

daltonboll · 2024-08-10T06:28:05Z

@webdiscus Awesome! Glad to hear the repo helped. Thank you for fixing this. Have a wonderful weekend! 😊

webdiscus added this to the analysis milestone Jul 23, 2024

webdiscus modified the milestones: analysis, development Jul 24, 2024

daltonboll closed this as completed Jul 24, 2024

webdiscus modified the milestones: development, done Jul 24, 2024

daltonboll reopened this Aug 3, 2024

webdiscus added a commit that referenced this issue Aug 9, 2024

fix: in dev mode imports SCSS in JS when in the same file is inlined …

2cb4dca

…another SCSS file via `?inline`, #102

webdiscus modified the milestones: done, test Aug 9, 2024

webdiscus closed this as completed Aug 10, 2024

webdiscus modified the milestones: test, done Aug 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inlining CSS via ?inline query is broken when importing CSS/SCSS in JavaScript files #102

Inlining CSS via ?inline query is broken when importing CSS/SCSS in JavaScript files #102

daltonboll commented Jul 22, 2024

webdiscus commented Jul 23, 2024

webdiscus commented Jul 23, 2024

webdiscus commented Jul 23, 2024

daltonboll commented Jul 23, 2024

webdiscus commented Jul 24, 2024 •

edited

Loading

daltonboll commented Jul 24, 2024 •

edited

Loading

webdiscus commented Jul 25, 2024

daltonboll commented Aug 3, 2024 •

edited

Loading

webdiscus commented Aug 3, 2024

daltonboll commented Aug 3, 2024

webdiscus commented Aug 8, 2024

webdiscus commented Aug 9, 2024

daltonboll commented Aug 10, 2024

Inlining CSS via ?inline query is broken when importing CSS/SCSS in JavaScript files #102

Inlining CSS via ?inline query is broken when importing CSS/SCSS in JavaScript files #102

Comments

daltonboll commented Jul 22, 2024

Current behaviour

Expected behaviour

Reproduction Example

Environment

Additional context

webdiscus commented Jul 23, 2024

webdiscus commented Jul 23, 2024

webdiscus commented Jul 23, 2024

daltonboll commented Jul 23, 2024

webdiscus commented Jul 24, 2024 • edited Loading

daltonboll commented Jul 24, 2024 • edited Loading

webdiscus commented Jul 25, 2024

daltonboll commented Aug 3, 2024 • edited Loading

webdiscus commented Aug 3, 2024

daltonboll commented Aug 3, 2024

webdiscus commented Aug 8, 2024

webdiscus commented Aug 9, 2024

daltonboll commented Aug 10, 2024

webdiscus commented Jul 24, 2024 •

edited

Loading

daltonboll commented Jul 24, 2024 •

edited

Loading

daltonboll commented Aug 3, 2024 •

edited

Loading