PostCSS 重写 URL

npm install @csstools/postcss-rewrite-url --save-dev

PostCSS 重写 URL 让您在 CSS 中重写 URL 值.

.foo {
    background: rewrite-url('foo.png');
}

@font-face {
    font-family: "Trickster";
    src:
        local("Trickster"),
        rewrite-url("trickster-COLRv1.otf") format("opentype");
}

/* becomes */

.foo {
    background: url("foo.png#modified");
}

@font-face {
    font-family: "Trickster";
    src:
        local("Trickster"),
        url("trickster-COLRv1.otf#modified") format("opentype");
}

使用量

添加 PostCSS 重写 URL 对您的项目:

npm install postcss @csstools/postcss-rewrite-url --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssRewriteURL = require('@csstools/postcss-rewrite-url');

postcss([
    postcssRewriteURL(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

重写

确定 URLs 如何重写 rewriter 调用.

interface ValueToRewrite {
    url: string;
    urlModifiers: Array<string>;
}

interface RewriteContext {
    type: 'declaration-value' | 'at-rule-prelude';
    from: string | undefined;
    rootFrom: string | undefined;
    property?: string;
    atRuleName?: string;
}

type Rewriter = (value: ValueToRewrite, context: RewriteContext) => ValueToRewrite | false;

/** postcss-rewrite-url plugin options */
type pluginOptions = {
    rewriter: Rewriter;
};

postcssRewriteURL({
    rewriter: (value, context) => {
        console.log(value); // info about the `rewrite-url()` function itself (e.g. the url and url modifiers)
        console.log(context); // context surrounding the `rewrite-url()` function (i.e. where was it found?)

        if (value.url === 'ignore-me') {
            // return `false` to ignore this url and preserve `rewrite-url()` in the output
            return false;
        }

        // use url modifiers to trigger specific behavior
        if (value.urlModifiers.includes('--a-custom-modifier')) {
            return {
                url: value.url + '#other-modification',
                urlModifiers: [], // pass new or existing url modifiers to emit these in the final result
            };
        }

        return {
            url: value.url + '#modified',
        };
    },
})

语法

PostCSS 重写 URL 非标准,不属于任何官方CSS规格.

rewrite-url() 函数

这个 rewrite-url() 函数需要 url 字符串和可选 url 修改器,并将转换为标准 url() 函数通过 dev 工具.

.foo {
    background: rewrite-url('foo.png');
}

rewrite-url() = rewrite-url( <string> <url-modifier>* )

样式林

Stylelint 能够检查未知的属性值 . 设置此规则的正确配置可以检查甚至非标准的语法.

"languageOptions": {
    "syntax": {
        "types": {
            "url": "| rewrite-url( <string> <url-modifier>* )"
        }
    }
},
"rules": {
    "function-no-unknown": [
        true,
        {
            "ignoreFunctions": ["rewrite-url"]
        }
    ]
}