diff --git a/front_end/entrypoints/formatter_worker/CSSRuleParser.ts b/front_end/entrypoints/formatter_worker/CSSRuleParser.ts
index 12f21e94b8..da2e389d94 100644
--- a/front_end/entrypoints/formatter_worker/CSSRuleParser.ts
+++ b/front_end/entrypoints/formatter_worker/CSSRuleParser.ts
@@ -96,7 +96,7 @@ export function parseCSS(text: string, chunkCallback: ChunkCallback): void {
         }
         break;
       case CSSParserStates.Style:
-        if (tokenType.has('meta') || tokenType.has('property')) {
+        if (tokenType.has('meta') || tokenType.has('property') || tokenType.has('variable-2')) {
           property = {
             name: tokenValue,
             value: '',
diff --git a/test/unittests/front_end/panels/utils/utils_test.ts b/test/unittests/front_end/panels/utils/utils_test.ts
index 2e90393e0f..e9937a25a3 100644
--- a/test/unittests/front_end/panels/utils/utils_test.ts
+++ b/test/unittests/front_end/panels/utils/utils_test.ts
@@ -17,6 +17,7 @@ describe('panels/utils', async () => {
 
       .child {
         display: grid;
+        --child-theme-color: 100, 200, 0;
       }
       `;
     const current = `
@@ -27,6 +28,7 @@ describe('panels/utils', async () => {
 
       .child {
         display: grid;
+        --child-theme-color: 5, 10, 15;
         padding: 10px;
       }`;
     const diff = Diff.Diff.DiffWrapper.lineDiff(original.split('\n'), current.split('\n'));
@@ -40,6 +42,8 @@ describe('panels/utils', async () => {
 }
 
 .child {
+  /* --child-theme-color: 100, 200, 0; */
+  --child-theme-color: 5, 10, 15;
   padding: 10px;
 }`,
         'formatted CSS changes are not correct');