Merge pull request #27 from meduzen/feat/min-max

Add support for `min-size` and `max-size`

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,10 @@
 .one {
   size: 10px;
 }
+.minmax {
+  min-size: 10px;
+  max-size: 200px auto;
+}
 ```
 
 ```css
@@ -26,6 +32,12 @@
   width: 10px;
   height: 10px;
 }
+.minmax {
+  min-width: 10px;
+  min-height: 10px;
+  max-width: 200px;
+  max-height: auto;
+}
 ```
 
 <a href="https://evilmartians.com/?utm_source=postcss-size">

index.js

@@ -1,17 +1,29 @@
+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()
+}
+
 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]
+          processSize('', decl, list)
+        }
+      },
 
-          decl.cloneBefore({ prop: 'width', value: sizes[0] })
-          decl.cloneBefore({ prop: 'height', value: sizes[1] })
+      'min-size': (decl, { list }) => {
+        processSize('min-', decl, list)
+      },
 
-          decl.remove()
-        }
+      'max-size': (decl, { list }) => {
+        processSize('max-', decl, list)
       }
     }
   }

index.test.js

@@ -8,37 +8,73 @@ 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 () => {
   await run(
     '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 () => {
   await run(
     '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 () => {
   await run(
     '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 () => {