.browserslistrc

+>0.2%
+not op_mini all
+Safari > 15
+Firefox >= 115
+Firefox ESR
+Android > 4
+not dead

.eslintignore

-build/*.js
-config/*.js

.eslintrc.js

-module.exports = {
-  root: true,
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-    sourceType: 'module'
-  },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: [
-    'standard',
-    'plugin:vue/recommended'
-  ],
-  // required to lint *.vue files
-  plugins: [
-    'vue'
-  ],
-  // add your custom rules here
-  rules: {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'vue/require-prop-types': 0,
-    'vue/multi-word-component-names': 0
-  }
-}

.gitattributes

-/build/webpack.prod.conf.js export-subst
+/build/commit_hash.js export-subst

.gitignore

@@ -7,4 +7,6 @@ test/e2e/reports
 selenium-debug.log
 .idea/
 config/local.json
-static/emoji.json
+src/assets/emoji.json
+logs/
+__screenshots__/

.gitlab-ci.yml

 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:16
+image: node:18
 
 stages:
   - check-changelog
@@ -38,25 +38,36 @@ lint:
   stage: lint
   script:
     - yarn
-    - npm run lint
-    - npm run stylelint
+    - yarn lint
+    - yarn stylelint
 
 test:
   stage: test
+  tags:
+    - amd64
+    - himem
   variables:
     APT_CACHE_DIR: apt-cache
   script:
     - mkdir -pv $APT_CACHE_DIR && apt-get -qq update
-    - apt install firefox-esr -y --no-install-recommends
-    - firefox --version
     - yarn
-    - yarn unit
+    - yarn playwright install firefox
+    - yarn playwright install-deps
+    - yarn unit-ci
+  artifacts:
+    # When the test fails, upload screenshots for better context on why it fails
+    paths:
+      - test/**/__screenshots__
+    when: on_failure
 
 build:
   stage: build
+  tags:
+    - amd64
+    - himem
   script:
     - yarn
-    - npm run build
+    - yarn build
   artifacts:
     paths:
     - dist/

.node-version

-16.18.1
+18.20.7

CHANGELOG.md

@@ -3,6 +3,74 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## 2.7.1
+Bugfix release. Added small optimizations to emoji picker that should make it a bit more responsive, however it needs rather large change to make it more performant which might come in a major release.
+
+### Fixed
+- Instance default theme not respected
+- Nested panel header having wrong sticky position if navbar height != panel header height
+- Toggled buttons having bad contrast (when using v2 theme)
+
+### Changed
+- Simplify the OAuth client_name to 'PleromaFE'
+- Small optimizations to emoji picker
+
+
+## 2.7.0
+
+### Known issues
+We got some reports related to emoji picker performance, this hopefully will be fixed in 2.7.1.
+
+### Notes
+This release overhauls how themes work, themes now need to be "compiled", which can cause some delay when loading for the first time and temporarily look "wrong" in some places (popups, menus, dialogs). Please do report any issues, especially if your theme looks wrong or breaks interface when loading. Also report issues if you're experiencing constant performance issues.
+
+To admins: remember that you can update PleromaFE to recent `master` or `develop` in admin dashboard in "Front-ends" tab, scroll down to find PleromaFE box and click "Reinstall `master`" or dropdown and then "Reinstall `develop`". Currently there is no mechanism to check if there is an update or not.
+
+### Changed
+- Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system aka "Themes 3".
+- Notifications are no longer sorted by "seen" status since interacting with them can change their read status and makes UI jumpy. Old behavior can be restored in settings.
+- Notifications are now shown through a ServiceWorker (since mobile chrome does not allow them otherwise), it's always enabled, even if previously we only enabled it for WebPush notifications only. If you don't like websites "running" while closed, check how to disable them in your browser. Old way to show notifications will be used as a fallback but might not have all the new features.
+- Reorganized Settings modal to move out visual stuff into Appearance tab
+
+### Added
+- Emoji pack management to the admin panel
+- Support `status` notification type (subscriptions/bell, fixes PleromaFE on newer PleromaBE versions)
+- Poll end notifications.
+- Added option to not mark all notifications when closing notifications drawer on mobile, this creates a new button to mark all as seen.
+- Option to always "show" notifications when using web push for better compatibility with some browsers (chrome, edge, safari)
+- Option to toggle what notification types appear in native notifications, by default less important ones (likes, repeats, etc) will no longer show up in native notifications.
+- Option to treat non-interactive notifications (likes, repeats et all) as seen for visual purposes (no read mark, ignored in counters, still can show in native notifications)
+- Ability to resize UI (and certain components) scale independent of browser/text scale
+- Ability to override certain aspects of UI style independent of theme used (UI roundness, fonts, underlay)
+- Theme selector with visual previews of the theme
+- Display loading and error indicator for conversation page
+- Option to only show scrobbles that are recent enough
+- Interacting (opening reply box etc) or simply clicking on non-interactive notifications now marks them as read. Clicking on native notifications for non-interactive ones also marks them as seen.
+- Support group actors
+- Focusing into a tab clears all current desktop notifications
+- Ability to change size of emoji
+- Ability to view APNG (Animated PNG) attachments.
+- Support showing extra notifications in the notifications column
+- Create a link to the URL of the scrobble when it's present
+- Allow hiding custom emojis in picker.
+- Ability to mute sensitive posts (ported from eintei).
+- Native notifications now also have "badge" property that matches instance's favicon (visible in Android Chromium at least)
+- Display public favorites on user profiles
+- Display quotes count on posts and add quotes list page
+- Show a dedicated registration notice page when further action is required after registering
+
+### Fixed
+- Synchronized requested notification types with backend, hopefully should fix missing notifications for polls and follow requests
+- Error that appeared on mobile Chromium (and derivatives) when native notifications are allowed
+- Being unable to set notification visibility for reports and follow requests
+- Native notifications appearing as many times as there are open tabs. Clicking on notification will focus last focused tab.
+- The expiry date indication won't be shown if the poll never expires
+- Profile mentions causing a 422 error on newer PleromaBE versions.
+- Color inputs are less ugly now
+- Unread notifications should now properly catch up between sessions (eventually) in polling mode
+- Video posters on Safari
+
+
 ## 2.6.1
 ### Fixed
 - fix admin dashboard not having any feedback on frontend installation

