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

Issue with the navbar toggler not displaying the list items

Padding-left may cause text to not wrap correctly

Experimenting with the routerLink directive in Angular 2

Preserve StepContent information within Material-ui Stepper during updates to the active step

Creating a table and populating its cells with values all within the confines of a single function

Retrieve information according to the object ID with AngularJS UI-Router and $stateParams

Error: Unexpected token '<' encountered in Vue causing SyntaxErrorParsed: the parser expected an expression but found '<' instead

Angular 8 experiencing unexpected collision issues

Converting the structure of an object into an array structure for highcharts can be achieved through

Changing colors using JavaScript: A step-by-step guide

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

Vue.js has encountered a situation where the maximum call stack size has been exceeded

conceal a division beneath a YouTube video frame upon clicking

Extracting content from a concealed frame and displaying it on a visible frame via javascript

"Navigate back to a previous page in Vue Router without having to

Implementing a click event on a button within an infowindow on Google Maps in Angular

The TransferList component in Material UI does not update its state based on props when using the useState

What is the best way to load a component every time the function is called?

Modifying attributes of an object within a document using Mongoose

Mocking objects in unit test cases to simulate real-life scenarios and test the