Feature request: expose hook to resolve imports/composes

[andersekdahl]

When using this module with Webpack I get an error because typed-css-modules tries to resolve an import/composes path but we have custom path handling in Webpack so typed-css-modules won't be able to resolve it.

Would you mind exposing a hook to let the user of the module resolve paths?

[Quramy]

Hi @andersekdahl

I can't imagine your directory structure and configuration of Webpack, so I can't grasp the feature you request... Please send me your repository or gist.

[andersekdahl]

Can't give you the repo since it's private unfortunately, but what we have is for example a directory structure like this:

/Features
/Features/MyFeature/
/Features/MyFeature/MyFile.scss
/Styles
/Styles/objects.scss

Then we have a Webpack resolve alias for Styles to that folder, so in /Features/MyFeature/MyFile.scss I can do composes: something from 'styles/objects.scss and Webpack will find it. But since typed-css-modules don't know about the resolve alias it will fail trying to find the file.

[Quramy]

Ok, I got it. I'll consider the feature to customize the path resolver.

[andersekdahl]

Thanks! Another option for us since we use Webpack is to be able to tell typed-css-modules to ignore references inside a file since Webpack will handle that for us.

[Quramy]

Your another option seems good !(And it seems easy to implement rather than custom resolver).

[andersekdahl]

Just tried the new release, and the errors are gone which is nice. But it seems that no *.d.ts is created for the files containing a composes that typed-css-modules can't find. Is that correct? In that case I apologize, what I was looking for was to still generate the *.d.ts file but to ignore any invalid paths inside it.

So if I have:

myfile.scss
------------
.myClass {
  composes: something from 'path/that/cant/be/found.scss';
  background: red;
}

I'd still want a myfile.scss.d.ts file containing:

export const string myClass;

Wepack will find path/that/cant/be/found.scss for and call my loader which will call typed-css-modules with the absolute path to that file, so I will still get the .d.ts file for that.

[Quramy]

thanks for your feedback. I'll check that typed-css-modules works as you want.

[Quramy]

@andersekdahl , I've add a test case for checking your issue at 0e7767b . And typed-css-modules creates the following .d.ts and I think it works as you intend:

export const string myClass;

[andersekdahl]

Thanks for the quick reply! I'll dig a little deeper to see if the error is on my side.

[andersekdahl]

I've tracked down the issue and created another issue about it: #5

[zhenwenc]

Hi, recently I came across an issue with @import as follows, positing here as its discussing import/composes.

parent.css

.a { color: red; }
.b { color: green; }

child.css

@import './parent.css';
.x { compose: a from './parent.css'; }

The results after processing with typed-css-modules are:

parent.css.d.ts

export const a: string;
export const b: string;

child.css.d.ts

export const x: string;

However, if I use typed-css-modules as a Webpack loader, because of I also configured postcss-import, then the parent.css.d.ts would looks like:

export const a: string;
export const b: string;
export const x: string;

My question is, should a and b exists in parent.css.d.ts?

Many thanks!