search

skyrpex / gulp-extract-css-urls

Imports to the pipeline all the CSS assets included with url()
0 stars 0 forks source link

TypeError when running the plugin #1

Open Dinistro opened 8 years ago

Dinistro commented 8 years ago

When I try to run this code: 

return gulp.src('oblique-ui.css', {cwd : 'node_modules/oblique-ui/dist/css'})
      .pipe(extractCssUrls())
      .pipe(debug());

I get this error message:

TypeError: must start with number, buffer, array or string
    at fromObject (buffer.js:140:11)
    at new Buffer (buffer.js:62:10)
    at Converter.toBase64 (/home/dev/development/git-projects/oblique-reactive2/node_modules/convert-source-map/index.js:63:10)
    at Converter.toComment (/home/dev/development/git-projects/oblique-reactive2/node_modules/convert-source-map/index.js:67:21)
    at DestroyableTransform._transform (/home/dev/development/git-projects/oblique-reactive2/node_modules/gulp-extract-css-urls/lib/index.js:95:87)
    at DestroyableTransform.Transform._read (/home/dev/development/git-projects/oblique-reactive2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/home/dev/development/git-projects/oblique-reactive2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/home/dev/development/git-projects/oblique-reactive2/node_modules/readable-stream/lib/_stream_writable.js:335:12)
    at writeOrBuffer (/home/dev/development/git-projects/oblique-reactive2/node_modules/readable-stream/lib/_stream_writable.js:321:5)
    at DestroyableTransform.Writable.write (/home/dev/development/git-projects/oblique-reactive2/node_modules/readable-stream/lib/_stream_writable.js:248:11)

As far as I know, the file.sourceMap in the index.js is undefinied and causes this error.

damirm commented 8 years ago

Have the same issue.

skyrpex commented 8 years ago

Will take a look as soon as I have some time ⌚

showcasefloyd commented 5 years ago

Has anyone looked at this issue? I'm trying to use the plug in and I'm getting the same error.

"TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type undefined"

skyrpex commented 5 years ago

I'm sorry about that, I don't have time for this project... Not even using gulp for years anymore

showcasefloyd commented 5 years ago

Too bad, this seem like the perfect tool for something I was working on. I'm happy to try and do a PR and fix it. Any ideas what might be causing the issue?

skyrpex commented 5 years ago

Looking at the error stack, the line that throws is https://github.com/skyrpex/gulp-extract-css-urls/blob/master/lib/index.js#L95.

Maybe result.code is undefined, and maybe the reason for that is an unexpected error somewhere above.

skyrpex commented 5 years ago

I could spend some minutes on this if somebody created a minimal repository to reproduce the error.

showcasefloyd commented 5 years ago

So I spent about 3 hours trying to get this to work and I didn't have much luck. It might be that I don't understand if I'm using this gulp plugin correctly, but I'm not sure.

Basically I have a CSS file that I'm building using gulp. Inside the CSS file are a handful of "background-image: url()' property tags that are pointing to base64-encoded image files on a CDN that I want to pull into my locally directory.

I tried a lot of basic things first to fix source including updating the the packages and rebuilding the library, but nothing seem to work for me.

I will say that I think part of the problem I was having was the plugin was assuming that the css file had a sourcemap. Mine didn't at first but then I installed the "gulp-sourcemap" plugin and had it producing both an inline comment style sourcemap and then a seperate file version linked to my css file, but neither seem to help.

showcasefloyd commented 5 years ago

Yeah for me a lot of the issue started here "file.sourceMap" on line 91. If there is no sourceMap then that makes sense that the file.result would through an error.

So what exactly is --

convertSourceMap .fromObject(file.sourceMap) .toComment({ multiline: true });

expecting and what is it supposed to return?

skyrpex commented 5 years ago

expecting and what is it supposed to return?

I don't remember much about it but that method will take a sourceMap object (I guess it's sort of an AST) and convert it into an inline sourceMap comment (something like `/ sourceMap: ..... /

Maybe you could try skipping the inline sourceMap step, but I recall that it broke the final sourceMaps in some way:

// const sourceMapComment = convertSourceMap
//     .fromObject(file.sourceMap)
//     .toComment({ multiline: true });
const contents = file.contents.toString();
const result = rework(contents, { source: file.relative })
    .use(url(handle))
    .toString();
showcasefloyd commented 5 years ago

Hmm, I thought I tried that, but it was after I had tried a handful of other changes and before I added in the sourcemaps piece.

Quick question, based on my initial question should this gulp plug in be able to do what I'm asking it to. Save Base64 images locally?

showcasefloyd commented 5 years ago

Okay still not working.

This is the error I'm getting now.

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type undefined

It seems to be coming from the handle callback. When I comment that function out it doesn't fail.

Starting at line 49.

Thoughts?

skyrpex commented 5 years ago

Quick question, based on my initial question should this gulp plug in be able to do what I'm asking it to. Save Base64 images locally?

Oh, it doesn't support that. It skips URLs that begin with data:.

skyrpex commented 5 years ago

That error sounds like the new Buffer(result.code) instruction is receiving undefined instead of a string with the resulting code.

My guess is that there's an error when rework is handling the sources and we aren't doing any error checking.

showcasefloyd commented 5 years ago

Quick question, based on my initial question should this gulp plug in be able to do what I'm asking it to. Save Base64 images locally?

Oh, it doesn't support that. It skips URLs that begin with data:.

Yeah I saw that in the code, but my images start with "http://", so I assuming it should still work. Correct?

showcasefloyd commented 5 years ago

My guess is that there's an error when rework is handling the sources and we aren't doing any error checking.

Okay, so this gives me a starting point. I'll take a deeper dive. Thanks so much.

skyrpex commented 5 years ago

Quick question, based on my initial question should this gulp plug in be able to do what I'm asking it to. Save Base64 images locally?

Oh, it doesn't support that. It skips URLs that begin with data:.

Yeah I saw that in the code, but my images start with "http://", so I assuming it should still work. Correct?

Okay, now I understand. There are two problems: lack of documentation about what this plugin solves, and lack of error reporting.

The plugin is supposed to import local files relative to the CSS. For example:

/* assets/styles.css */
.bg {
    background: url(./my-bg.jpg);
}

The plugin will import the assets/my-bg.jpg file. It doesn't handle HTTP/S URLs, only relative files.

I guess it's doable, but I'd suggest manually downloading the files you want to import and leave them in your repository. You can't ensure a file from a URL to always be available when compiling your CSS...