Skip to content

Commit 60eac0e

Browse files
cossssmincossssmin
committed
feat: add support for font-face urls
1 parent 38c959a commit 60eac0e

File tree

4 files changed

+59
-14
lines changed

4 files changed

+59
-14
lines changed

‎lib/plugins/postcss-baseurl.js

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
11
const isUrl = require('is-url-superb')
22

3-
const regex = /url\(['"]?(.*?)['"]?\)/
3+
const urlPattern = /(url\(["']?)(.*?)(["']?\))/g
44

55
module.exports = (options = {}) => {
66
const {base} = options
77

88
return {
99
postcssPlugin: 'postcss-baseurl',
10-
Once(root, {result}) { // eslint-disable-line
10+
Once(root) {
11+
root.walkAtRules(rule => {
12+
if (rule.name === 'font-face') {
13+
rule.walkDecls(decl => {
14+
const {value} = decl
15+
16+
decl.value = value.replace(urlPattern, ($0, $1, $2, $3) => {
17+
return isUrl($2) ? $1 + $2 + $3 : $1 + base + $2 + $3
18+
})
19+
})
20+
}
21+
})
22+
1123
root.walkRules(rule => {
12-
rule.walkDecls((decl, i) => { // eslint-disable-line
24+
rule.walkDecls(decl => {
1325
const {value} = decl
14-
if (value.includes('url(')) {
15-
const ms = value.match(regex)
16-
17-
if (ms === null || isUrl(ms[1])) {
18-
return
19-
}
2026

21-
decl.value = value.replace(ms[1], base + ms[1])
22-
}
27+
decl.value = value.replace(urlPattern, ($0, $1, $2, $3) => {
28+
return isUrl($2) ? $1 + $2 + $3 : $1 + base + $2 + $3
29+
})
2330
})
2431
})
2532
}

‎test/expected/background-css.html renamed to ‎test/expected/css-url.html

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
<head>
2-
<style>.test {
2+
<style>@font-face {
3+
font-family: 'Example';
4+
src: url('https://example.com/fonts/Example1.woff2') format('woff2'), url(https://example.com/fonts/Example2.woff) format('woff'), url("https://example.com/fonts/Example3.woff") format('woff');
5+
}
6+
7+
@font-face {
8+
font-family: 'Example 2';
9+
src: url('https://preserve.me/fonts/Example1.woff2') format('woff2'), url(https://preserve.me/fonts/Example2.woff) format('woff');
10+
}
11+
12+
.test {
313
background-image: url('https://example.com/image.jpg');
414
background: url('https://example.com/image.jpg');
515
background-image: url('https://preserve.me/image.jpg');
@@ -18,10 +28,18 @@
1828
background: url(https://example.com/image.jpg);
1929
background-image: url(https://preserve.me/image.jpg);
2030
background: url(https://preserve.me/image.jpg);
31+
}
32+
33+
.multiple-bg {
34+
background-image: url('https://example.com/one.png'), url(https://example.com/two.png), url("https://example.com/three.png"), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
2135
}</style>
2236
</head>
2337

2438
<body style="background: url('https://example.com/image.jpg')">
39+
<style>@font-face {
40+
font-family: 'Example 2';
41+
src: url('https://example.com/fonts/Example3.woff2') format('woff2'), url('https://example.com/fonts/Example4.woff') format('woff');
42+
}</style>
2543
<table style="background: url(https://example.com/image.jpg)">
2644
<tr>
2745
<th style="background-image: url('https://example.com/image.jpg')">Header</th>

‎test/fixtures/background-css.html renamed to ‎test/fixtures/css-url.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
<head>
22
<style>
3+
@font-face {
4+
font-family: 'Example';
5+
src: url('fonts/Example1.woff2') format('woff2'), url(fonts/Example2.woff) format('woff'), url("fonts/Example3.woff") format('woff');
6+
}
7+
8+
@font-face {
9+
font-family: 'Example 2';
10+
src: url('https://preserve.me/fonts/Example1.woff2') format('woff2'), url(https://preserve.me/fonts/Example2.woff) format('woff');
11+
}
12+
313
.test {
414
background-image: url('image.jpg');
515
background: url('image.jpg');
@@ -20,10 +30,20 @@
2030
background-image: url(https://preserve.me/image.jpg);
2131
background: url(https://preserve.me/image.jpg);
2232
}
33+
34+
.multiple-bg {
35+
background-image: url('one.png'), url(two.png), url("three.png"), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
36+
}
2337
</style>
2438
</head>
2539

2640
<body style="background: url('image.jpg')">
41+
<style>
42+
@font-face {
43+
font-family: 'Example 2';
44+
src: url('fonts/Example3.woff2') format('woff2'), url('fonts/Example4.woff') format('woff');
45+
}
46+
</style>
2747
<table style="background: url(image.jpg)">
2848
<tr>
2949
<th style="background-image: url('image.jpg')">Header</th>

‎test/test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ test('custom attribute', t => {
7676
})
7777
})
7878

79-
test('background css url', t => {
80-
return process(t, 'background-css', {
79+
test('css urls', t => {
80+
return process(t, 'css-url', {
8181
url: 'https://example.com/',
8282
styleTag: true,
8383
inlineCss: true,

0 commit comments

Comments
 (0)