fix: split imports to variables and lists

different variable types require different overrides. single variables above vuetify styles and
merges below

Author: johnleider

.gitignore

@@ -1,5 +1,6 @@
 /node_modules/
 /dev/
+/coverage/
 
 *.swp
 

index.js

@@ -1,18 +1,5 @@
-const fs = require('fs')
-const path = require('path')
-
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-function mergeRules (opt, sass = true, type) {
-  const end = sass ? "'" : "';"
-
-  opt.data = `@import '~vuetify/src/styles/styles.sass${end}`
-  opt.data += `\n@import '@/sass/variables.${type}${end}`
-
-  return opt
-}
+// Imports
+const { mergeRules } = require('./util/helpers')
 
 module.exports = (api) => {
   const dependencies = api.service.pkg.dependencies || {}
@@ -69,23 +56,17 @@ module.exports = (api) => {
   }
 
   // Bootstrap SASS Variables
-  const hasSassVariables = fs.existsSync(api.resolve('src/sass/variables.sass'))
-  const hasScssVariables = fs.existsSync(api.resolve('src/sass/variables.scss'))
-
-  if (!hasSassVariables && !hasScssVariables) return
-
-  const type = hasSassVariables ? 'sass' : 'scss'
-
   api.chainWebpack(config => {
     ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(match => {
       for (let i = 0; i < 2; i++) {
         const boolean = Boolean(i)
+        const rule = boolean ? 'sass' : 'scss'
 
         config.module
-          .rule(boolean ? 'sass' : 'scss')
+          .rule(rule)
           .oneOf(match)
           .use('sass-loader')
-          .tap(opt => mergeRules(opt, boolean, type))
+          .tap(opt => mergeRules(api, opt, rule))
       }
     })
   })

package.json

@@ -4,7 +4,7 @@
   "description": "Vuetify Framework Plugin for Vue CLI 3",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -29,10 +29,17 @@
   "devDependencies": {
     "@release-it/conventional-changelog": "^1.1.0",
     "@vue/cli-service": "^3.11.0",
+    "husky": "^3.0.8",
+    "jest": "^24.9.0",
     "vuetify": "^2.1.0",
     "vuetify-loader": "^1.2.2"
   },
   "dependencies": {
     "shelljs": "^0.8.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn test"
+    }
   }
 }

util/__tests__/__snapshots__/helpers.spec.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`helpers.js should merge sass variable rules 1`] = `
+Object {
+  "data": "@import '@/sass/variables.sass'
+@import '@/sass/variables.scss'
+@import '@/scss/variables.sass'
+@import '@/scss/variables.scss'
+@import '@/styles/variables.sass'
+@import '@/styles/variables.scss'
+@import '~vuetify/src/styles/styles.sass'
+@import '@/sass/lists.sass'
+@import '@/sass/lists.scss'
+@import '@/scss/lists.sass'
+@import '@/scss/lists.scss'
+@import '@/styles/lists.sass'
+@import '@/styles/lists.scss'",
+}
+`;
+
+exports[`helpers.js should merge sass variable rules 2`] = `
+Object {
+  "data": "@import '@/sass/variables.sass';
+@import '@/sass/variables.scss';
+@import '@/scss/variables.sass';
+@import '@/scss/variables.scss';
+@import '@/styles/variables.sass';
+@import '@/styles/variables.scss';
+@import '~vuetify/src/styles/styles.sass';
+@import '@/sass/lists.sass';
+@import '@/sass/lists.scss';
+@import '@/scss/lists.sass';
+@import '@/scss/lists.scss';
+@import '@/styles/lists.sass';
+@import '@/styles/lists.scss';",
+}
+`;

util/__tests__/helpers.spec.js

@@ -0,0 +1,68 @@
+const helpers = require('../helpers')
+const fs = require('fs')
+
+jest.mock('fs')
+
+describe('helpers.js', () => {
+  const api = {
+    resolve: val => val
+  }
+
+  afterEach(() => {
+    fs.existsSync.mockReturnValue(false)
+  })
+
+  it('should check if file exists', () => {
+    fs.existsSync.mockReturnValue(true)
+
+    expect(helpers.fileExists(api, 'foobar')).toBe(true)
+
+    fs.existsSync.mockReturnValue(false)
+
+    expect(helpers.fileExists(api, 'foobar')).toBe(false)
+  })
+
+  it('should add an import to the data array', () => {
+    fs.existsSync.mockReturnValue(true)
+
+    const data = []
+
+    helpers.addImport(api, 'foobar', data, 'variables', "'")
+    helpers.addImport(api, 'fizzbuzz', data, 'lists', "'")
+
+    expect(data.length).toBe(4)
+
+    fs.existsSync.mockReturnValue(false)
+
+    helpers.addImport(api, 'foobar1', data, 'variables', "'")
+    helpers.addImport(api, 'fizzbuzz1', data, 'lists', "'")
+
+    expect(data.length).toBe(4)
+  })
+
+  it('should add imports to the data array', () => {
+    fs.existsSync.mockReturnValue(true)
+
+    const data = []
+
+    helpers.addImports(api, 'foobar', data, "';")
+
+    expect(data.length).toBe(6)
+  })
+
+  it('should merge sass variable rules', () => {
+    fs.existsSync.mockReturnValue(true)
+
+    const opt = {}
+
+    helpers.mergeRules(api, opt, 'sass')
+
+    expect(opt).toMatchSnapshot()
+
+    const opt2 = {}
+
+    helpers.mergeRules(api, opt2, 'scss')
+
+    expect(opt2).toMatchSnapshot()
+  })
+})

util/helpers.js

@@ -0,0 +1,59 @@
+// Imports
+const fs = require('fs')
+
+// Check for existence of file and add import
+function addImport (api, file, data, folder, end) {
+  // sass & scss file types
+  for (const ext of ['sass', 'scss']) {
+    const path = `${folder}/${file}.${ext}`
+
+    // If file doesn't exist in user
+    // project, continue to next
+    if (!fileExists(api, `src/${path}`)) continue
+
+    // If file exists, push it into
+    // the import statement
+    data.push(`@import '@/${path}${end}`)
+  }
+}
+
+// Go through each folder and add available imports
+function addImports (api, file, data, end) {
+  // supported folders that can contain
+  // a variables or lists file
+  for (const folder of ['sass', 'scss', 'styles']) {
+    addImport(api, file, data, folder, end)
+  }
+}
+
+// Check if file exists in user project
+function fileExists (api, file) {
+  return fs.existsSync(api.resolve(file))
+}
+
+// Create an import statement
+// to bootstrap a users variables
+function mergeRules (api, opt, ext) {
+  const data = []
+  const end = ext === 'sass' ? "'" : "';"
+
+  addImports(api, 'variables', data, end)
+
+  // Vuetify styles must go between variables and lists
+  // since variables must be defined at the top level
+  // and lists require existing variables to merge
+  data.push(`@import '~vuetify/src/styles/styles.sass${end}`)
+
+  addImports(api, 'lists', data, end)
+
+  opt.data = data.join('\n')
+
+  return opt
+}
+
+module.exports = {
+  addImport,
+  addImports,
+  fileExists,
+  mergeRules,
+}