@metahub/karma-postcss-preprocessor
Karma preprocessor to compile css files with postcss with sourcemap and watch support
Last updated a month ago by pvdlg .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @metahub/karma-postcss-preprocessor 
SYNC missed versions from official npm registry.

karma-postcss-preprocessor

Karma preprocessor to compile postcss and scss files with Postcss.

Travis AppVeyor Codecov Greenkeeper badge license

Installation

npm install postcss @metahub/karma-postcss-preprocessor --save-dev

Postcss plugins have to be installed individually. For example:

npm install autoprefixer cssnano --save-dev

Configuration

All the postcss options can be passed to postcssPreprocessor.options.

In addition the preprocessor accept a transformPath function, to rewrite the path on which the files are deployed on the Karma webserver. If not specified, the processed files will be accessible with the same paths as the originals. For example test/fixtures/myStyle.css will be deployed as base/test/fixtures/myStyle.css.

Standard

const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = function(config) {
  config.set({
    files: ['src/sass/main.css'],

    plugins: ['@metahub/karma-postcss-preprocessor', 'karma-*'],
    preprocessors: {
      '**/*.css': ['postcss'],
    },

    postcssPreprocessor: {
      options: {
        // To include inlined sourcemaps as data URIs
        map: true,
        plugins: [autoprefixer, cssnano],
      },
      // File test/fixtures/main.ccs will be accessible in the unit test on path base/styles/main.css
      transformPath: filePath => filePath.replace('test/fixtures/', 'styles/')
    },
  });
};

Note: Karma can auto-load plugins named karma-* (see plugins). Unfortunatly it doesn't work with scoped packages, therefore @metahub/karma-postcss-preprocessor has to be explicitly added to the plugins configuration. In order to continue to automatically load other plugins you can add karma-* to the plugins configuration.

Note: @metahub/karma-postcss-preprocessor embed its own watcher to monitor imported dependencies, therefore only the main entry point has to be configured in Karma. If Karma is configured with autoWatch: true, the modification of an imported css file will trigger a new build and test run.

Configured Preprocessors

See configured preprocessors.

const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = function(config) {  
  config.set({
    files: ['src/sass/main.css', 'test/fixtures/myFixture.css'],

    plugins: ['@metahub/karma-postcss-preprocessor', 'karma-*'],
    preprocessors: {
      'src/**/*.css': ['postcss_1'],
      'test/fixtures/**/*.css': ['postcss_2'],
    },

    customPreprocessors: {
      postcss_1: {
        base: 'postcss',
        options: {
          plugins: [autoprefixer, cssnano]
          map: true,
        },
        // File test/fixtures/myFixture.ccs will be accessible in the unit test on path test/fixtures/myFixture.min.ccs
        transformPath: filePath => filePath.replace(/\.css$/, '.min.css')
      },
      postcss_2: {
        base: 'postcss',
        options: {
          plugins: [autoprefixer],
        },
      },
    },
  });
};

With karma-sass-preprocessor

To compile sass/scss files with node-sass then process them with Postcss you can use @metahub/karma-sass-preprocessor.

npm install node-sass @metahub/karma-sass-preprocessor --save-dev
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = function(config) {
  config.set({
    files: ['src/sass/main.scss', 'test/fixtures/myFixture.scss'],

    plugins: ['@metahub/karma-sass-preprocessor', '@metahub/karma-postcss-preprocessor', 'karma-*'],
    preprocessors: {
      'src/**/*.scss': ['sass', 'postcss'],
      'test/fixtures/**/*.scss': ['sass', 'postcss'],
    },

    sassPreprocessor: {
      options: {
        sourceMap: true,
      },
    },
    postcssPreprocessor: {
      options: {
        map: true,
        plugins: [autoprefixer, cssnano],
      },
    },
  });
};

Current Tags

  • 3.0.0                                ...           latest (a month ago)

12 Versions

  • 3.0.0                                ...           a month ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           2 years ago
  • 1.2.4                                ...           2 years ago
  • 1.2.3                                ...           2 years ago
  • 1.2.2                                ...           2 years ago
  • 1.2.1                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 12
This Month 13
Last Day 0
Last Week 1
Last Month 20
Dependencies (5)
Dev Dependencies (27)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |