refactor: group files into directories

lib/index.js

@@ -5,10 +5,10 @@ const qs = require('querystring')
 const plugin = require('./plugin')
 const selectBlock = require('./select')
 const loaderUtils = require('loader-utils')
-const { attrsToQuery } = require('./utils')
-const genStylesCode = require('./styles')
-const { genHotReloadCode } = require('./hotReload')
-const genCustomBlocksCode = require('./customBlocks')
+const { attrsToQuery } = require('./codegen/utils')
+const genStylesCode = require('./codegen/styleInjection')
+const { genHotReloadCode } = require('./codegen/hotReload')
+const genCustomBlocksCode = require('./codegen/customBlocks')
 const componentNormalizerPath = require.resolve('./runtime/componentNormalizer')
 
 module.exports = function (source) {

lib/pitch.js → lib/loaders/pitch.js

 const qs = require('querystring')
 const loaderUtils = require('loader-utils')
 const templateLoaderPath = require.resolve('./templateLoader')
-const stylePostLoaderPath = require.resolve('./style-post-loader')
+const stylePostLoaderPath = require.resolve('./stylePostLoader')
 
 module.exports = code => code
 

lib/loaders/stylePostLoader.js

+const qs = require('querystring')
+const { compileStyle } = require('vue-component-compiler')
+
+// This is a post loader that handles scoped CSS transforms.
+// Injected right before css-loader by the global pitcher (../pitch.js)
+// for any <style scoped> selection requests initiated from within vue files.
+module.exports = function (source, inMap) {
+  const query = qs.parse(this.resourceQuery.slice(1))
+  const { code, map, errors } = compileStyle({
+    source,
+    filename: this.resourcePath,
+    id: `data-v-${query.id}`,
+    map: inMap,
+    scoped: !!query.scoped,
+    trim: true
+  })
+
+  if (errors.length) {
+    this.callback(errors[0])
+  } else {
+    this.callback(null, code, map)
+  }
+}

lib/templateLoader.js → lib/loaders/templateLoader.js

 const qs = require('querystring')
 const loaderUtils = require('loader-utils')
 const compiler = require('vue-template-compiler')
-const { genTemplateHotReloadCode } = require('./hotReload')
 const { compileTemplate } = require('vue-component-compiler')
+const { genTemplateHotReloadCode } = require('../codegen/hotReload')
 
 // Loader that compiles raw template into JavaScript functions.
 // This is injected by the global pitcher (../pitch) for template
@@ -27,19 +27,16 @@ module.exports = function (source) {
     comments: query.comments
   })
 
