postcss-gap-grid-prefix

Prefix gap with grid- in CSS

This package is deprecated, please use `postcss-gap-properties` instead.
Last updated 2 years ago by jlhwung .
CC0-1.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-gap-grid-prefix 
SYNC missed versions from official npm registry.

postcss-gap-grid-prefix PostCSS Logo

CSS Standard NPM Version Linux Build Status Windows Build Status Greenkeeper Gitter Chat

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'
    }
  }
});

Current Tags

  • 1.0.0                                ...           latest (2 years ago)

1 Versions

  • 1.0.0 [deprecated]           ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (1)
Dev Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |