css base url

[guybedford]

When inline imports from css files, there is no way to know what is meant by an import of the form:

  @import '/some-css.css'

The optimizer currently leaves out these optimizations. If there was an option to specify the "cssBase", then it would be possible to inline these imports as well. I would then be able to share this configuration option within RequireCSS to provide the same functionality.

Let me know if that makes sense, or if there is an option for this already at all? I could also potentially look at doing a pull request if it helps.

[jrburke]

There is cssPrefix, which I just added to example.build.js, but it is more fore relative URLs for a single CSS optimization (discussed in #350) but it is for relative URL resolution.

In general, I assumed that css @import inlining was just for relative URLs, and I wanted to encourage that local referencing, just like dependency strings that are URLs, like '/some/config.js' are not really supported in the optimizer. So it is unclear if this is actually desirable.

[guybedford]

CSS paths are not like moduleIDs - they are always urls. And there is a
very valid case for absolute css paths as it allows referencing of global
css dependencies. For example, loading a specific CSS from bootstrap. or
loading a global reset style.

So the issue is that there needs to be a concept of 'base URL' within cas
files in order to optimize these. The best I can come up with is that users
write css effectively inclining the baseURL used in the browser. Then the
optimizer just needs to be informed what that is relative to the server
baseUrl. Hence the cssBase concept.

I have this working in RequireCSS, but am very much open to alternatives. I
think the use case is important though.

On Wednesday, March 27, 2013, James Burke wrote:

There is cssPrefix, which I just added to example.build.jshttps://github.com/jrburke/r.js/commit/ad4eddf5437d76ff4172718a5c52c0fe26914be2,
but it is more fore relative URLs for a single CSS optimization (discussed
in #350 #350) but it is for
relative URL resolution.

In general, I assumed that css @import https://github.com/importinlining was just for relative URLs, and I wanted to encourage that local
referencing, just like dependency strings that are URLs, like
'/some/config.js' are not really supported in the optimizer. So it is
unclear if this is actually desirable.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/412#issuecomment-15544370
.

[guybedford]

The alternative here is to assume each module will know its own "backtrack distance" from the base path. And then to always use backtracking to access dependencies from the global root. Perhaps this is a simpler way forward anyway.

[guybedford]

Just to update here, in the current version of require-css and require-less, I am defining a "siteRoot" configuration on the base level r.js config, which is the location of the site root on the server, relative to the outDir or outFile paths, defaulting to ".".

This way, CSS paths can all be made absolute during the build step. This may be useful for the CSS optimization steps to share this variable as well.