tests

.gitignore

@@ -1 +1,2 @@
-/node_modules
+.DS_Store
+/node_modules

lib/addStylesClient.js

@@ -62,8 +62,10 @@ module.exports = function (parentId, list, _isProduction) {
       mayRemove.push(domStyle)
     }
     if (newList) {
-      var newStyles = listToStyles(parentId, newList)
-      addStylesToDom(newStyles)
+      styles = listToStyles(parentId, newList)
+      addStylesToDom(styles)
+    } else {
+      styles = []
     }
     for (var i = 0; i < mayRemove.length; i++) {
       var domStyle = mayRemove[i]
@@ -89,6 +91,9 @@ function addStylesToDom (styles /* Array<StyleObject> */) {
       for (; j < item.parts.length; j++) {
         domStyle.parts.push(addStyle(item.parts[j]))
       }
+      if (domStyle.parts.length > item.parts.length) {
+        domStyle.parts.length = item.parts.length
+      }
     } else {
       var parts = []
       for (var j = 0; j < item.parts.length; j++) {

lib/addStylesServer.js

@@ -74,7 +74,7 @@ function renderStyles (styles) {
     css += `<style data-vue-ssr-id="${
       style.ids.join(' ')
     }"${
-      style.media ? ` media=${style.mdia}` : ''
+      style.media ? ` media="${style.media}"` : ''
     }>${style.css}</style>`
   }
   return css

lib/listToStyles.js

@@ -11,12 +11,15 @@ module.exports = function listToStyles (parentId, list) {
     var css = item[1]
     var media = item[2]
     var sourceMap = item[3]
-    var part = { css: css, media: media, sourceMap: sourceMap }
+    var part = {
+      id: parentId + ':' + i,
+      css: css,
+      media: media,
+      sourceMap: sourceMap
+    }
     if (!newStyles[id]) {
-      part.id = parentId + ':0'
       styles.push(newStyles[id] = { id: id, parts: [part] })
     } else {
-      part.id = parentId + ':' + newStyles[id].parts.length
       newStyles[id].parts.push(part)
     }
   }

package.json

@@ -7,9 +7,15 @@
     "type": "git",
     "url": "[email protected]:vuejs/vue-style-loader.git"
   },
+  "scripts": {
+    "test": "jest"
+  },
   "license": "MIT",
   "dependencies": {
     "hash-sum": "^1.0.2",
     "loader-utils": "^0.2.7"
+  },
+  "devDependencies": {
+    "jest": "^18.1.0"
   }
 }

test/test.js

@@ -0,0 +1,94 @@
+const addStylesClient = require('../lib/addStylesClient')
+const addStylesServer = require('../lib/addStylesServer')
+
+const mockedList = [
+  [1, 'h1 { color: red; }', ''],
+  [1, 'p { color: green; }', ''],
+  [2, 'span { color: blue; }', ''],
+  [2, 'span { color: blue; }', 'print']
+]
+
+test('addStylesClient (dev)', () => {
+  const update = addStylesClient('foo', mockedList, false)
+  assertStylesMatch(mockedList)
+  const mockedList2 = mockedList.slice(1, 3)
+  update(mockedList2)
+  assertStylesMatch(mockedList2)
+  update()
+  expect(document.querySelectorAll('style').length).toBe(0)
+})
+
+test('addStylesClient (prod)', () => {
+  const update = addStylesClient('foo', mockedList, true)
+  assertStylesMatch(mockedList)
+  const mockedList2 = mockedList.slice(2)
+  update(mockedList2)
+  assertStylesMatch(mockedList2)
+  update()
+  expect(document.querySelectorAll('style').length).toBe(0)
+})
+
+test('addStylesClient (dev + ssr)', () => {
+  mockSSRTags(mockedList, 'foo')
+  const update = addStylesClient('foo', mockedList, false)
+  assertStylesMatch(mockedList)
+  update()
+  expect(document.querySelectorAll('style').length).toBe(0)
+})
+
+test('addStylesClient (prod + ssr)', () => {
+  mockProdSSRTags(mockedList, 'foo')
+  const update = addStylesClient('foo', mockedList, true)
+  expect(document.querySelectorAll('style').length).toBe(1)
+})
+
+test('addStylesServer (dev)', () => {
+  const context = global.__VUE_SSR_CONTEXT__ = {}
+  addStylesServer('foo', mockedList, false)
+  expect(context.styles).toBe(
+    `<style data-vue-ssr-id="foo:0">h1 { color: red; }</style>` +
+    `<style data-vue-ssr-id="foo:1">p { color: green; }</style>` +
+    `<style data-vue-ssr-id="foo:2">span { color: blue; }</style>` +
+    `<style data-vue-ssr-id="foo:3" media="print">span { color: blue; }</style>`
+  )
+})
+
+test('addStylesServer (prod)', () => {
+  const context = global.__VUE_SSR_CONTEXT__ = {}
+  addStylesServer('foo', mockedList, true)
+  expect(context.styles).toBe(
+    `<style data-vue-ssr-id="foo:0 foo:1 foo:2">` +
+      `h1 { color: red; }\np { color: green; }\nspan { color: blue; }` +
+    `</style>` +
+    `<style data-vue-ssr-id="foo:3" media="print">span { color: blue; }</style>`
+  )
+})
+
+// --- helpers ---
+
+function assertStylesMatch (list) {
+  const styles = document.querySelectorAll('style')
+  expect(styles.length).toBe(list.length)
+  ;[].forEach.call(styles, (style, i) => {
+    expect(style.textContent.indexOf(list[i][1]) > -1).toBe(true)
+  })
+}
+
+function mockSSRTags (list, parentId) {
+  list.forEach((item, i) => {
+    const style = document.createElement('style')
+    style.setAttribute('data-vue-ssr-id', `${parentId}:${i}`)
+    style.textContent = item[1]
+    if (item[2]) {
+      style.setAttribute('media', item[2])
+    }
+    document.head.appendChild(style)
+  })
+}
+
+function mockProdSSRTags (list, parentId) {
+  const style = document.createElement('style')
+  style.setAttribute('data-vue-ssr-id', list.map((item, i) => `${parentId}:${i}`).join(' '))
+  style.textContent = list.map(item => item[1]).join('\n')
+  document.head.appendChild(style)
+}