Completely Fails on Windows

[joezimjs]

I tried using css-modulesify and it kept having issues with loading my files. I traced the issues back to this project. I cloned the repo and ran the tests and every single one failed. It keeps injecting C:\C:\ into the file path where it thinks the "root" is (that's how it appears to me anyway).

Full Test Output:

> css-modules-loader-core@0.0.12 test C:\Users\u659408\localhost\css-modules-loader-core
> mocha --compilers js:babel/register



  test-cases
    1) should compose node module
    2) should localise export
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-dependencies\b.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-dependencies\\b.css' }
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-dependencies\c.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-dependencies\\c.css' }
    3) should multiple dependencies
    4) should simple export
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\single-import-export\colors.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\single-import-export\\colors.css' }
    5) should single import export

  cssi
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\cssi\C:\C:\interchange-format\colors.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\cssi\\C:\\C:\\interchange-format\\colors.css' }
    6) should interchange format
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\cssi\C:\C:\pseudo-variables\colors.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\cssi\\C:\\C:\\pseudo-variables\\colors.css' }
    7) should pseudo variables

  multiple sources
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-sources\b.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-sources\\b.css' }
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-sources\c.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-sources\\c.css' }
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-sources\b.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-sources\\b.css' }
    8) should multiple sources


  0 passing (251ms)
  8 failing

  1) test-cases should compose node module:

      AssertionError: '._C_C_C_compose_node_module_cool_styles_foo__example {\n  color: #F00;\n}\n._C_C_compose_node_module_source__foo {\n}\n' == '._compose_node_module_cool_styles_foo__example {\n  color: #F00;\n}\n._compose_node_module_source__foo {\n}\n'
      + expected - actual

      -._C_C_C_compose_node_module_cool_styles_foo__example {
      +._compose_node_module_cool_styles_foo__example {
         color: #F00;
       }
      -._C_C_compose_node_module_source__foo {
      +._compose_node_module_source__foo {
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  2) test-cases should localise export:

      AssertionError: '._C_C_localise_export_source__one {\n  color: red;\n}\n._C_C_localise_export_source__two {\n  color: green;\n}\n._C_C_localise_ == '._localise_export_source__one {\n
color: red;\n}\n._localise_export_source__two {\n  color: green;\n}\n._localise_export_sourc
      + expected - actual

      -._C_C_localise_export_source__one {
      +._localise_export_source__one {
         color: red;
       }
      -._C_C_localise_export_source__two {
      +._localise_export_source__two {
         color: green;
       }
      -._C_C_localise_export_source__three {
      +._localise_export_source__three {
         color: blue;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  3) test-cases should multiple dependencies:

      AssertionError: ':import("./b.css") {\n  i__imported_b1_0: b1;\n  i__imported_b2_1: b2;\n}\n:import("./c.css") {\n  i__imported_c_2: c;\n}\n._C_ == '._multiple_dependencies_d__d1 {\n
color: #d1d1d1;\n}\n._multiple_dependencies_d__d2 {\n  color: #d2d2d2;\n}\n._multiple_depend
      + expected - actual

      -:import("./b.css") {
      -  i__imported_b1_0: b1;
      -  i__imported_b2_1: b2;
      +._multiple_dependencies_d__d1 {
      +  color: #d1d1d1;
       }
      -:import("./c.css") {
      -  i__imported_c_2: c;
      +._multiple_dependencies_d__d2 {
      +  color: #d2d2d2;
       }
      -._C_C_multiple_dependencies_source__a {
      +._multiple_dependencies_b__b1 {
      +  color: #b1b1b1;
      +}
      +
      +._multiple_dependencies_b__b2 {
      +  color: #b2b2b2;
      +}
      +._multiple_dependencies_c__c {
      +  color: #ccc;
      +}
      +._multiple_dependencies_source__a {
         color: #aaa;
       }


      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  4) test-cases should simple export:

      AssertionError: '._C_C_simple_export_source__localName {\n  color: red;\n}\n\n._C_C_simple_export_source__localName:hover {\n  color: blue;\n}\n == '._simple_export_source__localName {\n  color: red;\n}\n\n._simple_export_source__localName:hover {\n  color: blue;\n}\n'
      + expected - actual

      -._C_C_simple_export_source__localName {
      +._simple_export_source__localName {
         color: red;
       }

      -._C_C_simple_export_source__localName:hover {
      +._simple_export_source__localName:hover {
         color: blue;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  5) test-cases should single import export:

      AssertionError: ':import("./colors.css") {\n  i__imported_blackShadow_0: blackShadow;\n
i__imported_redBorder_1: redBorder;\n}\n._C_C_single_im == '._single_import_export_colors__blackShadow {\n  box-shadow: 0 0 10px -2px black;\n}\n\n._single_import_export_colors__redBorder
      + expected - actual

      -:import("./colors.css") {
      -  i__imported_blackShadow_0: blackShadow;
      -  i__imported_redBorder_1: redBorder;
      +._single_import_export_colors__blackShadow {
      +  box-shadow: 0 0 10px -2px black;
       }
      -._C_C_single_import_export_source__localName {
      +
      +._single_import_export_colors__redBorder {
      +  border: 1px solid red;
      +}
      +._single_import_export_source__localName {
         color: red;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  6) cssi should interchange format:

      AssertionError: ':import("./colors.css") {\n  i__tmp_import_djhgdsag: blackShadow;\n}\n\n.x__single_import_export_source__localName {\n  color:  == '.x__single_import_export_colors__blackShadow {\n  box-shadow: 0 0 10px -2px black;\n}\n.x__single_import_export_source__localNa
      + expected - actual

      -:import("./colors.css") {
      -  i__tmp_import_djhgdsag: blackShadow;
      +.x__single_import_export_colors__blackShadow {
      +  box-shadow: 0 0 10px -2px black;
       }
      -
       .x__single_import_export_source__localName {
         color: red;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  7) cssi should pseudo variables:

      AssertionError: ':import("./colors.css") {\n  i__black: black;\n  i__white: white;\n}\n\n.x__lol {\n  color: i__black;\n  background: i__white;\ == '\n.x__lol {\n  color: #222;\n  background: #ddd;\n}\n'
      + expected - actual

      -:import("./colors.css") {
      -  i__black: black;
      -  i__white: white;
      -}

       .x__lol {
      -  color: i__black;
      -  background: i__white;
      +  color: #222;
      +  background: #ddd;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  8) multiple sources should multiple sources:

      AssertionError: ':import("./b.css") {\n  i__imported_b_0: b;\n}\n:import("./c.css") {\n
i__imported_c_1: c;\n}\n._C_C_multiple_sources_source1_ == '._multiple_sources_d__d {\n  color: #ddd;\n}\n._multiple_sources_b__b {\n  color: #bbb;\n}\n._multiple_sources_c__c {\n  color:
      + expected - actual

      -:import("./b.css") {
      -  i__imported_b_0: b;
      +._multiple_sources_d__d {
      +  color: #ddd;
       }
      -:import("./c.css") {
      -  i__imported_c_1: c;
      +._multiple_sources_b__b {
      +  color: #bbb;
       }
      -._C_C_multiple_sources_source1__a {
      +._multiple_sources_c__c {
      +  color: #ccc;
      +}
      +._multiple_sources_source1__a {
         color: #aaa;
       }
      -:import("./b.css") {
      -  i__imported_b_0: b;
      -}
      -._C_C_multiple_sources_source2__foo {
      +._multiple_sources_source2__foo {
         color: #f00;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:48:18

[geelen]

Can you give #17 a try to see if that fixes this?

[joezimjs]

I threw a pull request on top of @sullenor's updates in #17 with some debugging code so that you guys could get an idea of what is happening more behind the scenes: https://github.com/sullenor/css-modules-loader-core/pull/1

Hopefully that should be enough for you guys to figure out what's happening. I don't really understand half the logic that is happening in those files, so I wasn't able to contribute any code changes that would actually help fix the issue.

[joezimjs]

Has anyone had a chance to look into this at all? Do you need more information?

[mightyaleksey]

Thank you for your effort. I tried to look into this, but looks like the problem lies a bit deeper then I thought. I'll to get a windows image and debug it manually.

[joezimjs]

Great. Thanks

[tivac]

Any progress here? The basic css-modulesify functionality works but anything involving paths like composes: foo from "../bar.css" still blows up with horrible path errors.

I'm digging, and it runs into trouble here, maybe css-modulesify is passing bad args to FileSystemLoader.fetch()? It's tough for me to tell what that method is expecting for args so far.

[joezimjs]

@tivac good catch. I never realized that it was only failing for the composed files. I really like the composing functionality, but at least it can be worked around using PostCSS plugins for variables and/or mixins. I probably won't do that, though. I'm in the middle of setting up with WebPack and seeing what it can offer me vs Browserify and I can probably live with their css-loader as an alternative, but it'd be nice to have this working for everyone anyway.

[tivac]

Any news on this? @geelen? @sullenor?

[joezimjs]

I haven't heard anything. I've just moved on to webpack. It's more integrated and works better for me anyway.

[joeljeske]

I know this is very old... but setting the root param / arg for the FileSystemLoader to "" on windows fixes this issue.