ES6 import of CSS file results in string output instead of object

Question

ES6 import of CSS file results in string output instead of object

Too long; Didn't read

I'm facing an issue where the css file I import into a typescript module resolves to a string instead of an object. Can someone help me understand why this is happening?

For Instance

// preview.ts

import test from './src/assets/test.theme.css';

// also tried this:
// import * as test from './src/assets/test.theme.css';

console.log('typeof test: ', typeof test);
console.log(test);

What's displayed on the console: https://i.stack.imgur.com/j30hP.png

In-depth Explanation

Currently, I am setting up a Storybook for my Angular12 component library.

To provide different themes, I intend to utilize the

@etchteam/storybook-addon-css-variables-theme

plugin, which mentions the inline loader syntax of Webpack in its documentation.

import myTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!./assets/my-theme.css';

Upon implementing this in my code, my browser console started throwing errors

Error: myTheme.use is not a function

While investigating, I discovered that the imported stylesheet isn't an evaluated javascript object but rather a string containing the source code created by the style-loader.

I also found that this issue extends beyond the style-loader and applies to other loaders like css-loader, raw-loader, etc.

This problem isn't limited to the inline loader syntax and also occurs with loaders defined in a basic webpack configuration.

Environment details:

Angular 12
Webpack 5

Replication

I have created a GIT repository demonstrating the problem.

The readme file explains how to reproduce the issue.

javascript css angular webpack import

Answer 1

Answer №1

Hooray! The problem has been resolved!

Investigation

The root issue lies within the webpack configuration generated by the @angular-devkit/build-angular package. I delved into this by debugging a new angular12 application (you can view it here).

By setting a break-point at

/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js

, function: generateWebpackConfig(...), I was able to examine the final webpackConfig object in the debugger.

The relevant rule appears as follows:

The crucial part is the rule that defines the module type as asset/source, directing webpack not to assess the loader's result.

https://i.stack.imgur.com/6g0ij.png

Resolution Approach 1: inline loader

With insights from alexander-kait and his valuable suggestions on this issue, I discovered an inline-loader syntax that supersedes webpack's module declaration:

import Test from 'test.css.webpack[javascript/auto]!=!!!style-loader?injectType=lazyStyleTag!css-loader!./test.css';

console.log(typeof Test); // output: object
console.log(Test); // output: Object { use: () => void, unuse: () => void }
Test.use(); // this should usually be called by a theme switcher...

I am unsure about the url pattern here, as it seems to be an undocumented feature, but my assumption is that it resembles

<query-pattern>.webpack[<module-type>]!=!<loaders><query>

.

Yet, due to its undocumented nature, I displayed caution in utilizing it.

Resolution Approach 2: webpackConfig customization

Given the context of storybook, I opted to customize the webpack configuration following the guidance in the storybook documentation.

My solution necessitates establishing a naming convention (e.g. *.theme.css).

// .storybook/main.js

