Convert Stylus in Vue SFC file to normal CSS

convert.js

const path = require('path')
const fs = require('fs')
const stylus = require('stylus')
const compiler = require('vue-template-compiler')
const globby = require('globby')

const targets = globby.sync(path.resolve(__dirname, '../src/**/*.vue'))

targets.forEach(file => {
  console.log('***** processing: ' + file + ' *****')

  let content = fs.readFileSync(file, 'utf8')
  let converted = false
  const parsed = compiler.parseComponent(content)

  Promise.all(
    parsed.styles
      .slice()
      .reverse()
      .map(style => {
        if (style.lang !== 'stylus') {
          return
        }

        return new Promise((resolve, reject) => {
          stylus.render(style.content, { filename: file }, (err, css) => {
            if (err) {
              reject(err)
            }

            const prittified = '\n' + css.replace(/}\n/g, '}\n\n').trim() + '\n'

            content =
              content.slice(0, style.start) +
              prittified +
              content.slice(style.end)

            converted = true
            resolve()
          })
        })
      })
  ).then(() => {
    if (!converted) {
      return
    }

    // Remove lang="stylus"
    content = content.replace(/ lang="stylus"/g, '')

    fs.writeFileSync(file, content)
  })
})

package.json

{
  "dependencies": {
    "globby": "^11.0.1",
    "stylus": "^0.54.8",
    "vue-template-compiler": "2.6.11"
  }
}