-  const preprocessOptions = Object.assign({
-    filename: this.resourcePath
-  }, options.template)
-
   // for vue-component-compiler
   const finalOptions = {
     source,
+    filename: this.resourcePath,
     // allow using custom compiler via options
     compiler: options.compiler || compiler,
     compilerOptions,
     // handle possible lang="xxx"
     preprocessLang: query.lang,
-    preprocessOptions,
+    preprocessOptions: options.template,
     // allow customizing behavior of vue-template-es2015-compiler
     transpileOptions: options.transpileOptions,
     transformAssetUrls: options.transformAssetUrls || true,

lib/parse.js

-const hash = require('hash-sum')
-const cache = require('lru-cache')(100)
-const compiler = require('vue-template-compiler')
-const SourceMapGenerator = require('source-map').SourceMapGenerator
-
-const splitRE = /\r?\n/g
-const emptyRE = /^(?:\/\/)?\s*$/
-
-module.exports = (content, filename, sourceRoot, needMap) => {
-  const cacheKey = hash(filename + content)
-  let output = cache.get(cacheKey)
-  if (output) return output
-  output = compiler.parseComponent(content, { pad: 'line' })
-  if (needMap) {
-    if (output.script && !output.script.src) {
-      output.script.map = generateSourceMap(
-        filename,
-        content,
-        output.script.content,
-        sourceRoot
-      )
-    }
-    if (output.styles) {
-      output.styles.forEach(style => {
-        if (!style.src) {
-          style.map = generateSourceMap(
-            filename,
-            content,
-            style.content,
-            sourceRoot
-          )
-        }
-      })
-    }
-  }
-  cache.set(cacheKey, output)
-  return output
-}
-
-function generateSourceMap (filename, source, generated, sourceRoot) {
-  const map = new SourceMapGenerator({ sourceRoot })
-  map.setSourceContent(filename, source)
-  generated.split(splitRE).forEach((line, index) => {
-    if (!emptyRE.test(line)) {
-      map.addMapping({
-        source: filename,
-        original: {
-          line: index + 1,
-          column: 0
-        },
-        generated: {
-          line: index + 1,
-          column: 0
-        }
-      })
-    }
-  })
-  return map.toJSON()
-}

lib/plugin.js

@@ -69,7 +69,7 @@ module.exports = class VueLoaderPlugin {
     const normalizedRules = rawNormalizedRules.filter(r => r !== normalizedVueRule)
 
     const customFallbackRule = {
-      loader: require.resolve('./noop'),
+      loader: require.resolve('./loaders/noop'),
       resourceQuery: /type=custom/
     }
 
@@ -91,7 +91,7 @@ module.exports = class VueLoaderPlugin {
     // inject global pitcher (responsible for injecting template compiler
     // loader & CSS post loader)
     rawRules.unshift({
-      loader: require.resolve('./pitch')
+      loader: require.resolve('./loaders/pitch')
     })
   }
 }

lib/style-post-loader/index.js

-const qs = require('querystring')
-const postcss = require('postcss')
-const trim = require('./plugins/trim')
-const scoped = require('./plugins/scoped')
-
-// This is a post loader that handles scoped CSS transforms.
-// Injected right before css-loader by the global pitcher (../pitch.js)
-// for any <style scoped> selection requests initiated from within vue files.
-module.exports = function (source, map) {
-  const cb = this.async()
-
-  const query = qs.parse(this.resourceQuery.slice(1))
-  const id = `data-v-${query.id}`
-  const plugins = [trim()]
-
-  if (query.scoped) {
-    plugins.push(scoped({ id }))
-  }
-
-  const options = {
-    to: this.resourcePath,
-    from: this.resourcePath,
-    map: false
-  }
-  if (map) {
-    options.map = {
-      inline: false,
-      annotation: false,
-      prev: map
-    }
-  }
-
-  postcss(plugins)
-    .process(source, options)
-    .then(result => {
-      if (result.messages) {
-        result.messages.forEach(({ type, file }) => {
-          if (type === 'dependency') {
-            this.addDependency(file)
-          }
-        })
-      }
-      const map = result.map && result.map.toJSON()
-      cb(null, result.css, map)
-      return null // silence bluebird warning
-    })
-    .catch(cb)
-}

lib/style-post-loader/plugins/scoped.js

-const postcss = require('postcss')
-const selectorParser = require('postcss-selector-parser')
-
-module.exports = postcss.plugin('add-id', ({ id }) => root => {
-  const keyframes = Object.create(null)
-
-  root.each(function rewriteSelector (node) {
-    if (!node.selector) {
-      // handle media queries
-      if (node.type === 'atrule') {
-        if (node.name === 'media' || node.name === 'supports') {
-          node.each(rewriteSelector)
-        } else if (/-?keyframes$/.test(node.name)) {
-          // register keyframes
-          keyframes[node.params] = node.params = node.params + '-' + id
-        }
-      }
-      return
-    }
-    node.selector = selectorParser(selectors => {
-      selectors.each(selector => {
-        let node = null
-        selector.each(n => {
-          // ">>>" combinator
-          if (n.type === 'combinator' && n.value === '>>>') {
-            n.value = ' '
-            n.spaces.before = n.spaces.after = ''
-            return false
-          }
-          // /deep/ alias for >>>, since >>> doesn't work in SASS
-          if (n.type === 'tag' && n.value === '/deep/') {
-            const prev = n.prev()
-            if (prev && prev.type === 'combinator' && prev.value === ' ') {
-              prev.remove()
-            }
-            n.remove()
-            return false
-          }
-          if (n.type !== 'pseudo' && n.type !== 'combinator') {
-            node = n
-          }
-        })
-        selector.insertAfter(node, selectorParser.attribute({
-          attribute: id
-        }))
-      })
-    }).processSync(node.selector)
-  })
-
-  // If keyframes are found in this <style>, find and rewrite animation names
-  // in declarations.
-  // Caveat: this only works for keyframes and animation rules in the same
-  // <style> element.
-  if (Object.keys(keyframes).length) {
-    root.walkDecls(decl => {
-      // individual animation-name declaration
-      if (/-?animation-name$/.test(decl.prop)) {
-        decl.value = decl.value.split(',')
-          .map(v => keyframes[v.trim()] || v.trim())
-          .join(',')
-      }
-      // shorthand
-      if (/-?animation$/.test(decl.prop)) {
-        decl.value = decl.value.split(',')
-          .map(v => {
-            const vals = v.trim().split(/\s+/)
-            const i = vals.findIndex(val => keyframes[val])
-            if (i !== -1) {
-              vals.splice(i, 1, keyframes[vals[i]])
-              return vals.join(' ')
-            } else {
-              return v
-            }
-          })
-          .join(',')
-      }
-    })
-  }
-})

lib/style-post-loader/plugins/trim.js

-const postcss = require('postcss')
-
-module.exports = postcss.plugin('trim', opts => css => {
-  css.walk(({ type, raws }) => {
-    if (type === 'rule' || type === 'atrule') {
-      raws.before = raws.after = '\n'
-    }
-  })
-})

package.json

@@ -35,8 +35,6 @@
   "dependencies": {
     "hash-sum": "^1.0.2",
     "loader-utils": "^1.1.0",
-    "postcss": "^6.0.20",
-    "postcss-selector-parser": "^3.1.1",
     "vue-component-compiler": "vuejs/vue-component-compiler#master",
     "vue-hot-reload-api": "^2.3.0",
     "vue-style-loader": "^4.1.0"