diff --git a/README.md b/README.md index 98333b6..71e7d29 100644 --- a/README.md +++ b/README.md @@ -53,10 +53,25 @@ See [PostCSS] docs for examples for your environment. #### options.paths -Array of paths to resolve URL. Paths are tried in order, until an existing file is found. +Array of paths to resolve URL. Array paths are tried in order, until an existing file is found or will fallback to using the relative path. Default: `false` - path will be relative to source file if it was specified. +#### options.resolve + +Function to resolve URL. This option will override the default file id resolver that uses "paths" option. +Function recieves `file`, `url`, and `opts` arguments and expects to return an absolute path as a `string`. + +For example + +```js +function resolve(file, url, opts) { + return path.resolve('svg-folder', url); +} +``` + +Default: `function` - internal resolver using "paths" option and relative path. + #### options.removeFill Default: `false` - with `true` removes all `fill` attributes before applying specified. diff --git a/lib/index.js b/lib/index.js index 6932efa..88d4b73 100644 --- a/lib/index.js +++ b/lib/index.js @@ -44,7 +44,10 @@ module.exports = postcss.plugin( const { name, url } = parseRuleDefinition(node.params); const { params, selectors } = getRuleParams(node); const loader = { - id: resolveId(file, url, opts), + id: + typeof opts.resolve === "function" + ? opts.resolve(file, url, opts) + : resolveId(file, url, opts), parent: file, params, selectors, @@ -68,7 +71,10 @@ module.exports = postcss.plugin( statements.loaders.forEach( ({ url, params, valueNode, parsedValue }) => { const loader = { - id: resolveId(file, url, opts), + id: + typeof opts.resolve === "function" + ? opts.resolve(file, url, opts) + : resolveId(file, url, opts), parent: file, params, selectors: {}, diff --git a/lib/resolveId.js b/lib/resolveId.js index c50267b..5533869 100644 --- a/lib/resolveId.js +++ b/lib/resolveId.js @@ -12,8 +12,6 @@ module.exports = function resolveId(file, url, opts) { return absolutePath; } } - - return absolutePath; } if (file) { diff --git a/test/options.test.js b/test/options.test.js index 97fa808..d4eeccb 100644 --- a/test/options.test.js +++ b/test/options.test.js @@ -1,4 +1,5 @@ /* eslint-env mocha */ +const { resolve } = require("path"); const { compare } = require("./utils.js"); process.chdir(__dirname); @@ -71,6 +72,44 @@ test('should prefer "paths" option over "from"', () => { ); }); +test('should fallback to relative option if "paths" option can\'t be resolved', () => { + return compare( + ` + @svg-load icon url(fixtures/basic.svg) {} + background: svg-load('fixtures/basic.svg'); + background: svg-inline(icon); + `, + ` + background: url("data:image/svg+xml;charset=utf-8,"); + background: url("data:image/svg+xml;charset=utf-8,"); + `, + { + from: "input.css", + paths: ["./does_not_exist"], + encode: false + } + ); +}); + +test('should resolve file path using the "resolve" option function', () => { + return compare( + ` + @svg-load icon url(basic.svg) {} + background: svg-load('basic.svg'); + background: svg-inline(icon); + `, + ` + background: url("data:image/svg+xml;charset=utf-8,"); + background: url("data:image/svg+xml;charset=utf-8,"); + `, + { + from: "input.css", + resolve: (file, url, opts) => resolve("fixtures", url), + encode: false + } + ); +}); + test("should ignore xmlns absence", () => { return compare( `background: svg-load('fixtures/basic.svg');`,