onImport has wrong file paths

[jednano]

It looks to me like the first arg of the onImport callback is the file that's doing the importing and every subsequent arg is a file that it imports. Is that correct? If so, it's definitely not working properly. I have 3 files:

/* global.css */
@import foo;

/* page1.css */
@import foo;
@import bar;

/* page2.css */
@import bar;
@import foo;

With the following configuration:

require('postcss-import')({
    path: 'styles/blocks',
    onImport: function(files) {
        console.log('========== import ==========');
        files.forEach(function(file) {
            gutil.log('import:', file);
        });
    }
}),

And here's what I get in the shell:

13:53 $gulp styles
[13:54:12] Using gulpfile z:\gulpfile.js
[13:54:12] Starting 'styles'...
[13:54:12] Finished 'styles' after 37 ms
========== import ===========
[13:54:12] import: z:\styles\sheets\global\global.css
[13:54:12] import: z:\styles\blocks\block-foo.css
========== import ===========
[13:54:12] import: z:\styles\sheets\global\global.css
[13:54:12] import: z:\styles\blocks\block-foo.css
[13:54:12] import: z:\styles\blocks\block-bar.css
========== import ===========
[13:54:12] import: z:\styles\sheets\global\global.css
[13:54:12] import: z:\styles\blocks\block-bar.css
[13:54:12] import: z:\styles\blocks\block-foo.css

Notice how global.css is mentioned 3 times here, when it should have mentioned page1.css and page2.css.

Any ideas?

[MoOx]

onImport is just a callback that passes ALL imported files on each import. It's mainly used right now in cssnext-loader and works as expected.

I am guessing you are using multiple entries with gulp so maybe it needs some adjustements for that. PR with tests are always welcome :)

[jednano]

global.css is never imported though, so I don't understand how this is working properly. Also, is shows the correct import order for each respective file, which makes you wonder. Everything but the first argument looks correct.

[MoOx]

What is your use case for this callback ? Can't you just shift the first element ? Right now the only usage I know is in cssnext-loader that use it to register files for handling the cache during development.

[jednano]

@MoOx thanks for your quick responses.

I think the issue is on index.js, line 49 where it checks if !options.from. This will only be true on the first iteration, which means the first file to import is always going to be the first file on the input paths. I just tried removing that check and everything seems to work fine.

13:53 $gulp styles
[13:54:12] Using gulpfile z:\gulpfile.js
[13:54:12] Starting 'styles'...
[13:54:12] Finished 'styles' after 37 ms
========== import ===========
[13:54:12] import: z:\styles\sheets\global\global.css
[13:54:12] import: z:\styles\blocks\block-foo.css
========== import ===========
[13:54:12] import: z:\styles\sheets\page1\page1.css
[13:54:12] import: z:\styles\blocks\block-foo.css
[13:54:12] import: z:\styles\blocks\block-bar.css
========== import ===========
[13:54:12] import: z:\styles\sheets\page2\page2.css
[13:54:12] import: z:\styles\blocks\block-bar.css
[13:54:12] import: z:\styles\blocks\block-foo.css

As for my use case, I'm trying to figure out the best way to use both postcss-nested and postcss-bem-linter. Unfortunately, it looks like neither onImport or transform will help me achieve this goal.

I'm beginning to think a processors option might be useful in this case, so I can process individual files through the BEM linter. This doesn't work after the imports have been done, because the BEM linter expects a single /** @define block; */ comment at the top of each file. Once you import and concatenate these blocks together in the same file, it barfs. See postcss/postcss-bem-linter#48.

[jednano]

I'm also concerned about preserving sourcemaps along these transforms.

[MoOx]

sourcemap should already be fine.
Please track #43 for the from thing.
I just created a new one for the processing when importing (I personally need it too) #45

[MoOx]

Fix released as 6.1.0