test(pxtorem): update snapshots and tests to use 'pixel' terminology and add new test cases for custom configurations

Author: felixicaza

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

@@ -1,11 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`pxtorem plugin > should convert px to rem 1`] = `"div{margin:1rem}"`;
+exports[`pxtorem plugin > should convert pixel to rem 1`] = `"div{margin:1rem}"`;
 
-exports[`pxtorem plugin > should convert px to rem in custom properties 1`] = `":root{--margin:1rem}div{margin:var(--margin)}"`;
+exports[`pxtorem plugin > should convert pixel to rem in custom properties 1`] = `":root{--margin:1rem}div{margin:var(--margin)}"`;
 
-exports[`pxtorem plugin > should convert px to rem in keyframes 1`] = `"@keyframes fadeIn{0%{margin:1rem}to{margin:2rem}}"`;
+exports[`pxtorem plugin > should convert pixel to rem in keyframes 1`] = `"@keyframes fadeIn{0%{margin:1rem}to{margin:2rem}}"`;
 
-exports[`pxtorem plugin > should convert px to rem in media queries 1`] = `"@media (width>=48rem){div{margin:1rem}}"`;
+exports[`pxtorem plugin > should convert pixel to rem in media queries 1`] = `"@media (width>=48rem){div{margin:1rem}}"`;
+
+exports[`pxtorem plugin > should handle custom configuration 1`] = `"div{margin:2rem}"`;
+
+exports[`pxtorem plugin > should handle custom configuration with unitPrecision 1`] = `"div{margin:2.71rem}"`;
+
+exports[`pxtorem plugin > should handle float pixel units 1`] = `"div{margin:2.7087rem}"`;
+
+exports[`pxtorem plugin > should handle multiple pixel values 1`] = `"div{margin:1rem 2rem}"`;
+
+exports[`pxtorem plugin > should handle nested selectors 1`] = `"div{&>span{margin:1rem}}"`;
 
 exports[`pxtorem plugin > should not convert other units 1`] = `"div{margin:1em}"`;

packages/pxtorem/test/index.test.ts

@@ -3,7 +3,7 @@ import { composeVisitors, transform } from 'lightningcss'
 import pxtorem from '../dist/index'
 
 describe('pxtorem plugin', () => {
-  it('should convert px to rem', () => {
+  it('should convert pixel to rem', () => {
     const css = 'div { margin: 16px; }'
 
     const output = transform({
@@ -38,7 +38,7 @@ describe('pxtorem plugin', () => {
     expect(output).toMatchSnapshot()
   })
 
-  it('should convert px to rem in media queries', () => {
+  it('should convert pixel to rem in media queries', () => {
     const css = '@media (min-width: 768px) { div { margin: 16px; } }'
 
     const output = transform({
@@ -52,7 +52,7 @@ describe('pxtorem plugin', () => {
     expect(output).toMatchSnapshot()
   })
 
-  it('should convert px to rem in keyframes', () => {
+  it('should convert pixel to rem in keyframes', () => {
     const css = '@keyframes fadeIn { from { margin: 16px; } to { margin: 32px; } }'
 
     const output = transform({
@@ -66,7 +66,7 @@ describe('pxtorem plugin', () => {
     expect(output).toMatchSnapshot()
   })
 
-  it('should convert px to rem in custom properties', () => {
+  it('should convert pixel to rem in custom properties', () => {
     const css = ':root { --margin: 16px; } div { margin: var(--margin); }'
 
     const output = transform({
@@ -79,4 +79,74 @@ describe('pxtorem plugin', () => {
 
     expect(output).toMatchSnapshot()
   })
+
+  it('should handle multiple pixel values', () => {
+    const css = 'div { margin: 16px 32px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem()])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should handle nested selectors', () => {
+    const css = 'div { & > span { margin: 16px; } }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem()])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should handle float pixel units', () => {
+    const css = 'div { margin: 43.3398589px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem()])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should handle custom configuration', () => {
+    const css = 'div { margin: 16px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem({ rootValue: 8, unitPrecision: 2 })])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should handle custom configuration with unitPrecision', () => {
+    const css = 'div { margin: 43.3398589px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem({ unitPrecision: 2 })])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
 })