feat: use ESM for runtime files

Author: yyx990803

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["transform-es2015-modules-commonjs"]
+}

index.js

@@ -40,7 +40,8 @@ module.exports.pitch = function (remainingRequest) {
     // on the client: dynamic inject + hot-reload
     var code = [
       '// add the styles to the DOM',
-      'var update = require(' + addStylesClientPath + ')(' + id + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ');'
+      'var add = require(' + addStylesClientPath + ').default',
+      'var update = add(' + id + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ');'
     ]
     if (!isProduction) {
       code = code.concat([
@@ -67,7 +68,7 @@ module.exports.pitch = function (remainingRequest) {
       // component's lifecycle hooks
       return shared.concat([
         '// add CSS to SSR context',
-        'var add = require(' + addStylesServerPath + ')',
+        'var add = require(' + addStylesServerPath + ').default',
         'module.exports.__inject__ = function (context) {',
         '  add(' + id + ', content, ' + isProduction + ', context)',
         '};'

lib/addStylesClient.js

@@ -4,6 +4,8 @@
   Modified by Evan You @yyx990803
 */
 
+import listToStyles from './listToStyles'
+
 var hasDocument = typeof document !== 'undefined'
 
 if (typeof DEBUG !== 'undefined' && DEBUG) {
@@ -14,8 +16,6 @@ if (typeof DEBUG !== 'undefined' && DEBUG) {
   ) }
 }
 
-var listToStyles = require('./listToStyles')
-
 /*
 type StyleObject = {
   id: number;
@@ -49,7 +49,7 @@ var ssrIdKey = 'data-vue-ssr-id'
 // tags it will allow on a page
 var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
 
-module.exports = function (parentId, list, _isProduction, _options) {
+export default function addStylesClient (parentId, list, _isProduction, _options) {
   isProduction = _isProduction
 
   options = _options || {}

lib/addStylesServer.js

@@ -1,6 +1,6 @@
-var listToStyles = require('./listToStyles')
+import listToStyles from './listToStyles'
 
-module.exports = function (parentId, list, isProduction, context) {
+export default function addStylesServer (parentId, list, isProduction, context) {
   if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
     context = __VUE_SSR_CONTEXT__
   }

lib/listToStyles.js

@@ -2,7 +2,7 @@
  * Translates the list format produced by css-loader into something
  * easier to manipulate.
  */
-module.exports = function listToStyles (parentId, list) {
+export default function listToStyles (parentId, list) {
   var styles = []
   var newStyles = {}
   for (var i = 0; i < list.length; i++) {

package-lock.json

@@ -16,6 +16,9 @@
     "loader-utils": "^1.0.2"
   },
   "devDependencies": {
-    "jest": "^18.1.0"
+    "babel-core": "^6.26.0",
+    "babel-jest": "^22.1.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "jest": "^22.1.4"
   }
 }

package.json

@@ -1,5 +1,5 @@
-const addStylesClient = require('../lib/addStylesClient')
-const addStylesServer = require('../lib/addStylesServer')
+import addStylesClient from '../lib/addStylesClient'
+import addStylesServer from '../lib/addStylesServer'
 
 const mockedList = [
   [1, 'h1 { color: red; }', ''],