feat(pxtorem): add minValue property to Config and update related functionality

Author: felixicaza

packages/pxtorem/src/contracts/config.type.ts

@@ -1,4 +1,5 @@
 export interface Config {
   rootValue: number
   unitPrecision: number
+  minValue: number
 }

packages/pxtorem/src/index.ts

@@ -4,18 +4,20 @@ import type { Config } from './contracts/config.type'
 
 const defultConfig: Config = {
   rootValue: 16,
-  unitPrecision: 4
+  unitPrecision: 4,
+  minValue: 0
 }
 
 /**
  * Convert pixel units to rem units.
  * @param {Object} config - The configuration object.
  * @param {number} [config.rootValue=16] - The root value for conversion. (default is 16)
  * @param {number} [config.unitPrecision=4] - The decimal precision for the converted value. (default is 4)
+ * @param {number} [config.minValue=0] - The minimum value to be converted. (default is 0)
  * @returns {Function} `Length` function to convert pixel values to rem values used by LightningCSS.
  */
 function pxtorem(config: Partial<Config> = {}) {
-  const { rootValue, unitPrecision } = { ...defultConfig, ...config }
+  const { rootValue, unitPrecision, minValue } = { ...defultConfig, ...config }
 
   validatePositiveInteger(rootValue, 'rootValue')
   validatePositiveInteger(unitPrecision, 'unitPrecision')
@@ -28,8 +30,10 @@ function pxtorem(config: Partial<Config> = {}) {
 
   return {
     Length({ unit, value }: LengthValue): { unit: LengthUnit, value: number } | undefined {
-      if (unit === 'px') {
+      if (unit === 'px' && value >= minValue) {
         return { unit: 'rem', value: toFixed(value / rootValue, unitPrecision) }
+      } else {
+        return { unit, value }
       }
     }
   }

packages/pxtorem/test/__snapshots__/index.test.ts.snap

@@ -44,6 +44,10 @@ exports[`pxtorem plugin > should handle custom configuration 1`] = `
 "div {
   margin: 2rem;
 }
+
+.foo {
+  padding: 8px;
+}
 "
 `;
 
@@ -68,6 +72,58 @@ exports[`pxtorem plugin > should handle float pixel units 1`] = `
 "
 `;
 
+exports[`pxtorem plugin > should handle minimum float value 1`] = `
+"div {
+  margin: .0344rem;
+}
+
+.foo {
+  top: .25px;
+}
+"
+`;
+
+exports[`pxtorem plugin > should handle minimum negative value 1`] = `
+"div {
+  margin: -.3125rem;
+}
+
+.foo {
+  top: -20px;
+}
+"
+`;
+
+exports[`pxtorem plugin > should handle minimum positive value 1`] = `
+"div {
+  margin: 1.875rem;
+}
+
+.foo {
+  padding: 8px;
+}
+"
+`;
+
+exports[`pxtorem plugin > should handle minimum zero value 1`] = `
+"div {
+  margin: 0;
+}
+
+.foo {
+  padding: .625rem;
+}
+
+.bar {
+  left: .0156rem;
+}
+
+.baz {
+  top: -.55px;
+}
+"
+`;
+
 exports[`pxtorem plugin > should handle multiple pixel values 1`] = `
 "div {
   margin: 1rem 2rem;

packages/pxtorem/test/index.test.ts

@@ -117,14 +117,14 @@ describe('pxtorem plugin', () => {
   })
 
   it('should handle custom configuration', () => {
-    const css = 'div { margin: 16px; }'
+    const css = 'div { margin: 16px; } .foo { padding: 8px; }'
 
     const output = transform({
       filename: 'input.css',
       code: Buffer.from(css),
       minify: false,
       sourceMap: false,
-      visitor: composeVisitors([pxtorem({ rootValue: 8, unitPrecision: 2 })])
+      visitor: composeVisitors([pxtorem({ rootValue: 8, unitPrecision: 2, minValue: 10 })])
     }).code.toString()
 
     expect(output).toMatchSnapshot()
@@ -186,6 +186,62 @@ describe('pxtorem plugin', () => {
     expect(output).toMatchSnapshot()
   })
 
+  it('should handle minimum positive value', () => {
+    const css = 'div { margin: 30px; } .foo { padding: 8px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: false,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem({ minValue: 10 })])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should handle minimum negative value', () => {
+    const css = 'div { margin: -5px; } .foo { top: -20px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: false,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem({ minValue: -10 })])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should handle minimum float value', () => {
+    const css = 'div { margin: 0.55px; } .foo { top: 0.25px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: false,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem({ minValue: 0.5 })])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should handle minimum zero value', () => {
+    const css = 'div { margin: 0px; } .foo { padding: 10px; } .bar { left: 0.25px; } .baz { top: -0.55px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: false,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem({ minValue: 0 })])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
   it('should throw error for negative rootValue', () => {
     expect(() => pxtorem({ rootValue: -1 })).toThrowError('Invalid rootValue: must not be negative.')
   })