Need a way to modify css asset path about postcss-copy HOT 7 CLOSED

Hi donnysim, can you show me the rest of your css gulp task config and if you can the structure project directory? so I can try to reproduce your error.

from postcss-copy.

Sure, created a bare minimum of the structure in the project to reproduce it

https://github.com/donnysim/postcss-pathing

from postcss-copy.

Hi @donnysim! thanks for taking the time to create the testing project.

I was testing your script and it's true in postcss-gulp sometimes you need to add the to option in postcss because postcss-copy needs the dest path of your CSS files to calculate the relative path between them and the assets.

It's probably that postcss is changing the sourcemap when you do that. You can do this to fix it:

...
}),
        ],{ // This fixes sourcemaps stop working
            to: '../public/css/limitless.css',
        }))
        .pipe(cleanCss())
        .pipe(rename({ basename: 'limitless' }))
        .pipe(sourceMaps.mapSources(() => 'limitless.less'))

from postcss-copy.

I tried it and that does not work, if I use to option then all I get in the mapSources is:

../../dashboard/assets/less/limitless.css
limitless.css

and I cant map it to the files that are included in the less file. If I remove the to option, I get:

limitless.css
_bootstrap/normalize.less
_bootstrap/print.less
_bootstrap/glyphicons.less
_bootstrap/scaffolding.less
_bootstrap/mixins/vendor-prefixes.less
_bootstrap/mixins/tab-focus.less
_bootstrap/mixins/image.less
_bootstrap/type.less
...

which are the imports in the less file. Didn't really think this behavior changed so I didn't include it :|

from postcss-copy.

If I modify defineCSSDestPath:

    if (opts.cssPath) {
        to = opts.cssPath;
    } else if (result.opts.to) {
        /**
         * if to === from we can't use it as a valid dest path
         * e.g: gulp-postcss comes with this problem
         *
         */
        to = _path2.default.resolve(result.opts.to) === from ? opts.dest : _path2.default.dirname(result.opts.to);
    } else {
        to = opts.dest;
    }

and add cssPath (without to property)

postCssCopy({
                basePath: 'dashboard/assets',
                dest: 'public/assets',
                cssPath: 'public/css',
                template: '[name].[hash].[ext]',
...

then I get it working how I need it - images are in public/assets folder, css paths reference correctly ../assets/..., sourcemaps work as intended by showing content.less:60 instead of limitless.css etc., but don't know if anything else fails.

from postcss-copy.

Ok, I've been testing again with different cases and I came to the next conclusion:

1. The problem with the sourcemap it's an issue related to postcss and the option to. postcss-copy use the to option in this case because we don't know what is the destination path until you call the gulp.dest.
   I don't want to add more custom methods to fix the issues of other libraries. I want to keep the plugin simple as I can.

2. This is only to take in count if you use the rule @import in less:
   postcss-copy was created to work with each CSS file that is preprocessing by postcss but in this case, the preprocessing is in charge of less and one of the things that a preprocesor does is concatenate the files based on the @import rules and postcss-copy can never be going to understand the paths inside of the final file.
   What I'm trying to say is that postcss-copy is never going to work if you @import other files because postcss-copy works in the scope of postcss not inside of less.

I'm really sorry if the plugin cannot help you in your workflow.
Maybe you can use this: https://github.com/less/less-plugin-inline-urls

About the sourcemap issue: You can define a custom evaluation in the mapSources:

.pipe(sourceMaps.mapSources(sourcePath => {
      return sourcePath // work with the module `path` to get what you need
}))

from postcss-copy.

It's ok, I'll just fork it to make my life easier than search for another plugin because I also need this for scss, not just less :D Thanks for taking time on this 👍

from postcss-copy.