Add more cases handling to auto-rem

Author: rtivital

src/auto-rem.ts

@@ -11,6 +11,10 @@ module.exports = () => {
         return;
       }
 
+      if (decl.prop === 'content') {
+        return;
+      }
+
       decl.value = rem(decl.value);
     },
   };

src/converters.ts

@@ -18,7 +18,19 @@ function createConverter(units: string, { shouldScale = false, transformUnitLess
     }
 
     if (typeof value === 'string') {
-      if (value.startsWith('calc(') || value.startsWith('clamp(') || value.includes('rgba(')) {
+      if (
+        value.startsWith('calc(') ||
+        value.startsWith('clamp(') ||
+        value.includes('rgba(') ||
+        value.includes('var(') ||
+        value.includes('min(') ||
+        value.includes('max(') ||
+        value.includes('url(') ||
+        value.includes('linear-gradient(') ||
+        value.includes('radial-gradient(') ||
+        value.includes('repeating-linear-gradient(') ||
+        value.includes('repeating-radial-gradient(')
+      ) {
         return value;
       }
 

src/tests/__snapshots__/auto-rem.test.ts.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`auto-rem does not transform content property 1`] = `
+"
+.demo::before {
+  content: '10px';
+}
+"
+`;
+
 exports[`auto-rem does not transform strings with rgba 1`] = `
 "
 .demo {
@@ -10,6 +18,13 @@ exports[`auto-rem does not transform strings with rgba 1`] = `
 "
 `;
 
+exports[`auto-rem does not transform url values 1`] = `
+"
+.demo {
+  background: url('https://example.com/10px.png');
+}"
+`;
+
 exports[`auto-rem does not transform values without units 1`] = `
 "
 .demo {

src/tests/auto-rem.test.ts

@@ -47,6 +47,17 @@ const unitLessInput = `
 }
 `;
 
+const contentInput = `
+.demo::before {
+  content: '10px';
+}
+`;
+
+const urlInput = `
+.demo {
+  background: url('https://example.com/10px.png');
+}`;
+
 describe('auto-rem', () => {
   it('it transforms px to rem values correctly', async () => {
     const res = await testTransform(baseInput, { autoRem: true });
@@ -77,4 +88,14 @@ describe('auto-rem', () => {
     const res = await testTransform(unitLessInput, { autoRem: true });
     expect(res.css).toMatchSnapshot();
   });
+
+  it('does not transform content property', async () => {
+    const res = await testTransform(contentInput, { autoRem: true });
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('does not transform url values', async () => {
+    const res = await testTransform(urlInput, { autoRem: true });
+    expect(res.css).toMatchSnapshot();
+  });
 });