Relative path from current CSS file

[ai]

When I write

@font-face {
    src: inline("./demi.woff")
}

I expect that it takes file from same dir as CSS files.

You can take CSS file path from decl.source.input.file.

[borodean]

@ai, what is the point for having this?

As for me, I don’t have any special expectations for the paths starting with a dot. Both foo/bar and ./foo/bar are relative paths. PostCSS Assets treat them as relative to either the base path or one of the load paths.

[borodean]

Also, having such source file relativeness may bring confusion when the source code is written with some of the preprocessor languages and has partials included. Where should path relate to: the partial, or the resulting file?

[ai]

I need relative path for component based structure:

blocks/
  logo/
    logo.css
    logo.js
    logo.png
  menu/
    menu.css
    menu.js
    left.png
    right.png

[ai]

Yeap, in fs a/b means same as ./a/b/. But require() has a/b and separated ./a/b.

[ai]

So, what we will do with component based structure? menu/left.png is bad because I can rename block or move it to subdir. Anyway node.js behavior is expected for some users.

[borodean]

Another option would be having the directory which contains CSS as a first in the list on the load paths. So, if you write url('foobar.png') it firstly would search for it inside the directory where the CSS is, then inside the base path, then will go through the rest of load paths.

What do you think, @ai?

[ai]

Yeap, it is nice solution too.

[ai]

I really doesn’t understand what how relative paths works in 2.0.0.

I have a this structure:

blocks/
  logo/
    logo.css
    logo.js
    logo.png
  menu/
    menu.css
    menu.js
    left.png
    right.png

What I should pass in options and how I should load left.png from menu.css?

[ai]

So, how I can use relevant from CSS file paths?

[borodean]

@ai!

What I should pass in options and how I should load left.png from menu.css?

.menu__left {
  background: resolve('left.png');
}

If decl.source.input.file is defined, the source file path is the first path to search for a resolution.

[ai]

Nice. Thanks.

I waiting for SVG inline fix and then will remove postcss-url to use your tool :).