From 6c89baaf7207f942bc4cd0521102119bbf8f81ad Mon Sep 17 00:00:00 2001 From: Mehdi M Date: Fri, 13 Oct 2023 12:18:15 +0200 Subject: [PATCH 1/7] Add support for `min-size` and `max-size` --- index.js | 20 +++++++++++++++++++- index.test.js | 38 +++++++++++++++++++++++++++++++++++++- 2 files changed, 56 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 2fbc53f..2b193db 100644 --- a/index.js +++ b/index.js @@ -2,7 +2,7 @@ module.exports = () => { return { postcssPlugin: 'postcss-size', Declaration: { - size: (decl, { list }) => { + 'size': (decl, { list }) => { if (decl.parent.name !== 'page') { let sizes = list.space(decl.value) if (sizes.length === 1) sizes[1] = sizes[0] @@ -12,6 +12,24 @@ module.exports = () => { decl.remove() } + }, + 'min-size': (decl, { list }) => { + let sizes = list.space(decl.value) + if (sizes.length === 1) sizes[1] = sizes[0] + + decl.cloneBefore({ prop: 'min-width', value: sizes[0] }) + decl.cloneBefore({ prop: 'min-height', value: sizes[1] }) + + decl.remove() + }, + 'max-size': (decl, { list }) => { + let sizes = list.space(decl.value) + if (sizes.length === 1) sizes[1] = sizes[0] + + decl.cloneBefore({ prop: 'max-width', value: sizes[0] }) + decl.cloneBefore({ prop: 'max-height', value: sizes[1] }) + + decl.remove() } } } diff --git a/index.test.js b/index.test.js index 03ec4eb..7e99bd8 100644 --- a/index.test.js +++ b/index.test.js @@ -8,12 +8,16 @@ async function run (input, output) { expect(result.warnings()).toHaveLength(0) } -it('sets width and height', async () => { +it('sets width, height, min-width, min-height, max-width, max-height', async () => { await run('a{ size: 1px 2px; }', 'a{ width: 1px; height: 2px; }') + await run('a{ min-size: 1px 2px; }', 'a{ min-width: 1px; min-height: 2px; }') + await run('a{ max-size: 1px 2px; }', 'a{ max-width: 1px; max-height: 2px; }') }) it('sets width and height by one value', async () => { await run('a{ size: 1px; }', 'a{ width: 1px; height: 1px; }') + await run('a{ min-size: 1px; }', 'a{ min-width: 1px; min-height: 1px; }') + await run('a{ max-size: 1px; }', 'a{ max-width: 1px; max-height: 1px; }') }) it('splits values by brackets', async () => { @@ -21,6 +25,14 @@ it('splits values by brackets', async () => { 'a{ size: calc(4 * 2px) 2px; }', 'a{ width: calc(4 * 2px); height: 2px; }' ) + await run( + 'a{ min-size: calc(4 * 2px) 2px; }', + 'a{ min-width: calc(4 * 2px); min-height: 2px; }' + ) + await run( + 'a{ max-size: calc(4 * 2px) 2px; }', + 'a{ max-width: calc(4 * 2px); max-height: 2px; }' + ) }) it('prefix value', async () => { @@ -28,10 +40,26 @@ it('prefix value', async () => { 'a{ size: -webkit-fit-content auto; }', 'a{ width: -webkit-fit-content; height: auto; }' ) + await run( + 'a{ min-size: -webkit-fit-content auto; }', + 'a{ min-width: -webkit-fit-content; min-height: auto; }' + ) + await run( + 'a{ max-size: -webkit-fit-content auto; }', + 'a{ max-width: -webkit-fit-content; max-height: auto; }' + ) }) it('supports auto value', async () => { await run('a{ size: .98% auto; }', 'a{ width: .98%; height: auto; }') + await run( + 'a{ min-size: .98% auto; }', + 'a{ min-width: .98%; min-height: auto; }' + ) + await run( + 'a{ max-size: .98% auto; }', + 'a{ max-width: .98%; max-height: auto; }' + ) }) it('supports !important', async () => { @@ -39,6 +67,14 @@ it('supports !important', async () => { 'a{ size: 1px !important; }', 'a{ width: 1px !important; height: 1px !important; }' ) + await run( + 'a{ min-size: 1px !important; }', + 'a{ min-width: 1px !important; min-height: 1px !important; }' + ) + await run( + 'a{ max-size: 1px !important; }', + 'a{ max-width: 1px !important; max-height: 1px !important; }' + ) }) it('not conflicts with @page size descriptor', async () => { From 7c3f47e7c28116d44eef7acfb2e1955c8ccdf798 Mon Sep 17 00:00:00 2001 From: Mehdi M Date: Fri, 13 Oct 2023 12:27:36 +0200 Subject: [PATCH 2/7] Avoid code repetition --- index.js | 36 +++++++++++++----------------------- 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/index.js b/index.js index 2b193db..db25a11 100644 --- a/index.js +++ b/index.js @@ -1,36 +1,26 @@ module.exports = () => { + function processSize (propPrefix = '', decl, list) { + let sizes = list.space(decl.value) + if (sizes.length === 1) sizes[1] = sizes[0] + + decl.cloneBefore({ prop: propPrefix + 'width', value: sizes[0] }) + decl.cloneBefore({ prop: propPrefix + 'height', value: sizes[1] }) + + decl.remove() + } + return { postcssPlugin: 'postcss-size', Declaration: { 'size': (decl, { list }) => { if (decl.parent.name !== 'page') { - let sizes = list.space(decl.value) - if (sizes.length === 1) sizes[1] = sizes[0] - - decl.cloneBefore({ prop: 'width', value: sizes[0] }) - decl.cloneBefore({ prop: 'height', value: sizes[1] }) - - decl.remove() + processSize('', decl, list) } }, - 'min-size': (decl, { list }) => { - let sizes = list.space(decl.value) - if (sizes.length === 1) sizes[1] = sizes[0] - - decl.cloneBefore({ prop: 'min-width', value: sizes[0] }) - decl.cloneBefore({ prop: 'min-height', value: sizes[1] }) - - decl.remove() - }, - 'max-size': (decl, { list }) => { - let sizes = list.space(decl.value) - if (sizes.length === 1) sizes[1] = sizes[0] - decl.cloneBefore({ prop: 'max-width', value: sizes[0] }) - decl.cloneBefore({ prop: 'max-height', value: sizes[1] }) + 'min-size': (decl, { list }) => processSize('min-', decl, list), - decl.remove() - } + 'max-size': (decl, { list }) => processSize('max-', decl, list) } } } From ccd3e56087d8eb25b689aad30f5693668fa8007e Mon Sep 17 00:00:00 2001 From: Mehdi M Date: Fri, 13 Oct 2023 12:32:03 +0200 Subject: [PATCH 3/7] Remove useless bit --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index db25a11..0edc74f 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,5 @@ module.exports = () => { - function processSize (propPrefix = '', decl, list) { + function processSize (propPrefix, decl, list) { let sizes = list.space(decl.value) if (sizes.length === 1) sizes[1] = sizes[0] From 62fb9be7a3a954d500b6fbd852bba4bb9947fbcf Mon Sep 17 00:00:00 2001 From: Mehdi M Date: Fri, 13 Oct 2023 12:37:27 +0200 Subject: [PATCH 4/7] Update documentation --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 8f29543..3b76005 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,8 @@ [PostCSS] plugin for `size` shortcut to set `width` and `height` properties. +It also handles `min-size` to set `min-width` and `min-height`, and `max-size` to set `max-width` and `max-height`. + [PostCSS]: https://github.com/postcss/postcss ```css @@ -15,6 +17,12 @@ .one { size: 10px; } + +.minmax { + min-size: 10px; + max-size: 200px auto; +} + ``` ```css @@ -26,6 +34,12 @@ width: 10px; height: 10px; } +.minmax { + min-width: 10px; + min-height: 10px; + max-width: 200px; + max-height: auto; +} ``` From 60d8af8b5c64af91e710c46dfd6a8614ab21a0f5 Mon Sep 17 00:00:00 2001 From: Mehdi M Date: Fri, 13 Oct 2023 21:40:59 +0200 Subject: [PATCH 5/7] Avoid returning a value that will be unused --- index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 0edc74f..44e4f8e 100644 --- a/index.js +++ b/index.js @@ -18,9 +18,13 @@ module.exports = () => { } }, - 'min-size': (decl, { list }) => processSize('min-', decl, list), + 'min-size': (decl, { list }) => { + processSize('min-', decl, list) + }, - 'max-size': (decl, { list }) => processSize('max-', decl, list) + 'max-size': (decl, { list }) => { + processSize('max-', decl, list) + } } } } From 996274688416aebb8e67bdd59a06cc3b61ef8add Mon Sep 17 00:00:00 2001 From: Mehdi M Date: Fri, 13 Oct 2023 21:41:19 +0200 Subject: [PATCH 6/7] Move `processSize` at top-level --- index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/index.js b/index.js index 44e4f8e..a16ae74 100644 --- a/index.js +++ b/index.js @@ -1,14 +1,14 @@ -module.exports = () => { - function processSize (propPrefix, decl, list) { - let sizes = list.space(decl.value) - if (sizes.length === 1) sizes[1] = sizes[0] +function processSize (propPrefix, decl, list) { + let sizes = list.space(decl.value) + if (sizes.length === 1) sizes[1] = sizes[0] - decl.cloneBefore({ prop: propPrefix + 'width', value: sizes[0] }) - decl.cloneBefore({ prop: propPrefix + 'height', value: sizes[1] }) + decl.cloneBefore({ prop: propPrefix + 'width', value: sizes[0] }) + decl.cloneBefore({ prop: propPrefix + 'height', value: sizes[1] }) - decl.remove() - } + decl.remove() +} +module.exports = () => { return { postcssPlugin: 'postcss-size', Declaration: { From 4266b27532764229d25e89b3dcdb1c366f2593c7 Mon Sep 17 00:00:00 2001 From: Mehdi M Date: Fri, 13 Oct 2023 22:20:21 +0200 Subject: [PATCH 7/7] Reduce CSS spacing in documentation --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 3b76005..e568208 100644 --- a/README.md +++ b/README.md @@ -17,12 +17,10 @@ It also handles `min-size` to set `min-width` and `min-height`, and `max-size` t .one { size: 10px; } - .minmax { min-size: 10px; max-size: 200px auto; } - ``` ```css