build/build.js

-// https://github.com/shelljs/shelljs
-require('./check-versions')()
-require('shelljs/global')
-env.NODE_ENV = 'production'
-
-var path = require('path')
-var config = require('../config')
-var ora = require('ora')
-var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
-
-console.log(
-  '  Tip:\n' +
-  '  Built files are meant to be served over an HTTP server.\n' +
-  '  Opening index.html over file:// won\'t work.\n'
-)
-
-var spinner = ora('building for production...')
-spinner.start()
-
-var updateEmoji = require('./update-emoji').updateEmoji
-updateEmoji()
-
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-cp('-R', 'static/*', assetsPath)
-
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n')
-  if (stats.hasErrors()) {
-    console.error('See above for errors.')
-    process.exit(1)
-  }
-})

build/check-versions.js → build/check-versions.mjs

-var semver = require('semver')
-var chalk = require('chalk')
-var packageConfig = require('../package.json')
-var exec = function (cmd) {
-  return require('child_process')
-    .execSync(cmd).toString().trim()
-}
+import semver from 'semver'
+import chalk from 'chalk'
+
+import packageConfig from '../package.json' with { type: 'json' }
 
 var versionRequirements = [
   {
     name: 'node',
     currentVersion: semver.clean(process.version),
     versionRequirement: packageConfig.engines.node
-  },
-  {
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
   }
 ]
 
-module.exports = function () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
+export default function () {
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -32,14 +24,12 @@ module.exports = function () {
   }
 
   if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
-      console.log('  ' + warning)
+    console.warn(chalk.yellow('\nTo use this template, you must update following to modules:\n'))
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.warn('  ' + warning)
     }
-    console.log()
+    console.warn()
     process.exit(1)
   }
 }

build/commit_hash.js

+import childProcess from 'child_process'
+
+export const getCommitHash = (() => {
+  const subst = "$Format:%h$"
+  if(!subst.match(/Format:/)) {
+    return subst
+  } else {
+    try {
+      return childProcess
+        .execSync('git rev-parse --short HEAD')
+        .toString()
+        .trim()
+    } catch (e) {
+      console.error('Failed run git:', e)
+      return 'UNKNOWN'
+    }
+  }
+})

build/copy_plugin.js

