diff --git a/.changeset/wet-houses-warn.md b/.changeset/wet-houses-warn.md new file mode 100644 index 0000000000..1ce94b3382 --- /dev/null +++ b/.changeset/wet-houses-warn.md @@ -0,0 +1,5 @@ +--- +"stylelint": patch +--- + +Fixed: `declaration-block-no-redundant-longhand-properties` autofix for `grid-column` and `grid-row` diff --git a/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js b/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js index 740fb7c7dd..9b70b3f8e4 100644 --- a/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js +++ b/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js @@ -206,6 +206,18 @@ testRule({ description: 'autofixer should not mangle css functions with comma separated values', message: messages.expected('transition'), }, + { + code: 'a { grid-column-start: 1; grid-column-end: 2; }', + fixed: 'a { grid-column: 1 / 2; }', + description: 'explicit grid-column test', + message: messages.expected('grid-column'), + }, + { + code: 'a { grid-row-start: 1; grid-row-end: 2; }', + fixed: 'a { grid-row: 1 / 2; }', + description: 'explicit grid-row test', + message: messages.expected('grid-row'), + }, ], }); diff --git a/lib/rules/declaration-block-no-redundant-longhand-properties/index.js b/lib/rules/declaration-block-no-redundant-longhand-properties/index.js index 34d40d6665..1457f6ebb7 100644 --- a/lib/rules/declaration-block-no-redundant-longhand-properties/index.js +++ b/lib/rules/declaration-block-no-redundant-longhand-properties/index.js @@ -28,6 +28,28 @@ const meta = { /** @type {Map) => (string | undefined)>} */ const customResolvers = new Map([ + [ + 'grid-column', + (decls) => { + const start = decls.get('grid-column-start')?.value.trim(); + const end = decls.get('grid-column-end')?.value.trim(); + + if (!start || !end) return; + + return `${start} / ${end}`; + }, + ], + [ + 'grid-row', + (decls) => { + const start = decls.get('grid-row-start')?.value.trim(); + const end = decls.get('grid-row-end')?.value.trim(); + + if (!start || !end) return; + + return `${start} / ${end}`; + }, + ], [ 'grid-template', (decls) => {