Back to Repositories

Testing CSS Preprocessor Integration in Vue CLI Service

This test suite validates CSS preprocessing functionality in Vue CLI’s service package, focusing on autoprefixer, minification, and PostCSS plugin integration. The tests ensure proper CSS transformation and optimization during the build process.

Test Coverage Overview

The test suite covers essential CSS processing capabilities in Vue CLI:

Autoprefixer vendor prefix generation
CSS minification for both inline and extracted styles
Custom PostCSS plugin integration
Calculation optimization during build process

Tests verify both standard and edge cases for CSS transformations.

Implementation Analysis

The testing approach uses Jest with async/await patterns for project creation and manipulation.

Tests follow a consistent structure: creating test projects, modifying configurations, running builds, and asserting expected CSS transformations. Each test focuses on isolated CSS processing features while maintaining realistic Vue project contexts.

Technical Details

Testing Framework: Jest
Project Creation: @vue/cli-test-utils
Build Tool: vue-cli-service
Configuration: vue.config.js modifications
Test Timeout: 300000ms
Environment Variables: VUE_CLI_TEST_MINIMIZE

Best Practices Demonstrated

The test suite exemplifies robust testing practices for build tooling.

Notable practices include:

Isolated test environments per case
Comprehensive assertion patterns
Dynamic configuration testing
Clean setup and teardown
Explicit expected outcomes

vuejs/vue-cli

packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js

            
jest.setTimeout(300000)

const create = require('@vue/cli-test-utils/createTestProject')
const { defaultPreset } = require('@vue/cli/lib/options')

test('autoprefixer', async () => {
  const project = await create('css-autoprefixer', defaultPreset)

  await project.write('vue.config.js', 'module.exports = { filenameHashing: false }\n')

  const appVue = await project.read('src/App.vue')
  await project.write('src/App.vue', appVue.replace('#app {', '#app {\n  user-select: none;'))

  await project.run('vue-cli-service build')

  const css = await project.read('dist/css/app.css')
  expect(css).toMatch('-webkit-user-select')
})

test('CSS inline minification', async () => {
  const project = await create('css-inline-minification', defaultPreset)

  await project.write('vue.config.js', 'module.exports = { filenameHashing: false, css: { extract: false } }\n')

  const appVue = await project.read('src/App.vue')
  await project.write('src/App.vue',
    appVue.replace(
      '#app {',

      '#app {\n  height: calc(100px * 2);'
    )
  )
  await project.run('vue-cli-service build')
  const appJs = await project.read('dist/js/app.js')
  expect(appJs).not.toMatch('calc(100px')
  expect(appJs).toMatch('height:200px;')
})

test('CSS minification', async () => {
  const project = await create('css-minification', defaultPreset)

  await project.write('vue.config.js', 'module.exports = { filenameHashing: false }\n')

  const appVue = await project.read('src/App.vue')
  await project.write('src/App.vue',
    appVue.replace(
      '#app {',

      '#app {\n  height: calc(100px * 2);'
    )
  )
  process.env.VUE_CLI_TEST_MINIMIZE = true
  await project.run('vue-cli-service build')
  const appCss = await project.read('dist/css/app.css')
  expect(appCss).not.toMatch('calc(100px')
  expect(appCss).toMatch('height:200px;')
})

test('Custom PostCSS plugins', async () => {
  const project = await create('css-custom-postcss', defaultPreset)
  await project.write('vue.config.js', `
  const toRedPlugin = () => {
    return {
      postcssPlugin: 'to-red',
      Declaration (decl) {
        if (decl.prop === 'color') {
          decl.value = 'red'
        }
      }
    }
  }
  toRedPlugin.postcss = true

  module.exports = {
    filenameHashing: false,
    css: {
      loaderOptions: {
        postcss: {
          postcssOptions: { plugins: [toRedPlugin] }
        }
      }
    }
  }`)
  await project.run('vue-cli-service build')
  const appCss = await project.read('dist/css/app.css')
  expect(appCss).toMatch('color:red')
})