css-loader doesn't export Webpack's stats when @import is used

[tanin47]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

The Webpack's stats doesn't seem to contain any data related to @import

What is the expected behavior?

When reading a file from @import, ensure that the imported file path and the path of the file contains @import are written to Webpack's stats (https://webpack.js.org/api/stats/).

I'm still new to Webpack, so I might not understand some stuffs correctly. But I'm quite certain that the css file path isn't in Webpack's stats.

If this is a feature request, what is motivation or use case for changing the behavior?

We would like css-loader to output the file it reads to Webpack's stats. We use this data to track changes in files and their dependencies, so that we can hot-reload code correctly.

[alexander-akait]

@tanin47 It is expected because any css import become js module. Better create this issue inside webpack.

[tanin47]

This explains why Webpack's stats contains the content of the css import, for example:

{ id: 17,
  identifier: '/home/tanin/projects/sbt-vuefy/node_modules/css-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!/home/tanin/projects/sbt-vuefy/src/test/scala/givers/vuefy/assets/vue/component-a.vue',
  name: '/home/tanin/projects/sbt-vuefy/node_modules/css-loader!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue/component-a.vue',
  index: 2,
  index2: 1,
  size: 224,
  cacheable: true,
  built: true,
  optional: false,
  prefetched: false,
  chunks: [ 0 ],
  assets: [],
  issuer: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/css-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!/home/tanin/projects/sbt-vuefy/src/test/scala/givers/vuefy/assets/vue/component-a.vue',
  issuerId: 16,
  issuerName: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader!/home/tanin/projects/sbt-vuefy/node_modules/css-loader!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue/component-a.vue',
  profile: undefined,
  failed: false,
  errors: 0,
  warnings: 0,
  reasons:
   [ { moduleId: 16,
       moduleIdentifier: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/css-loader/index.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!/home/tanin/projects/sbt-vuefy/src/test/scala/givers/vuefy/assets/vue/component-a.vue',
       module: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader!/home/tanin/projects/sbt-vuefy/node_modules/css-loader!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue/component-a.vue',
       moduleName: '/home/tanin/projects/sbt-vuefy/node_modules/vue-style-loader!/home/tanin/projects/sbt-vuefy/node_modules/css-loader!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!/home/tanin/projects/sbt-vuefy/node_modules/sass-loader/lib/loader.js!/home/tanin/projects/sbt-vuefy/node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue/component-a.vue',
       type: 'cjs require',
       userRequest: '!!../../../../../../../node_modules/css-loader/index.js!../../../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-f8aaa26e","scoped":true,"hasInlineConfig":false}!../../../../../../../node_modules/sass-loader/lib/loader.js!../../../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./component-a.vue',
       loc: '4:14-396' } ],
  usedExports: true,
  providedExports: null,
  optimizationBailout: [],
  depth: 2,
  source: 'exports = module.exports = require("../../../../../../../node_modules/css-loader/lib/css-base.js")(false);\n// imports\n\n\n// module\nexports.push([module.id, ".beautiful-box[data-v-f8aaa26e]{font-size:16px}", ""]);\n\n// exports\n' }

Notice .beautiful-box, which is the content in the css file.

However, the css file path is nowhere to be found.

Could you point to the code where it converts css import to a js module? It might be helpful to me. I want to try to solve this problem by leaving a trail that contains the css file path.

Also, I'll file an issue in Webpack's project. Thank you @evilebottnawi

[alexander-akait]

@tanin47 Sorry for delay, a lot of work 😞 Problem still exists?

[tanin47]

Yes. I wonder if you can guide me on how to solve this problem.

For more context, I'd like to detect CSS dependency. It is essential for hot-reloading code in Playframework. See: GIVESocialMovement/sbt-vuefy#20

[alexander-akait]

@tanin47 Each @import produce require (i.e. it is module). What you expected in stats? And why you need this?

[tanin47]

I expect a full path of the CSS file because Playframework would be able to track dependencies and re-compile the files needed.

Currently, as I posted in the earlier comment, the file path is not outputted but the content of the CSS file is.

[alexander-akait]

@tanin47 it is expected because it is module, you need custom loader for this. It is not regular use case. You can use issuer to detect original file name, also you can use postcss-loader.

[tanin47]

Thank you for the pointers. I'll let you know if I have more questions.

[alexander-akait]

Feel free to feedback