Base url about critical HOT 8 CLOSED

@lkdnvc The image paths in the critical css are currently rewritten to absolute urls so you should configure your base option to reflect your server docroot.

E.g. asuming your local dev directory structure to be something like this:

/var/www/somedomain.com/
                     ├── package.json
                     ├── node_modules/...
                     ├── ...
                     └── dist/
                           └── sometext/
                                 └── my-site/

your base option should be set to dist
base: 'dist/'

from critical.

@lkdnvc Any progresses on this subject?
Thanks in advance.

from critical.

@bezoerb and the output has to be absolute? can't be a relative directory, so I wouldn't change it when in production?

from critical.

@juanbrujo as we don't know the path to the HTML file relative to the document root there's no robust solution for computing the asset path relative to the HTML right now but you can configure a relative path prefix to achieve this when you use the current master of critical.
See https://github.com/addyosmani/critical#options

from critical.

@juanbrujo we made some progress on this topic. The asset paths inside the critical css should now stay relative in case they were relative in the original css. Could you check the vinyl branch if this fixes your issue?

npm install --save-dev git+https://github.com/addyosmani/critical.git#vinyl

from critical.

@bezoerb ok tested it and it's working fine but a couple of concerns. this is my folder structure (test):

and this is the config (I'm forcing the height to test the output):

critical.generate({
    inline: true,
    base: 'dist/',
    src: 'index.html',
    dest: 'index-critical.html',
    width: 1300,
    height: 1200
});

as you can see even if base is in dist/ the file output is being created in the project root directory. With that result, assets url's are being created like if it would reside inside dist/:

.incognito .box-producto:before {
  background-image: url(assets/images/sprites.png);
  background-position: 0 0;
  ...

(I hope I was clear explaining 😰)

from critical.

@juanbrujo good point. Thanks for the detailed explanation :) Currently the src file is resolved relative to base and the dest file gets written relative to process.cwd which somehow doesn't make sense as the relative asset paths are computed relative to src. I think this needs a bit more concept ;)

from critical.

@juanbrujo sorry for the late response. This should be fixed by now. dest path is now computed relative to base directory.

I'm closing this for now. Feel free to reopen if there's anything we missed to fix.

from critical.