fix CSS injection to support add_location, & add support for css:false

Author: rixo

lib/make-hot.js

@@ -131,12 +131,36 @@ const stringHashcode = str => {
   return (hash >>> 0).toString(36)
 }
 
-const parseCssId = (code, parseHash) => {
+const normalizeNonCss = (code, cssHash) =>
+  code
+    // ignore css hashes in the code (that have changed, necessarily)
+    .replace(new RegExp('\\b' + cssHash + '\\b', 'g'), '')
+    // Svelte now adds locations in dev mode, code locations can change when
+    // CSS change, but we're unaffected (not real behaviour changes)
+    .replace(/\badd_location\s*\([^)]*\)\s*;?/g, '')
+
+const parseCssId = (code, parseHash, originalCode, compileCss) => {
   // the regex matching is very pretty conservative 'cause I don't want to
   // match something else by error... I'm probably make it more lax if I have
   // to fix it 3 times in a single week ¯\_(ツ)_/¯
   let match = /^function add_css\(\) \{[\s\S]*?^}/m.exec(code)
-  if (!match) return {}
+
+  if (!match) {
+    // guard: injectCss is off, no need to compute hashes
+    if (!parseHash) return {}
+    // guard: compile.css is true, so we should have found the add_css function,
+    //        something unexpected is unraveling here, fall back to caution
+    if (!compileCss) return {}
+    // trying to get CSS id the same way as Svelte does it
+    match = /<style[^>]*>([\s\S]*)<\/\s*style\s*>/.exec(originalCode)
+    const cssHash = match && match[1] ? stringHashcode(match[1]) : null
+    if (!cssHash) return {}
+    return {
+      cssId: `svelte-${cssHash}-style`,
+      nonCssHash: stringHashcode(normalizeNonCss(code, cssHash)),
+    }
+  }
+
   const codeExceptCSS =
     code.slice(0, match.index) + code.slice(match.index + match[0].length)
 
@@ -146,9 +170,7 @@ const parseCssId = (code, parseHash) => {
   if (!parseHash || !cssId) return { cssId }
 
   const cssHash = cssId.split('-')[1]
-  const nonCssHash = stringHashcode(
-    codeExceptCSS.replace(new RegExp('\\b' + cssHash + '\\b', 'g'), '')
-  )
+  const nonCssHash = stringHashcode(normalizeNonCss(codeExceptCSS, cssHash))
 
   return { cssId, nonCssHash }
 }
@@ -232,7 +254,12 @@ const createMakeHot = ({ walk, meta = 'import.meta', hotApi, adapter }) => {
 
     const hotApiImport = resolveHotApiImport(hotOptions, hotApi)
 
-    const { cssId, nonCssHash } = parseCssId(compiledCode, hotOptions.injectCss)
+    const { cssId, nonCssHash } = parseCssId(
+      compiledCode,
+      hotOptions.injectCss,
+      originalCode,
+      compileOptions && compileOptions.css
+    )
 
     const replacement = renderApplyHmr({
       id,