Problem using @Import rule to import a CSS which has nested @Import rules

[taefi]

Having the following project structure:

frontend/
|_ themes/
    |_ custom-theme/
        |_ app-styles/
        |   |_ views/
        |       |_ helloworld/
        |       |   |_ hello-world-style.css
        |       |_ masterdetail/
        |       |   |_ master-detail-style.css
        |       |_ view-styles.css
        |_ styles.css     

If view-styles.css contains @Imports like this:

@Import "./helloworld/hello-world-style.css";
@Import "./masterdetail/master-detail-style.css";

and import this file into styles.css, like this:

@Import "./app-styles/views/view-styles.css";

The application starts, but frontend errors appears like this:

ERROR in ./themes/custom-theme/styles.css
Module build failed (from ../node_modules/.pnpm/registry.npmjs.org/extract-loader/5.1.0/node_modules/extract-loader/lib/extractLoader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../../node_modules/@vaadin/theme-loader/theme-loader.js' in '/Users/soroosh/Downloads/my-project/frontend/themes/custom-theme'
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/webpack/[email protected]/node_modules/webpack/lib/Compilation.js:925:10
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/webpack/[email protected]/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/webpack/[email protected]/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/webpack/[email protected]/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/neo-async/2.6.2/node_modules/neo-async/async.js:2830:7
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/neo-async/2.6.2/node_modules/neo-async/async.js:6877:13
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/neo-async/2.6.2/node_modules/neo-async/async.js:2830:7
    at done (/Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/neo-async/2.6.2/node_modules/neo-async/async.js:2925:13)
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/webpack/[email protected]/node_modules/webpack/lib/NormalModuleFactory.js:449:23
    at /Users/soroosh/Downloads/my-project/node_modules/.pnpm/registry.npmjs.org/enhanced-resolve/4.5.0/node_modules/enhanced-resolve/lib/Resolver.js:213:14
 @ ./themes/custom-theme/custom-theme.generated.js 10:0-37 22:20-29
 @ ../target/flow-frontend/themes/theme-generated.js
 @ ./generated/vaadin.ts

ERROR in ./themes/custom-theme/styles.css
Module not found: Error: Can't resolve '../../../../../node_modules/@vaadin/theme-loader/theme-loader.js' in '/Users/soroosh/Downloads/my-project/frontend/themes/custom-theme'
 @ ./themes/custom-theme/styles.css -!../../../../../node_modules/.pnpm/registry.npmjs.org/css-loader/[email protected]/node_modules/css-loader/dist/cjs.js??ref--5-2!../../../../../node_modules/@vaadin/theme-loader/theme-loader.js??ref--5-3!/Users/soroosh/Downloads/my-project/frontend/themes/custom-theme/app-styles/views/addressform/address-form-view.css
 @ ./themes/custom-theme/custom-theme.generated.js
 @ ../target/flow-frontend/themes/theme-generated.js
 @ ./generated/vaadin.ts

Simply by removing the imports from view-styles.css the theme styles are being applied and only the view-specific styles are missing (which are not imported). Also by importing the view-specific styles directly into the styles.css it works without a problem.

Desired Behaviour:

To be able to use @Import rules in CSS files that have nested @Import rules.

Environment:

Vaadin: 19.0-SNAPSHOT
Flow: 6.0-SNAPSHOT
Vaadin-Spring: 16.0-SNAPSHOT
OS: MacOS BigSur 11.1
Browser: Chrome 87.0.4280.88

[caalador]

I noted while researching that you can have nested imports if the importer is located at the root level.
So having the theme structure with the files:

themes
└── my-theme
    ├── views
    │   ├── views-shared.css
    │   ├── main-view.css
    │   └── payments
    │      └── payment-view.css
    ├── view-imports.css
    ├── shared-imports.css
    └── styles.css

We can have the structure
with styles.css

@import url('shared-imports.css');

with shared-imports.css

@import url('views/views-shared.css');
@import url('view-imports.css');

with view-imports.css

@import url('views/main-view.css'):
@import url('views/payments/payment-view.css');

but we can not have an import in a sub directory so having for instance
styles.css

@import url('views/main-view.css');

where main-view.css

@import url('views-shared.css');

this will fail as it cant find the loaders.

[caalador]

Seems that this is from the extract-loader because if I remove it then all import versions compile fine.

[caalador]

This issue is the same as reported for the extract-loader peerigon/extract-loader#48

[pleku]

Just noting that this issue is waiting for extract-loader issue to be fixed and documented for now.

[Artur-]

Will this be resolved by moving to Vite?

[caalador]

Probably as we don't need the extract-loader with Vite.

[Artur-]

This was a problem only in webpack