vue-cli-plugin-tailwind-rollup-esm-component/generator.js

Vue CLI 3.0 plugin (with Tailwind, PurgeCSS and Rollup) to use as a component starter

const fs = require('fs')
const path = require('path')
const chalk = require('chalk')
const emoji = require('node-emoji')

module.exports = (api, options, rootOptions) => {
  console.log(`\n${emoji.get('pizza')}  Thank you for using ${chalk.cyan('Tailwind / Rollup ESM Component Starter Plugin')}`)
  console.log(`    For questions, issues and recommendations please visit: `)
  console.log(`    ${chalk.green('https://github.com/byte-size/vue-cli-plugin-tailwind-rollup-esm-component')}`)

  const caseHelpers = require('./helpers/case-helpers')()
  const postCssHelpers = require('./helpers/postcss-helpers')(api)

  // Remove existing postcss config
  postCssHelpers.getPostCSSConfig()

  // Make sure the input comes in PascalCase and if not, this helper will convert whatever comes to PascalCase
  options.componentNamePascal = caseHelpers.toPascalCase(options.componentNamePascal)

  // Add kebab-case component name to the options (original options are coming from plugin prompts)
  const kebabCaseName = caseHelpers.toKebabCase(options.componentNamePascal)
  Object.assign(options, { componentNameKebab: kebabCaseName })

  // Change default component filename to pascalcase
  fs.rename(
    path.join(__dirname, 'template/src/components/Component.vue'),
    path.join(__dirname, `template/src/components/${options.componentNamePascal}.vue`),
    err => {
      if (err) throw err
    }
  )
  // Change default component unit test spec filename to pascalcase
  fs.rename(
    path.join(__dirname, 'template/tests/unit/Component.spec.js'),
    path.join(__dirname, `template/tests/unit/${options.componentNamePascal}.spec.js`),
    err => {
      if (err) throw err
    }
  )

  // Install Rollup and supporting packages and add rollup scripts to build
  // Note: Package versions last updated: 07/09/2018
  api.extendPackage({
    name: `${options.monorepoName}/${options.componentPrefix}-${options.componentNameKebab}`,
    main: `dist/${options.componentPrefix}-${options.componentNameKebab}.esm.js`,
    files: ['dist/*'],
    devDependencies: {
      tailwindcss: '^0.6.6',
      rollup: '^0.66.6',
      nodemon: '^1.18.5',
      'rollup-plugin-buble': '^0.19.4',
      'rollup-plugin-filesize': '^5.0.1',
      'rollup-plugin-uglify-es': '0.0.1',
      'rollup-plugin-vue': '^4.3.2',
      '@fullhuman/postcss-purgecss': '^1.1.0'
    },
    scripts: {
      dev: 'nodemon -e vue --watch src --exec npm run push',
      push: 'npm run rollup && yalc push',
      rollup: 'rollup --config src/rollup/rollup.config.js'
    }
  })

  // Render template
  api.render('./template', options)

  // Modify App.vue to include the new component
  api.onCreateComplete(() => {
    // get content
    const appPath = api.resolve('./src/App.vue')
    let contentMain = fs.readFileSync(appPath, { encoding: 'utf-8' })
    const lines = contentMain.split(/\r?\n/g).reverse()

    // inject Import
    const lastImportIndex = lines.findIndex(line => line.match(/^import/))
    lines[lastImportIndex] += `\n\n// Tailwind\nimport './tailwind/tailwind.postcss'`
    lines[lastImportIndex] += `\n\nimport ${options.componentNamePascal} from './components/${options.componentNamePascal}.vue'`

    // inject Component
    const lastCompononentIndex = lines.findIndex(line => line.match(/components/))
    lines[lastCompononentIndex] += `\n    ${options.componentNamePascal},`

    // inject HTML Tag
    const lastTagIndex = lines.findIndex(line => line.match(/logo.png/))
    lines[lastTagIndex] += `\n    <${options.componentNamePascal}/>`

    // modify app
    contentMain = lines.reverse().join('\n')
    fs.writeFileSync(appPath, contentMain, { encoding: 'utf-8' })
  })
}