Resolving import/compose css paths in node_module with version 2.0.0

[mbulfair]

• Operating System: OS X
• Node Version: 10.13.0
• NPM Version: 6.4.1
• webpack Version: 4.27.1
• css-loader Version: 2.0.0

Expected Behavior

Actual Behavior

Importing with css compose and import to a node module. In version 1.0.1 the ~ was not needed. In 2.0.0 it is. While in my local project I can change any references to this with no issue. However in the node_module/package/file.css if it doesn't have that same ~ then webpack/css loader can't resolve the path.

Code

Below works with 1x and partially with 2x,

also in the test of css, I am excluding a series of local node_modules, internal only packages. This may be some of the issue.

{
   loader: "css-loader",
              options: {
                modules: true,
                localIdentName: "[name]__[local]-[hash:base64:5]",
                url: false,
                importLoaders: 1
              }
            },

How Do We Reproduce?

Local File:

@value color-grey from "~@localpackage/styles/color.css";

.copyright {
  color: color-grey;
  composes: type-heading from "~@localpackage/theme/styles/typography.css";
  margin: 0;
  padding: 0;
}

Node Module

.type-heading {
  color: red
  composes: type-heading2 from "@localpackage/theme/styles/typography.css";
  margin: 0;
  padding: 0;
}

Error in resolving ☝️ with local webpack build

[alexander-akait]

@mbulfair fixing this error introduce problems in resolving algorithm and can introduce more bugs in future (other developers can forget about using ~ for modules and it is introduce more error for next releases). i need more time to investigate how better solve this problem. As workaround we can create simple loader and add this in documentation for this package.

[alexander-akait]

Why it is not easy. Let's see on:

a {
  background: url(@images/image.png);
}

Note: @ is valid symbol in any filesystem (known for me).

Now we resolve this as ./@images/image.png, but if we return resolving without ~ this can be resolving as:

• ./@image/image.png
• node_modules/@images/image.png

What is right resolving? Nobody knows, so we introduced ~ characters. it allows us to distinguish module requesting (from node_modules) and usual require.

In JS this problem doesn't exists because we have RFC on require where described what require('@images/image.png') mean load image.png from @image repo in node_modules. There is no such thing in css.

Why we interpreted url('image.png'), url('something/image.png') and url(@something/image.png) as relative request (i.e. ./image.png, ./something/image.png and ./@something/image.png)? For better compatibility with existing libraries and frameworks.

Feel free to feedback.

[vertic4l]

Seems to me to be the same issue with sass-loader webpack/sass-loader#556

Somehow resolving was changed in latest release which breaks many project builds.
Maybe you could add the same fix? webpack/sass-loader@f41f791

[alexander-akait]

@vertic4l it is difference issues, and doesn't exists in css-loader

Somehow resolving was changed in latest release which breaks many project builds

What currently it is break?

[vertic4l]

@evilebottnawi well, my issue is gone. we had v0.28.x and the minimize options is gone since v1.0.
think i can remove css-loader now because sass-loader can handle the import also.

Thanks anyway! :)

Edit: can't remove it... mini-css-extract-plugin breaks without it.
Edit2: Thanks @evilebottnawi , just re-added css-loader. works as expected to me.

[alexander-akait]

@vertic4l without css-loader your @import and urls can't work, also locals (i.e. classes and @value) doesn't work too

[alexander-akait]

What is broken? Issue with css modules resolving as described in first comment?

[Amwam]

I'm seeing a similar issue, where the NODE_PATH isn't being respected when using compose

For instance:

my_code/css/component/myModule.css
my_code/js/component/otherModule.css

Having NODE_PATH set to my_code
Used to allow otherModule.css
to compose using

composes: thing from 'css/component/myModule.css'

instead now, only relative paths worth

composes: thing from '../../css/component/myModule.css'

[alexander-akait]

@Amwam what is NODE_PATH? Don't have documentation about NODE_PATH

[Amwam]

@evilebottnawi NODE_PATH environment variable allows you to set the module resolution,
If you folder structure is
/home/users/test/thing/code

setting NODE_PATH as export NODE_PATH=/home/users/test/thing
would allow you to require from just code (require('code/myComponent'))

https://github.com/nodejs/node/blob/1f85ea979ccef3c52ec4ca3263306e527b625498/doc/api/modules.md#loading-from-the-global-folders