postcss-gap-properties
Advanced tools
Comparing version 1.0.0 to 2.0.0
# Changes to PostCSS Gap Properties | ||
### 2.0.0 (September 17, 2018) | ||
- Updated: Support for PostCSS v7+ | ||
- Updated: Support for Node v6+ | ||
### 1.0.0 (April 30, 2018) | ||
- Initial version |
@@ -7,24 +7,21 @@ 'use strict'; | ||
// gap shorthand property matcher | ||
var gapPropertyRegExp = /^(column-gap|gap|row-gap)$/i; | ||
const gapPropertyRegExp = /^(column-gap|gap|row-gap)$/i; | ||
var index = postcss.plugin('postcss-gap-properties', opts => { | ||
const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; | ||
return root => { | ||
// for each shorthand gap, column-gap, or row-gap declaration | ||
root.walkDecls(gapPropertyRegExp, decl => { | ||
// insert a grid-* fallback declaration | ||
decl.cloneBefore({ | ||
prop: `grid-${decl.prop}` | ||
}); // conditionally remove the original declaration | ||
var index = postcss.plugin('postcss-gap-properties', function (opts) { | ||
var preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; | ||
return function (root) { | ||
// for each shorthand gap, column-gap, or row-gap declaration | ||
root.walkDecls(gapPropertyRegExp, function (decl) { | ||
// insert a grid-* fallback declaration | ||
decl.cloneBefore({ | ||
prop: `grid-${decl.prop}` | ||
}); | ||
// conditionally remove the original declaration | ||
if (!preserve) { | ||
decl.remove(); | ||
} | ||
}); | ||
}; | ||
if (!preserve) { | ||
decl.remove(); | ||
} | ||
}); | ||
}; | ||
}); | ||
module.exports = index; | ||
//# sourceMappingURL=index.cjs.js.map |
{ | ||
"name": "postcss-gap-properties", | ||
"version": "1.0.0", | ||
"version": "2.0.0", | ||
"description": "Use the gap, column-gap, and row-gap shorthand properties in CSS", | ||
@@ -11,6 +11,8 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"main": "index.cjs.js", | ||
"module": "index.es.js", | ||
"module": "index.es.mjs", | ||
"files": [ | ||
"index.cjs.js", | ||
"index.es.js" | ||
"index.cjs.js.map", | ||
"index.es.mjs", | ||
"index.es.mjs.map" | ||
], | ||
@@ -26,17 +28,17 @@ "scripts": { | ||
"engines": { | ||
"node": ">=4.0.0" | ||
"node": ">=6.0.0" | ||
}, | ||
"dependencies": { | ||
"postcss": "^6.0.22" | ||
"postcss": "^7.0.2" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^6.26.3", | ||
"babel-eslint": "^8.2.3", | ||
"babel-preset-env": "^1.6.1", | ||
"eslint": "^4.19.1", | ||
"@babel/core": "^7.0.0", | ||
"@babel/preset-env": "^7.0.0", | ||
"babel-eslint": "^9.0.0", | ||
"eslint": "^5.6.0", | ||
"eslint-config-dev": "^2.0.0", | ||
"postcss-tape": "^2.2.0", | ||
"pre-commit": "^1.2.2", | ||
"rollup": "^0.58.2", | ||
"rollup-plugin-babel": "^3.0.4" | ||
"rollup": "^0.66.0", | ||
"rollup-plugin-babel": "^4.0.1" | ||
}, | ||
@@ -43,0 +45,0 @@ "eslintConfig": { |
116
README.md
# PostCSS Gap Properties [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
[![NPM Version][npm-img]][npm-url] | ||
[![CSS Standard Status][css-img]][css-url] | ||
[![Build Status][cli-img]][cli-url] | ||
[![Windows Build Status][win-img]][win-url] | ||
[![Support Chat][git-img]][git-url] | ||
[PostCSS Gap Properties] lets you use the `gap`, `column-gap`, and `row-gap` | ||
shorthand properties in CSS. | ||
shorthand properties in CSS, following the [CSS Grid Layout] specification. | ||
@@ -38,3 +38,3 @@ ```pcss | ||
Add [PostCSS Gap Properties] to your build tool: | ||
Add [PostCSS Gap Properties] to your project: | ||
@@ -45,4 +45,2 @@ ```bash | ||
#### Node | ||
Use [PostCSS Gap Properties] to process your CSS: | ||
@@ -53,17 +51,9 @@ | ||
postcssGapProperties.process(YOUR_CSS, /* processOptions */, /* pluginOptions */); | ||
postcssGapProperties.process(YOUR_CSS /*, processOptions, pluginOptions */); | ||
``` | ||
#### PostCSS | ||
Or use it as a [PostCSS] plugin: | ||
Add [PostCSS] to your build tool: | ||
```bash | ||
npm install postcss --save-dev | ||
``` | ||
Use [PostCSS Gap Properties] as a plugin: | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import postcss from 'postcss'; | ||
import postcssGapProperties from 'postcss-gap-properties'; | ||
@@ -73,91 +63,10 @@ | ||
postcssGapProperties(/* pluginOptions */) | ||
]).process(YOUR_CSS); | ||
]).process(YOUR_CSS /*, processOptions */); | ||
``` | ||
#### Webpack | ||
[PostCSS Gap Properties] runs in all Node environments, with special instructions for: | ||
Add [PostCSS Loader] to your build tool: | ||
| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | ||
| --- | --- | --- | --- | --- | | ||
```bash | ||
npm install postcss-loader --save-dev | ||
``` | ||
Use [PostCSS Gap Properties] in your Webpack configuration: | ||
```js | ||
import postcssGapProperties from 'postcss-gap-properties'; | ||
module.exports = { | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.css$/, | ||
use: [ | ||
'style-loader', | ||
{ loader: 'css-loader', options: { importLoaders: 1 } }, | ||
{ loader: 'postcss-loader', options: { | ||
ident: 'postcss', | ||
plugins: () => [ | ||
postcssGapProperties(/* pluginOptions */) | ||
] | ||
} } | ||
] | ||
} | ||
] | ||
} | ||
} | ||
``` | ||
#### Gulp | ||
Add [Gulp PostCSS] to your build tool: | ||
```bash | ||
npm install gulp-postcss --save-dev | ||
``` | ||
Use [PostCSS Gap Properties] in your Gulpfile: | ||
```js | ||
import postcss from 'gulp-postcss'; | ||
import postcssGapProperties from 'postcss-gap-properties'; | ||
gulp.task('css', () => gulp.src('./src/*.css').pipe( | ||
postcss([ | ||
postcssGapProperties(/* pluginOptions */) | ||
]) | ||
).pipe( | ||
gulp.dest('.') | ||
)); | ||
``` | ||
#### Grunt | ||
Add [Grunt PostCSS] to your build tool: | ||
```bash | ||
npm install grunt-postcss --save-dev | ||
``` | ||
Use [PostCSS Gap Properties] in your Gruntfile: | ||
```js | ||
import postcssGapProperties from 'postcss-gap-properties'; | ||
grunt.loadNpmTasks('grunt-postcss'); | ||
grunt.initConfig({ | ||
postcss: { | ||
options: { | ||
use: [ | ||
postcssGapProperties(/* pluginOptions */) | ||
] | ||
}, | ||
dist: { | ||
src: '*.css' | ||
} | ||
} | ||
}); | ||
``` | ||
## Options | ||
@@ -170,2 +79,4 @@ | ||
[css-img]: https://cssdb.org/badge/gap-properties.svg | ||
[css-url]: https://cssdb.org/#gap-properties | ||
[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-gap-properties.svg | ||
@@ -177,5 +88,4 @@ [cli-url]: https://travis-ci.org/jonathantneal/postcss-gap-properties | ||
[npm-url]: https://www.npmjs.com/package/postcss-gap-properties | ||
[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-gap-properties.svg | ||
[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-gap-properties | ||
[CSS Grid Layout]: https://www.w3.org/TR/css-grid-1/#gutters | ||
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss | ||
@@ -182,0 +92,0 @@ [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
15212
8
40
90
+ Addedpicocolors@0.2.1(transitive)
+ Addedpostcss@7.0.39(transitive)
- Removedansi-styles@3.2.1(transitive)
- Removedchalk@2.4.2(transitive)
- Removedcolor-convert@1.9.3(transitive)
- Removedcolor-name@1.1.3(transitive)
- Removedescape-string-regexp@1.0.5(transitive)
- Removedhas-flag@3.0.0(transitive)
- Removedpostcss@6.0.23(transitive)
- Removedsupports-color@5.5.0(transitive)
Updatedpostcss@^7.0.2