Support to resolve index.css

[lucasmotta]

Hey there,

I've been using this library for a while now and it has been working very well.
But I started on a new project, where they organise some of their CSS on folders, like this:

/style/typography/index.css
/style/typography/medium.css
/style/typography/large.css

So we can compose like:

.item {
  /* webpack can resolve the index.css for you */
  composes: size-sm bold from 'style/typography';
  
  /* or you can compose the file directly */
  composes: size-md from 'style/typography/medium';
}

That works fine on webpack, but this hook does not try to resolve index.css files if the given path is a folder. Is it possible to add such feature? I could try to submit a PR to include this.

Let me know!

[mightyaleksey]

Hi,

I guess you would like to use the shortcuts in the js files also for the initial imports. Like import styles from 'style/typography'.
Unfortunately, I'm not sure whether it is possible with the current implementation, but I'll look what can I do with it.

Thank you for your interest.

[lucasmotta]

Hey @sullenor, it's more like actually trying to resolve for a index.css if what you are trying to compose is a directory. I did a quick naive patch on the lib/index.js line 100 to include that feature:

if (lstatSync(filename).isDirectory()) {
  filename = join(filename, 'index.css')
}

That works just fine, so now I can compose a folder and it will resolve to the index.css file.

If you want, I can implement this properly (with tests) and take in consideration the extensions parameter too, so it could also look for index.scss, index.less, etc...

Does that make to you?

[mightyaleksey]

Actually, I want to move the resolving mechanism to the standalone postcss module and support the approximate resolving algorithm as the require has (check the package.main field and look for the index files). Also support the alias and extensions options like webpack does (https://webpack.js.org/configuration/resolve/#resolve-extensions).

At the current state I have finished the resolving step and need to finish the step with resolving dependencies in the proper order. So I think I'll be able to show the demo quite soon.

[mightyaleksey]

@lucasmotta hello,

I published a beta version to try it out (unfortunately haven't tested it thoroughly yet). You may try it out with npm install css-modules-require-hook@4.1.0-beta.

It should check the index.css file if you point a directory and also will check the package.json main field. Also uses the extensions option to check the file extensions, so you may use composes: A from 'style/typography/medium';.

Small implementation details. Require hooks uses now resolve-imports plugin instead of parser plugin.

[lucasmotta]

@sullenor nice one!! do you have a branch with the code for this beta version?

Just trying to figure out what are the new options now. Is there any way to pass options down to the postcss resolve-imports? So one can customise other bits, like the alias field too?

[mightyaleksey]

@lucasmotta the branch name is demo.

Actually the options haven't changed (haven't thought about public api). Mostly, I changed the set of plugins and passed the existing extensions option to the resolve-imports plugin.

I thought about adding option resolve, but looks like specifying extensions and resolve.extensions twice would be annoying :)