joseluisq/printd

Wrong behaviour when passing list of styles

cManfredi opened this issue · 4 comments

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

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

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

This is very weird behaviour. I'm going to prepare a bugfix commit for this.

Fixed in new release v1.4.1