Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wzj-java
uni-app
提交
524ad4e2
U
uni-app
项目概览
wzj-java
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
524ad4e2
编写于
5月 15, 2022
作者:
fxy060608
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(css): rebase urls (#3514)
上级
2e3f1586
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
100 addition
and
24 deletion
+100
-24
packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts
...ges/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts
+100
-24
未找到文件。
packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts
浏览文件 @
524ad4e2
...
@@ -738,6 +738,9 @@ type CssUrlReplacer = (
...
@@ -738,6 +738,9 @@ type CssUrlReplacer = (
// https://drafts.csswg.org/css-syntax-3/#identifier-code-point
// https://drafts.csswg.org/css-syntax-3/#identifier-code-point
export
const
cssUrlRE
=
export
const
cssUrlRE
=
/
(?<
=^|
[^\w\-\u
0080-
\u
ffff
])
url
\(\s
*
(
'
[^
'
]
+'|"
[^
"
]
+"|
[^
'")
]
+
)\s
*
\)
/
/
(?<
=^|
[^\w\-\u
0080-
\u
ffff
])
url
\(\s
*
(
'
[^
'
]
+'|"
[^
"
]
+"|
[^
'")
]
+
)\s
*
\)
/
export
const
cssDataUriRE
=
/
(?<
=^|
[^\w\-\u
0080-
\u
ffff
])
data-uri
\(\s
*
(
'
[^
'
]
+'|"
[^
"
]
+"|
[^
'")
]
+
)\s
*
\)
/
export
const
importCssRE
=
/@import
(
'
[^
'
]
+
\.
css'|"
[^
"
]
+
\.
css"|
[^
'")
]
+
\.
css
)
/
const
cssImageSetRE
=
/
(?<
=image-set
\()((?:[\w\-]
+
\([^\)]
*
\)
|
[^
)
])
*
)(?=\))
/
const
cssImageSetRE
=
/
(?<
=image-set
\()((?:[\w\-]
+
\([^\)]
*
\)
|
[^
)
])
*
)(?=\))
/
const
UrlRewritePostcssPlugin
:
Postcss
.
PluginCreator
<
{
const
UrlRewritePostcssPlugin
:
Postcss
.
PluginCreator
<
{
...
@@ -783,35 +786,61 @@ function rewriteCssUrls(
...
@@ -783,35 +786,61 @@ function rewriteCssUrls(
css
:
string
,
css
:
string
,
replacer
:
CssUrlReplacer
replacer
:
CssUrlReplacer
):
Promise
<
string
>
{
):
Promise
<
string
>
{
return
asyncReplace
(
css
,
cssImageSetRE
,
async
(
match
)
=>
{
return
asyncReplace
(
css
,
cssUrlRE
,
async
(
match
)
=>
{
const
[
matched
,
rawUrl
]
=
match
return
await
doUrlReplace
(
rawUrl
,
matched
,
replacer
)
})
}
function
rewriteCssDataUris
(
css
:
string
,
replacer
:
CssUrlReplacer
):
Promise
<
string
>
{
return
asyncReplace
(
css
,
cssDataUriRE
,
async
(
match
)
=>
{
const
[
matched
,
rawUrl
]
=
match
return
await
doUrlReplace
(
rawUrl
,
matched
,
replacer
,
'
data-uri
'
)
})
}
function
rewriteImportCss
(
css
:
string
,
replacer
:
CssUrlReplacer
):
Promise
<
string
>
{
return
asyncReplace
(
css
,
importCssRE
,
async
(
match
)
=>
{
const
[
matched
,
rawUrl
]
=
match
return
await
doImportCSSReplace
(
rawUrl
,
matched
,
replacer
)
})
}
// TODO: image and cross-fade could contain a "url" that needs to be processed
// https://drafts.csswg.org/css-images-4/#image-notation
// https://drafts.csswg.org/css-images-4/#cross-fade-function
const
cssNotProcessedRE
=
/
(
gradient|element|cross-fade|image
)\(
/
async
function
rewriteCssImageSet
(
css
:
string
,
replacer
:
CssUrlReplacer
):
Promise
<
string
>
{
return
await
asyncReplace
(
css
,
cssImageSetRE
,
async
(
match
)
=>
{
const
[,
rawUrl
]
=
match
const
[,
rawUrl
]
=
match
const
url
=
await
processSrcSet
(
rawUrl
,
async
({
url
})
=>
{
const
url
=
await
processSrcSet
(
rawUrl
,
async
({
url
})
=>
{
// the url maybe url(...)
// the url maybe url(...)
if
(
cssUrlRE
.
test
(
url
))
{
if
(
cssUrlRE
.
test
(
url
))
{
return
await
rewriteCssUrls
(
url
,
replacer
)
return
await
rewriteCssUrls
(
url
,
replacer
)
}
}
return
await
doUrlReplace
(
url
,
url
,
replacer
)
if
(
!
cssNotProcessedRE
.
test
(
url
))
{
return
await
doUrlReplace
(
url
,
url
,
replacer
)
}
return
url
})
})
return
url
return
url
})
})
}
}
function
rewriteCssImageSet
(
css
:
string
,
replacer
:
CssUrlReplacer
):
Promise
<
string
>
{
return
asyncReplace
(
css
,
cssImageSetRE
,
async
(
match
)
=>
{
const
[
matched
,
rawUrl
]
=
match
const
url
=
await
processSrcSet
(
rawUrl
,
({
url
})
=>
doUrlReplace
(
url
,
matched
,
replacer
)
)
return
`image-set(
${
url
}
)`
})
}
async
function
doUrlReplace
(
async
function
doUrlReplace
(
rawUrl
:
string
,
rawUrl
:
string
,
matched
:
string
,
matched
:
string
,
replacer
:
CssUrlReplacer
replacer
:
CssUrlReplacer
,
funcName
:
string
=
'
url
'
)
{
)
{
let
wrap
=
''
let
wrap
=
''
const
first
=
rawUrl
[
0
]
const
first
=
rawUrl
[
0
]
...
@@ -819,6 +848,7 @@ async function doUrlReplace(
...
@@ -819,6 +848,7 @@ async function doUrlReplace(
wrap
=
first
wrap
=
first
rawUrl
=
rawUrl
.
slice
(
1
,
-
1
)
rawUrl
=
rawUrl
.
slice
(
1
,
-
1
)
}
}
if
(
if
(
isExternalUrl
(
rawUrl
)
||
isExternalUrl
(
rawUrl
)
||
isDataUrl
(
rawUrl
)
||
isDataUrl
(
rawUrl
)
||
...
@@ -828,7 +858,30 @@ async function doUrlReplace(
...
@@ -828,7 +858,30 @@ async function doUrlReplace(
return
matched
return
matched
}
}
return
`url(
${
wrap
}${
await
replacer
(
rawUrl
)}${
wrap
}
)`
const
newUrl
=
await
replacer
(
rawUrl
)
if
(
wrap
===
''
&&
newUrl
!==
encodeURI
(
newUrl
))
{
// The new url might need wrapping even if the original did not have it, e.g. if a space was added during replacement
wrap
=
"
'
"
}
return
`
${
funcName
}
(
${
wrap
}${
newUrl
}${
wrap
}
)`
}
async
function
doImportCSSReplace
(
rawUrl
:
string
,
matched
:
string
,
replacer
:
CssUrlReplacer
)
{
let
wrap
=
''
const
first
=
rawUrl
[
0
]
if
(
first
===
`"`
||
first
===
`'`
)
{
wrap
=
first
rawUrl
=
rawUrl
.
slice
(
1
,
-
1
)
}
if
(
isExternalUrl
(
rawUrl
)
||
isDataUrl
(
rawUrl
)
||
rawUrl
.
startsWith
(
'
#
'
))
{
return
matched
}
return
`@import
${
wrap
}${
await
replacer
(
rawUrl
)}${
wrap
}
`
}
}
export
async
function
minifyCSS
(
css
:
string
,
config
:
ResolvedConfig
)
{
export
async
function
minifyCSS
(
css
:
string
,
config
:
ResolvedConfig
)
{
...
@@ -1055,6 +1108,7 @@ function preprocessCss(content: string, isNVue: boolean = false) {
...
@@ -1055,6 +1108,7 @@ function preprocessCss(content: string, isNVue: boolean = false) {
}
}
return
content
return
content
}
}
/**
/**
* relative url() inside \@imported sass and less files must be rebased to use
* relative url() inside \@imported sass and less files must be rebased to use
* root file as base.
* root file as base.
...
@@ -1067,21 +1121,29 @@ async function rebaseUrls(
...
@@ -1067,21 +1121,29 @@ async function rebaseUrls(
):
Promise
<
Sass
.
ImporterReturnType
>
{
):
Promise
<
Sass
.
ImporterReturnType
>
{
file
=
path
.
resolve
(
file
)
// ensure os-specific flashes
file
=
path
.
resolve
(
file
)
// ensure os-specific flashes
// 条件编译
//
fixed by xxxxxx
条件编译
cons
t
contents
=
preprocessCss
(
fs
.
readFileSync
(
file
,
'
utf-8
'
),
isNVue
)
le
t
contents
=
preprocessCss
(
fs
.
readFileSync
(
file
,
'
utf-8
'
),
isNVue
)
// in the same dir, no need to rebase
// in the same dir, no need to rebase
const
fileDir
=
path
.
dirname
(
file
)
const
fileDir
=
path
.
dirname
(
file
)
const
rootDir
=
path
.
dirname
(
rootFile
)
const
rootDir
=
path
.
dirname
(
rootFile
)
if
(
fileDir
===
rootDir
)
{
if
(
fileDir
===
rootDir
)
{
return
{
file
,
contents
}
return
{
file
,
contents
}
}
}
// no url()
// no url()
if
(
!
cssUrlRE
.
test
(
contents
))
{
const
hasUrls
=
cssUrlRE
.
test
(
contents
)
// data-uri() calls
const
hasDataUris
=
cssDataUriRE
.
test
(
contents
)
// no @import xxx.css
const
hasImportCss
=
importCssRE
.
test
(
contents
)
if
(
!
hasUrls
&&
!
hasDataUris
&&
!
hasImportCss
)
{
return
{
file
,
contents
}
return
{
file
,
contents
}
}
}
const
rebased
=
await
rewriteCssUrls
(
contents
,
(
url
)
=>
{
let
rebased
const
rebaseFn
=
(
url
:
string
)
=>
{
if
(
url
.
startsWith
(
'
/
'
))
return
url
if
(
url
.
startsWith
(
'
/
'
))
return
url
// match alias, no need to rewrite
// match alias, no need to rewrite
for
(
const
{
find
}
of
alias
)
{
for
(
const
{
find
}
of
alias
)
{
...
@@ -1094,10 +1156,24 @@ async function rebaseUrls(
...
@@ -1094,10 +1156,24 @@ async function rebaseUrls(
const
absolute
=
path
.
resolve
(
fileDir
,
url
)
const
absolute
=
path
.
resolve
(
fileDir
,
url
)
const
relative
=
path
.
relative
(
rootDir
,
absolute
)
const
relative
=
path
.
relative
(
rootDir
,
absolute
)
return
normalizePath
(
relative
)
return
normalizePath
(
relative
)
})
}
// fix css imports in less such as `@import "foo.css"`
if
(
hasImportCss
)
{
contents
=
await
rewriteImportCss
(
contents
,
rebaseFn
)
}
if
(
hasUrls
)
{
contents
=
await
rewriteCssUrls
(
rebased
||
contents
,
rebaseFn
)
}
if
(
hasDataUris
)
{
contents
=
await
rewriteCssDataUris
(
rebased
||
contents
,
rebaseFn
)
}
return
{
return
{
file
,
file
,
contents
:
rebased
,
contents
,
}
}
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录