postcss-gap-properties - npm Package Compare versions

Comparing version 3.0.5 to 4.0.0

CHANGELOG.md

 # 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 @@

package.json

 {
 	"name": "postcss-gap-properties",
 	"description": "Use the gap, column-gap, and row-gap shorthand properties in CSS",
-	"version": "3.0.5",
-	"author": "Jonathan Neal <[e-mail]>",
+	"version": "4.0.0",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "[e-mail]",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Jonathan Neal",
+			"email": "[e-mail]"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "[e-mail]"
+		}
+	],
 	"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": {

README.md

@@ -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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 risk

Packages 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

Improved metrics

Total package byte prevSize

14101

increased by8.19%

Number of package files

7

increased by16.67%

Lines of code

13

increased by225%

Number of lines in readme file

112

increased by38.27%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes