Wrong behaviour when passing list of styles
cManfredi opened this issue · 4 comments
cManfredi commented
Expected Behavior
The plugin should create a <style> element if the element passed is not an url and a element if the element is a valid url.
Actual Behavior
When creating elements from urls the plugin alternatively creates a corrent element and an incorrect one.
For example:
const styles = [
"https://.../css/chunk-019a112c.78b8d35d.css",
"https://.../css/chunk-04aba45e.8c018d83.css"
]
results in
<link type="text/css" rel="stylesheet" href="https://.../css/chunk-019a112c.78b8d35d.css">
<style type="text/css">https://.../css/chunk-04aba45e.8c018d83.css</style>
Specifications
- Version:
v1.3.0
joseluisq commented
Confirmed in Google Chrome 76 and Mozilla Firefox 69.0:
const URL_LONG = /^(((http[s]?)|file):)?(\/\/)+([0-9a-zA-Z-_.=?&].+)$/g
const URL_SHORT = /^([\.]?\/)([0-9a-zA-Z-_.=?&]+\/)*([0-9a-zA-Z-_.=?&]+)$/g
const isValidURL = (str) => (URL_LONG.test(str) || URL_SHORT.test(str))
// undefined
isValidURL("https://.../css/chunk-04aba45e.8c018d83.css")
// true
isValidURL("https://.../css/chunk-019a112c.78b8d35d.css")
// false
URL_LONG.test("https://.../css/chunk-019a112c.78b8d35d.css")
// true
joseluisq commented
Using arrow function isValidURL()
together with the two RegExs is returning a wrong result.
But it works using a conventional anonymous function.
Tested in Google Chrome 76 and Mozilla Firefox 69.0:
const isValidURL2 = function (str: string) {
return (URL_LONG.test(str) || URL_SHORT.test(str))
}
// undefined
isValidURL2("https://.../css/chunk-019a112c.78b8d35d.css")
// true
isValidURL2("https://.../css/chunk-04aba45e.8c018d83.css")
// true
joseluisq commented
This is very weird behaviour. I'm going to prepare a bugfix commit for this.