+import serveStatic from 'serve-static'
+import { resolve } from 'node:path'
+import { cp } from 'node:fs/promises'
+
+const getPrefix = s => {
+  const padEnd = s.endsWith('/') ? s : s + '/'
+  return padEnd.startsWith('/') ? padEnd : '/' + padEnd
+}
+
+const copyPlugin = ({ inUrl, inFs }) => {
+  const prefix = getPrefix(inUrl)
+  const subdir = prefix.slice(1)
+  let copyTarget
+  const handler = serveStatic(inFs)
+
+  return [{
+    name: 'copy-plugin-serve',
+    apply: 'serve',
+    configureServer (server) {
+      server.middlewares.use(prefix, handler)
+    }
+  }, {
+    name: 'copy-plugin-build',
+    apply: 'build',
+    configResolved (config) {
+      copyTarget = resolve(config.root, config.build.outDir, subdir)
+    },
+    closeBundle: {
+      order: 'post',
+      sequential: true,
+      async handler () {
+        console.log(`Copying '${inFs}' to ${copyTarget}...`)
+        await cp(inFs, copyTarget, { recursive: true })
+        console.log('Done.')
+      }
+    }
+  }]
+}
+
+export default copyPlugin

build/dev-client.js

-/* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})

build/dev-server.js

-require('./check-versions')()
-var config = require('../config')
-if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var opn = require('opn')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
-
-var updateEmoji = require('./update-emoji').updateEmoji
-updateEmoji()
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  writeToDisk: true,
-  stats: {
-    colors: true,
-    chunks: false
-  }
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
-
-// FIXME: The statement below gives error about hooks being required in webpack 5.
-// force page reload when html-webpack-plugin template changes
-// compiler.plugin('compilation', function (compilation) {
-//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-//     // FIXME: This supposed to reload whole page when index.html is changed,
-//     // however now it reloads entire page on every breath, i suppose the order
-//     // of plugins changed or something. It's a minor thing and douesn't hurt
-//     // disabling it, constant reloads hurt much more
-
-//     // hotMiddleware.publish({ action: 'reload' })
-//     // cb()
-//   })
-// })
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware.createProxyMiddleware(context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-module.exports = app.listen(port, function (err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-  var uri = 'http://localhost:' + port
-  console.log('Listening at ' + uri + '\n')
-  // opn(uri)
-})

build/emojis_plugin.js

+import { resolve } from 'node:path'
+import { access } from 'node:fs/promises'
+import { languages, langCodeToCldrName } from '../src/i18n/languages.js'
+
+const annotationsImportPrefix = '@kazvmoe-infra/unicode-emoji-json/annotations/'
+const specialAnnotationsLocale = {
+  ja_easy: 'ja'
+}
+
+const internalToAnnotationsLocale = (internal) => specialAnnotationsLocale[internal] || internal
+
+// This gets all the annotations that are accessible (whose language
+// can be chosen in the settings). Data for other languages are
+// discarded because there is no way for it to be fetched.
+const getAllAccessibleAnnotations = async (projectRoot) => {
+  const imports = (await Promise.all(
+    languages
+      .map(async lang => {
+        const destLang = internalToAnnotationsLocale(lang)
+        const importModule = `${annotationsImportPrefix}${destLang}.json`
+        const importFile = resolve(projectRoot, 'node_modules', importModule)
+        try {
+          await access(importFile)
+          return `'${lang}': () => import('${importModule}')`
+        } catch (e) {
+          return
+        }
+      })))
+        .filter(k => k)
+        .join(',\n')
+
+  return `
+export const annotationsLoader = {
+  ${imports}
+}
+`
+}
+
+const emojiAnnotationsId = 'virtual:pleroma-fe/emoji-annotations'
+const emojiAnnotationsIdResolved = '\0' + emojiAnnotationsId
+
+const emojisPlugin = () => {
+  let projectRoot
+  return {
+    name: 'emojis-plugin',
+    configResolved (conf) {
+      projectRoot = conf.root
+    },
+    resolveId (id) {
+      if (id === emojiAnnotationsId) {
+        return emojiAnnotationsIdResolved
+      }
+      return null
+    },
+    async load (id) {
+      if (id === emojiAnnotationsIdResolved) {
+        return await getAllAccessibleAnnotations(projectRoot)
+      }
+      return null
+    }
+  }
+}
+
+export default emojisPlugin

build/msw_plugin.js

+import { resolve } from 'node:path'
+import { readFile } from 'node:fs/promises'
+
+const target = 'node_modules/msw/lib/mockServiceWorker.js'
+
+const mswPlugin = () => {
+  let projectRoot
+  return {
+    name: 'msw-plugin',
+    apply: 'serve',
+    configResolved (conf) {
+      projectRoot = conf.root
+    },
+    configureServer (server) {
+      server.middlewares.use(async (req, res, next) => {
+        if (req.path === '/mockServiceWorker.js') {
+          const file = await readFile(resolve(projectRoot, target))
+          res.set('Content-Type', 'text/javascript')
+          res.send(file)
+        } else {
+          next()
+        }
+      })
+    }
+  }
+}
+
+export default mswPlugin

build/service_worker_messages.js

+import { languages, langCodeToJsonName } from '../src/i18n/languages.js'
+import { readFile } from 'node:fs/promises'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const i18nDir = resolve(
+  dirname(dirname(fileURLToPath(import.meta.url))),
+  'src/i18n'
+)
+
+export const i18nFiles = languages.reduce((acc, lang) => {
+  const name = langCodeToJsonName(lang)
+  const file = resolve(i18nDir, name + '.json')
+  acc[lang] = file
+  return acc
+}, {})
+
+export const generateServiceWorkerMessages = async () => {
+  const msgArray = await Promise.all(Object.entries(i18nFiles).map(async ([lang, file]) => {
+    const fileContent = await readFile(file, 'utf-8')
+    const msg = {
+      notifications: JSON.parse(fileContent).notifications || {}
+    }
+    return [lang, msg]
+  }))
+  return msgArray.reduce((acc, [lang, msg]) => {
+    acc[lang] = msg
+    return acc
+  }, {})
+}

build/sw_plugin.js

+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+import { readFile } from 'node:fs/promises'
+import { build } from 'vite'
+import * as esbuild from 'esbuild'
+import { generateServiceWorkerMessages, i18nFiles } from './service_worker_messages.js'
+
+const getSWMessagesAsText = async () => {
+  const messages = await generateServiceWorkerMessages()
+  return `export default ${JSON.stringify(messages, undefined, 2)}`
+}
+const projectRoot = dirname(dirname(fileURLToPath(import.meta.url)))
+
+export const devSwPlugin = ({
+  swSrc,
+  swDest,
+  transformSW,
+  alias
+}) => {
+  const swFullSrc = resolve(projectRoot, swSrc)
+  const esbuildAlias = {}
+  Object.entries(alias).forEach(([source, dest]) => {
+    esbuildAlias[source] = dest.startsWith('/') ? projectRoot + dest : dest
+  })
+
+  return {
+    name: 'dev-sw-plugin',
+    apply: 'serve',
+    configResolved (conf) {
+    },
+    resolveId (id) {
+      const name = id.startsWith('/') ? id.slice(1) : id
+      if (name === swDest) {
+        return swFullSrc
+      }
+      return null
+    },
+    async load (id) {
+      if (id === swFullSrc) {
+        return readFile(swFullSrc, 'utf-8')
+      }
+      return null
+    },
+    /**
+     * vite does not bundle the service worker
+     * during dev, and firefox does not support ESM as service worker
+     * https://bugzilla.mozilla.org/show_bug.cgi?id=1360870
+     */
+    async transform (code, id) {
+      if (id === swFullSrc && transformSW) {
+        const res = await esbuild.build({
+          entryPoints: [swSrc],
+          bundle: true,
+          write: false,
+          outfile: 'sw-pleroma.js',
+          alias: esbuildAlias,
+          plugins: [{
+            name: 'vite-like-root-resolve',
+            setup (b) {
+              b.onResolve(
+                { filter: new RegExp(/^\//) },
+                args => ({
+                  path: resolve(projectRoot, args.path.slice(1))
+                })
+              )
+            }
+          }, {
+            name: 'sw-messages',
+            setup (b) {
+              b.onResolve(
+                { filter: new RegExp('^' + swMessagesName + '$') },
+                args => ({
+                  path: args.path,
+                  namespace: 'sw-messages'
+                }))
+              b.onLoad(
+                { filter: /.*/, namespace: 'sw-messages' },
+                async () => ({
+                  contents: await getSWMessagesAsText()
+                }))
+            }
+          }]
+        })
+        const text = res.outputFiles[0].text
+        return text
+      }
+    }
+  }
+}
+
+// Idea taken from
+// https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/build.ts
+// rollup does not support compiling to iife if we want to code-split;
+// however, we must compile the service worker to iife because of browser support.
+// Run another vite build just for the service worker targeting iife at
+// the end of the build.
+export const buildSwPlugin = ({
+  swSrc,
+  swDest,
+}) => {
+  let config
+  return {
+    name: 'build-sw-plugin',
+    enforce: 'post',
+    apply: 'build',
+    configResolved (resolvedConfig) {
+      config = {
+        define: resolvedConfig.define,
+        resolve: resolvedConfig.resolve,
+        plugins: [swMessagesPlugin()],
+        publicDir: false,
+        build: {
+          ...resolvedConfig.build,
+          lib: {
+            entry: swSrc,
+            formats: ['iife'],
+            name: 'sw_pleroma'
+          },
+          emptyOutDir: false,
+          rollupOptions: {
+            output: {
+              entryFileNames: swDest
+            }
+          }
+        },
+        configFile: false
+      }
+    },
+    closeBundle: {
+      order: 'post',
+      sequential: true,
+      async handler () {
+        console.log('Building service worker for production')
+        await build(config)
+      }
+    }
+  }
+}
+
+const swMessagesName = 'virtual:pleroma-fe/service_worker_messages'
+const swMessagesNameResolved = '\0' + swMessagesName
+
+export const swMessagesPlugin = () => {
+  return {
+    name: 'sw-messages-plugin',
+    resolveId (id) {
+      if (id === swMessagesName) {
+        Object.values(i18nFiles).forEach(f => {
+          this.addWatchFile(f)
+        })
+        return swMessagesNameResolved
+      } else {
+        return null
+      }
+    },
+    async load (id) {
+      if (id === swMessagesNameResolved) {
+        return await getSWMessagesAsText()
+      }
+      return null
+    }
+  }
+}

