add postcss-url to adjust ﹫import(ed) url() ?

[magsout]

I think it would be nice to add postcss-url in cssnext.

What do you think about that ?

[MoOx]

It's a complement to postcss-import that would fix url of assets (rebase according to from & to option).
Maybe this should be included in postcss-import. Need to think about that a little.

[bloodyowl]

👍 as the var(--name) in url("") isn't supposed to work.

[MoOx]

fyi, postcss-url has been update to work with postcss 4.x, see #55

[MoOx]

By doing that, we are making a step to assets management. We should be careful. Do we enable that by default?
On another hand, since we inline ﹫import it make sense to adjust according to from/to options.
Not sure what we should do here.

[jasonkuhrt]

Please just make this work for the default case and workflow of npm / webpack / etc.

The current hell I am in:

@font-face {
  font-family: 'Futura Round';
  src: url('../node_modules/littlebits-ui/node_modules/futura-round-family/fonts/FuturaRoundLight.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

[MoOx]

Are you making node_modules accessible to your http server?
I've to admit I don't know what should be the default behavior when importing css files.
Just rebase the url from imported path to to location?

[jasonkuhrt]

The default should be this:

• after every import look at the url(...)s in the child and re-write them according to where the child came from.

So:

/* index.css in A package */
@font-face {
  font-family: 'Futura Round';
  src: url('./fonts/FuturaRoundLight.woff') format('woff');
}

/* index.css in B package */
@import 'A'

.blah { content: 'blah-blah' }

A is concatenated to B so that the result is this:

@font-face {
  font-family: 'Futura Round';
  src: url('./node_modules/A/fonts/FuturaRoundLight.woff') format('woff');
}

.blah { content: 'blah-blah' }

Now, consider another example where B's index.css is not in the root.

/* index.css in A package */
/* NO CHANGE */

/* lib/index.css in B package */ /* <---- CHANGED! */
@import 'A'

.blah { content: 'blah-blah' }

Result:

@font-face {
  font-family: 'Futura Round';
 /* NOTE THE ../ instead of ./ */
  src: url('../node_modules/A/fonts/FuturaRoundLight.woff') format('woff');
}

.blah { content: 'blah-blah' }

Does any of this not make sense?

[jasonkuhrt]

Are you making node_modules accessible to your http server?

I don't know what you mean

[jasonkuhrt]

@MoOx Just to be clear this is a deal-breaker for our webpack pipeline right now. As far as I can tell there's no workaround. Maybe if I fuss enough with the webpack config I'd get something working. Do let me know what other people are doing if you know.

[MoOx]

The immediate workaround is to use postcss-loader with cssnext as a plugin in addition to postcss-url.
cssnext will get postcss-url in it probably tomorrow, with the upgrade to postcss v4.x

[jasonkuhrt]

The immediate workaround is to use postcss-loader with cssnext as a plugin in addition to postcss-url

This seems to be hard to get right with slightly-random slightly-obscure documentation in various projects coupled with completely unhelpful error messages. I think taking a crack at #55 (comment) will be more fruitful.

[MoOx]

Closed by d011ec6

[magsout]

By doing that, we are making a step to assets management. We should be careful. Do we enable that by default?

IMHO, no and thanks to add it in cssnext 👍