module.exports = {
  webpackFinal: async (config) => {

    // exclude *.theme.css from the *.css ruleset
    config.module.rules.find(rule => '.css'.match(rule.test)).exclude = [ /\.(?:theme\.css)$/i ];

    // add a rule for *.theme.css
    config.module.rules.push({
      test: /\.(?:theme\.css)$/i,
      use: [
        { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
        'css-loader',
      ],
    });
  },
};

With these directives in place, I can now easily execute the following:

// preview.js

import LightTheme from './light.theme.css';
import DarkTheme from './dark.theme.css';

setupThemeSwitcher(LightTheme, DarkTheme);

Please note that the setupThemeSwitcher function serves as pseudo code for illustration purposes only. In practice, I utilize the @etchteam/storybook-addon-css-variables-theme addon...

Answer 2

Hooray! The problem has been resolved!

Investigation

The root issue lies within the webpack configuration generated by the @angular-devkit/build-angular package. I delved into this by debugging a new angular12 application (you can view it here).

By setting a break-point at

/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js

, function: generateWebpackConfig(...), I was able to examine the final webpackConfig object in the debugger.

The relevant rule appears as follows:

The crucial part is the rule that defines the module type as asset/source, directing webpack not to assess the loader's result.

https://i.stack.imgur.com/6g0ij.png

Resolution Approach 1: inline loader

With insights from alexander-kait and his valuable suggestions on this issue, I discovered an inline-loader syntax that supersedes webpack's module declaration:

import Test from 'test.css.webpack[javascript/auto]!=!!!style-loader?injectType=lazyStyleTag!css-loader!./test.css';

console.log(typeof Test); // output: object
console.log(Test); // output: Object { use: () => void, unuse: () => void }
Test.use(); // this should usually be called by a theme switcher...

I am unsure about the url pattern here, as it seems to be an undocumented feature, but my assumption is that it resembles

<query-pattern>.webpack[<module-type>]!=!<loaders><query>

.

Yet, due to its undocumented nature, I displayed caution in utilizing it.

Resolution Approach 2: webpackConfig customization

Given the context of storybook, I opted to customize the webpack configuration following the guidance in the storybook documentation.

My solution necessitates establishing a naming convention (e.g. *.theme.css).

// .storybook/main.js

module.exports = {
  webpackFinal: async (config) => {

    // exclude *.theme.css from the *.css ruleset
    config.module.rules.find(rule => '.css'.match(rule.test)).exclude = [ /\.(?:theme\.css)$/i ];

    // add a rule for *.theme.css
    config.module.rules.push({
      test: /\.(?:theme\.css)$/i,
      use: [
        { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
        'css-loader',
      ],
    });
  },
};

With these directives in place, I can now easily execute the following:

// preview.js

import LightTheme from './light.theme.css';
import DarkTheme from './dark.theme.css';

setupThemeSwitcher(LightTheme, DarkTheme);

Please note that the setupThemeSwitcher function serves as pseudo code for illustration purposes only. In practice, I utilize the @etchteam/storybook-addon-css-variables-theme addon...

Answer 3

Answer №2

It seems like there is an error in the configuration of your Webpack. Instead of having nested rules property, you should use the use property:

{
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  }

Check out more about css-loader on webpack's official website

Answer 4

It seems like there is an error in the configuration of your Webpack. Instead of having nested rules property, you should use the use property:

{
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  }

Check out more about css-loader on webpack's official website

Answer 5

Answer №3

Apologies, I need to retract my previous statement. @Akxe's comment did not resolve my issue as I had hoped. Even after using the import statement import * as test from '...', the problem still persists.

To showcase the issue, I have created a GIT Repository. The repro and problem are detailed in the included readme.md file.

It appears that Webpack is failing to properly interpret the output of the loader.

This issue extends beyond just the css-loader; similar results happen with raw-loader, sass-loader, style-loader, and others.

My ultimate objective is to dynamically load theme files into a storybook environment. I am attempting to follow the instructions provided by @etchteam/storybook-addon-css-variables-> theme.

Answer 6

Apologies, I need to retract my previous statement. @Akxe's comment did not resolve my issue as I had hoped. Even after using the import statement import * as test from '...', the problem still persists.

To showcase the issue, I have created a GIT Repository. The repro and problem are detailed in the included readme.md file.

It appears that Webpack is failing to properly interpret the output of the loader.

This issue extends beyond just the css-loader; similar results happen with raw-loader, sass-loader, style-loader, and others.

My ultimate objective is to dynamically load theme files into a storybook environment. I am attempting to follow the instructions provided by @etchteam/storybook-addon-css-variables-> theme.

Answer 7

Answer №4

Dealing with storybook and this particular extension presented me with a similar challenge, although I am loading .scss files. I customized solution 2 to fit my specific .scss scenario, and it ended up working perfectly. Solution 1 proved to be elusive for me, but like you mentioned, it seemed hacky compared to the cleaner approach of solution 2 in my view. I truly appreciate you sharing this solution, as I had been struggling for hours before finding it.

Answer 8

Dealing with storybook and this particular extension presented me with a similar challenge, although I am loading .scss files. I customized solution 2 to fit my specific .scss scenario, and it ended up working perfectly. Solution 1 proved to be elusive for me, but like you mentioned, it seemed hacky compared to the cleaner approach of solution 2 in my view. I truly appreciate you sharing this solution, as I had been struggling for hours before finding it.

ES6 import of CSS file results in string output instead of object

Too long; Didn't read

For Instance

In-depth Explanation

Replication

Answer №1

Investigation

Resolution Approach 1: inline loader

Resolution Approach 2: webpackConfig customization

Answer №2

Answer №3

Answer №4

Similar questions

How can you position the input cursor at the end of the default text when navigating through fields with the tab key?

Validating (Update database with correct email and token)

Ensure every individual input field in a Bootstrap form is validated using JavaScript before submitting the form

Converting Typescript objects containing arrays into a single array

ReactJS encountered an error: Module Build failed due to a SyntaxError caused by an unexpected token '<'

Why does my event dispatch only run once upon form submission in Svelte JS?

Obtaining a Slug in the Server-Side Layout of a Next.js Component

How to Set a Button as Inline Text in a React Native Component

Using Node.js to display the outcome of an SQL query

Running JavaScript function from AJAX response containing both HTML and JavaScript code

The server is unable to process your request to /graphql

Creating a multi-level signup page in Angular 4 using Bootstrap

What steps should I take to eliminate the white gap between the paragraph and the footer on my webpage?

Update the color of the label on the ng2-charts/charts.js pie chart

The XMLHttpRequest response states that the preflight request did not meet the access control check requirements

Converting a JavaScript array into JSON using PHP

Angular dropdown list is malfunctioning when a value is selected

Verify if the Observable (HTTP request) has provided a response, and if not, hold for it?

Troubleshooting a cross-origin resource sharing problem in Express.js

I am facing an issue in my Vue Project where the CSS does not recognize URLs enclosed in quotes