build/update-emoji.js

 
-module.exports = {
-  updateEmoji () {
-    const emojis = require('@kazvmoe-infra/unicode-emoji-json/data-by-group')
-    const fs = require('fs')
+import emojis from '@kazvmoe-infra/unicode-emoji-json/data-by-group.json' with { type: 'json' }
+import fs from 'fs'
 
-    Object.keys(emojis)
-      .map(k => {
-        emojis[k].map(e => {
-          delete e.unicode_version
-          delete e.emoji_version
-          delete e.skin_tone_support_unicode_version
-        })
-      })
+Object.keys(emojis)
+  .map(k => {
+    emojis[k].map(e => {
+      delete e.unicode_version
+      delete e.emoji_version
+      delete e.skin_tone_support_unicode_version
+    })
+  })
 
-    const res = {}
-    Object.keys(emojis)
-      .map(k => {
-        const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase()
-        res[groupId] = emojis[k]
-      })
+const res = {}
+Object.keys(emojis)
+  .map(k => {
+    const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase()
+    res[groupId] = emojis[k]
+  })
 
-    console.info('Updating emojis...')
-    fs.writeFileSync('static/emoji.json', JSON.stringify(res))
-    console.info('Done.')
-  }
-}
+console.info('Updating emojis...')
+fs.writeFileSync('src/assets/emoji.json', JSON.stringify(res))
+console.info('Done.')

build/utils.js

-var path = require('path')
-var config = require('../config')
-var sass = require('sass')
-var MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
-      ? config.build.assetsSubDirectory
-      : config.dev.assetsSubDirectory
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  function generateLoaders (loaders) {
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return [MiniCssExtractPlugin.loader].concat(loaders)
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
-  }
-
-  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
-  return [
-    {
-      test: /\.(post)?css$/,
-      use: generateLoaders(['css-loader', 'postcss-loader']),
-    },
-    {
-      test: /\.less$/,
-      use: generateLoaders(['css-loader', 'postcss-loader', 'less-loader']),
-    },
-    {
-      test: /\.sass$/,
-      use: generateLoaders([
-        'css-loader',
-        'postcss-loader',
-        {
-          loader: 'sass-loader',
-          options: {
-            indentedSyntax: true
-          }
-        }
-      ])
-    },
-    {
-      test: /\.scss$/,
-      use: generateLoaders(['css-loader', 'postcss-loader', 'sass-loader'])
-    },
-    {
-      test: /\.styl(us)?$/,
-      use: generateLoaders(['css-loader', 'postcss-loader', 'stylus-loader']),
-    },
-  ]
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  return exports.cssLoaders(options)
-}