postcss-gap-properties
Advanced tools
Comparing version 3.0.5 to 4.0.0
# Changes to PostCSS Gap Properties | ||
### 4.0.0 (January 24, 2023) | ||
- Updated: Support for Node v14+ (major). | ||
- Added: TypeScript support. | ||
### 3.0.5 (July 12, 2022) | ||
@@ -4,0 +9,0 @@ |
{ | ||
"name": "postcss-gap-properties", | ||
"description": "Use the gap, column-gap, and row-gap shorthand properties in CSS", | ||
"version": "3.0.5", | ||
"author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"version": "4.0.0", | ||
"contributors": [ | ||
{ | ||
"name": "Antonio Laguna", | ||
"email": "antonio@laguna.es", | ||
"url": "https://antonio.laguna.es" | ||
}, | ||
{ | ||
"name": "Jonathan Neal", | ||
"email": "jonathantneal@hotmail.com" | ||
}, | ||
{ | ||
"name": "Romain Menke", | ||
"email": "romainmenke@gmail.com" | ||
} | ||
], | ||
"license": "CC0-1.0", | ||
@@ -12,6 +26,7 @@ "funding": { | ||
"engines": { | ||
"node": "^12 || ^14 || >=16" | ||
"node": "^14 || ^16 || >=18" | ||
}, | ||
"main": "dist/index.cjs", | ||
"module": "dist/index.mjs", | ||
"types": "dist/index.d.ts", | ||
"exports": { | ||
@@ -31,8 +46,9 @@ ".": { | ||
"peerDependencies": { | ||
"postcss": "^8.2" | ||
"postcss": "^8.4" | ||
}, | ||
"scripts": { | ||
"build": "rollup -c ../../rollup/default.js", | ||
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", | ||
"docs": "node ../../.github/bin/generate-docs/install.mjs", | ||
"prebuild": "npm run clean", | ||
"build": "rollup -c ../../rollup/default.mjs", | ||
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"", | ||
"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", | ||
"lint": "npm run lint:eslint && npm run lint:package-json", | ||
@@ -66,4 +82,6 @@ "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", | ||
"csstools": { | ||
"cssdbId": "gap-properties", | ||
"exportName": "postcssGapProperties", | ||
"humanReadableName": "PostCSS Gap Properties" | ||
"humanReadableName": "PostCSS Gap Properties", | ||
"specUrl": "https://www.w3.org/TR/css-grid-1/#gutters" | ||
}, | ||
@@ -70,0 +88,0 @@ "volta": { |
@@ -1,7 +0,4 @@ | ||
# PostCSS Gap Properties [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss] | ||
# 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] | ||
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord] | ||
[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-gap-properties.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/gap-properties.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord] | ||
@@ -13,2 +10,3 @@ [PostCSS Gap Properties] lets you use the `gap`, `column-gap`, and `row-gap` | ||
.standard-grid { | ||
display: grid; | ||
gap: 20px; | ||
@@ -18,2 +16,3 @@ } | ||
.spaced-grid { | ||
display: grid; | ||
column-gap: 40px; | ||
@@ -26,2 +25,3 @@ row-gap: 20px; | ||
.standard-grid { | ||
display: grid; | ||
grid-gap: 20px; | ||
@@ -32,2 +32,3 @@ gap: 20px; | ||
.spaced-grid { | ||
display: grid; | ||
grid-column-gap: 40px; | ||
@@ -48,17 +49,23 @@ column-gap: 40px; | ||
Use [PostCSS Gap Properties] as a [PostCSS] plugin: | ||
Use it as a [PostCSS] plugin: | ||
```js | ||
import postcss from 'postcss'; | ||
import postcssGapProperties from 'postcss-gap-properties'; | ||
const postcss = require('postcss'); | ||
const postcssGapProperties = require('postcss-gap-properties'); | ||
postcss([ | ||
postcssGapProperties(/* pluginOptions */) | ||
postcssGapProperties(/* pluginOptions */) | ||
]).process(YOUR_CSS /*, processOptions */); | ||
``` | ||
[PostCSS Gap Properties] runs in all Node environments, with special instructions for: | ||
[PostCSS Gap Properties] runs in all Node environments, with special | ||
instructions for: | ||
| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | ||
| --- | --- | --- | --- | --- | | ||
- [Node](INSTALL.md#node) | ||
- [PostCSS CLI](INSTALL.md#postcss-cli) | ||
- [PostCSS Load Config](INSTALL.md#postcss-load-config) | ||
- [Webpack](INSTALL.md#webpack) | ||
- [Next.js](INSTALL.md#nextjs) | ||
- [Gulp](INSTALL.md#gulp) | ||
- [Grunt](INSTALL.md#grunt) | ||
@@ -69,18 +76,42 @@ ## Options | ||
The `preserve` option determines whether the original `gap` declaration should | ||
remain in the CSS. By default, the original declaration is preserved. | ||
The `preserve` option determines whether the original notation | ||
is preserved. By default, it is preserved. | ||
[css-img]: https://cssdb.org/images/badges/gap-properties.svg | ||
```js | ||
postcssGapProperties({ preserve: false }) | ||
``` | ||
```pcss | ||
.standard-grid { | ||
display: grid; | ||
gap: 20px; | ||
} | ||
.spaced-grid { | ||
display: grid; | ||
column-gap: 40px; | ||
row-gap: 20px; | ||
} | ||
/* becomes */ | ||
.standard-grid { | ||
display: grid; | ||
grid-gap: 20px; | ||
} | ||
.spaced-grid { | ||
display: grid; | ||
grid-column-gap: 40px; | ||
grid-row-gap: 20px; | ||
} | ||
``` | ||
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test | ||
[css-url]: https://cssdb.org/#gap-properties | ||
[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg | ||
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test | ||
[discord]: https://discord.gg/bUadyRwkJS | ||
[npm-img]: https://img.shields.io/npm/v/postcss-gap-properties.svg | ||
[npm-url]: https://www.npmjs.com/package/postcss-gap-properties | ||
[CSS Grid Layout]: https://www.w3.org/TR/css-grid-1/#gutters | ||
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss | ||
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss | ||
[PostCSS]: https://github.com/postcss/postcss | ||
[PostCSS Loader]: https://github.com/postcss/postcss-loader | ||
[PostCSS Gap Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties | ||
[CSS Grid Layout]: https://www.w3.org/TR/css-grid-1/#gutters |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
Trivial Package
Supply chain riskPackages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.
Found 1 instance in 1 package
14101
7
13
112
0