postcss-gap-grid-prefix

postcss-gap-grid-prefix lets you use gap|row-gap|column-gap to replace legacy grid-* prefixed properties in CSS, following the CSS Box Alignment Module Level 3 specification.

.container {
  gap: 42px 1vmin;
  row-gap: 42px;
  column-gap: 1vmin;
}

/* becomes */

.container {
  grid-gap: 42px 1vmin;
  gap: 42px 1vmin;
  grid-row-gap: 42px;
  row-gap: 42px;
  grid-column-gap: 1vmin;
  column-gap: 1vmin;
}

Usage

Add postcss-gap-grid-prefix to your build tool:

npm install postcss-gap-grid-prefix --save-dev

Node

Use postcss-gap-grid-prefix to process your CSS:

import postcssGapGridPrefix from 'postcss-gap-grid-prefix';

postcssGapGridPrefix.process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use postcss-gap-grid-prefix as a plugin:

import postcss from 'postcss';
import postcssGapGridPrefix from 'postcss-gap-grid-prefix';

postcss([
  postcssGapGridPrefix(/* options */)
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use postcss-gap-grid-prefix in your Gulpfile:

import postcss from 'gulp-postcss';
import postcssGapGridPrefix from 'postcss-gap-grid-prefix';

gulp.task('css', () => gulp.src('./src/*.css').pipe(
  postcss([
    postcssGapGridPrefix(/* options */)
  ])
).pipe(
  gulp.dest('.')
));

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use postcss-gap-grid-prefix in your Gruntfile:

import postcssGapGridPrefix from 'postcss-gap-grid-prefix';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
       postcssGapGridPrefix()
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});