Automated migration of not-CSS-Color-specification-compliant hsl color values

src/migrate.test.ts

@@ -109,4 +109,34 @@ describe('migrate', () => {
         ]);
         expect(validate(migrated, v8)).toEqual([]);
     });
+
+    test('converts colors to supported format', () => {
+        const migrated = migrate({
+            version: 8,
+            sources: {},
+            layers: [{
+                id: '1',
+                type: 'fill',
+                source: 'vector',
+                paint: {
+                    'fill-color': 'hsl(100,0.3,.2)',
+                    'fill-outline-color': [
+                        'interpolate', ['linear'], ['zoom'],
+                        0, 'hsl(110, 0.7, 0.055)',
+                        10, 'hsla(330,0.85,50%)',
+                    ],
+                },
+            }],
+        });
+
+        expect(migrated.layers[0].paint).toEqual({
+            'fill-color': 'hsl(100,30%,20%)',
+            'fill-outline-color': [
+                'interpolate', ['linear'], ['zoom'],
+                0, 'hsl(110,70%,5.5%)',
+                10, 'hsl(330,85%,50%)',
+            ],
+        });
+    });
+
 });

src/migrate.ts

@@ -1,6 +1,8 @@
 
 import migrateToV8 from './migrate/v8';
 import migrateToExpressions from './migrate/expressions';
+import migrateColors from './migrate/migrate_colors';
+import {eachProperty} from './visit';
 import type {StyleSpecification} from './types.g';
 
 /**
@@ -29,6 +31,12 @@ export default function migrate(style: StyleSpecification): StyleSpecification {
         migrated = true;
     }
 
+    eachProperty(style, {paint: true, layout: true}, ({value, reference, set}) => {
+        if (reference.type === 'color') {
+            set(migrateColors(value));
+        }
+    });
+
     if (!migrated) {
         throw new Error(`Cannot migrate from ${style.version}`);
     }

src/migrate/migrate_colors.test.ts

@@ -0,0 +1,24 @@
+import migrateColors from './migrate_colors';
+
+describe('migrate colors', () => {
+
+    test('should convert hsl to a format compliant with CSS Color specification', () => {
+        expect(migrateColors('hsla(0, 0, 0, 0)')).toBe('hsla(0,0%,0%,0)');
+        expect(migrateColors('hsl(900, 0.15, 90%)')).toBe('hsl(900,15%,90%)');
+        expect(migrateColors('hsla(900, .15, .9)')).toBe('hsl(900,15%,90%)');
+        expect(migrateColors('hsl(900, 15%, 90%)')).toBe('hsl(900,15%,90%)');
+        expect(migrateColors('hsla(900, 15%, 90%)')).toBe('hsl(900,15%,90%)');
+        expect(migrateColors('hsla(900, 15%, 90%, 1)')).toBe('hsla(900,15%,90%,1)');
+        expect(migrateColors([
+            'interpolate', ['linear'], ['zoom'],
+            0, 'hsla(900,0.85,0.05,0)',
+            10, 'hsla(900, .20, .0155, 1)',
+        ])).toEqual([
+            'interpolate', ['linear'], ['zoom'],
+            0, 'hsla(900,85%,5%,0)',
+            10, 'hsla(900,20%,1.55%,1)',
+        ]);
+        expect(migrateColors('hsl(9001590)')).toBe('hsl(9001590)'); // invalid - no changes
+    });
+
+});

src/migrate/migrate_colors.ts

@@ -0,0 +1,35 @@
+/**
+ * Migrate color style values to supported format.
+ *
+ * @param colorToMigrate Color value to migrate, could be a string or an expression.
+ * @returns Color style value in supported format.
+ */
+export default function migrateColors<T>(colorToMigrate: T): T {
+    return JSON.parse(migrateHslColors(JSON.stringify(colorToMigrate)));
+}
+
+/**
+ * Created to migrate from colors supported by the former CSS color parsing
+ * library `csscolorparser` but not compliant with the CSS Color specification,
+ * like `hsl(900, 0.15, 90%)`.
+ *
+ * @param colorToMigrate Serialized color style value.
+ * @returns A serialized color style value in which all non-standard hsl color values
+ * have been converted to a format that complies with the CSS Color specification.
+ *
+ * @example
+ * migrateHslColors('"hsl(900, 0.15, 90%)"'); // returns '"hsl(900, 15%, 90%)"'
+ * migrateHslColors('"hsla(900, .15, .9)"'); // returns '"hsl(900, 15%, 90%)"'
+ * migrateHslColors('"hsl(900, 15%, 90%)"'); // returns '"hsl(900, 15%, 90%)"' - no changes
+ */
+function migrateHslColors(colorToMigrate: string): string {
+    return colorToMigrate.replace(/"hsla?\((.+?)\)"/gi, (match, hslArgs) => {
+        const argsMatch = hslArgs.match(/^(.+?)\s*,\s*(.+?)\s*,\s*(.+?)(?:\s*,\s*(.+))?$/i);
+        if (argsMatch) {
+            let [h, s, l, a] = argsMatch.slice(1);
+            [s, l] = [s, l].map(v => v.endsWith('%') ? v : `${parseFloat(v) * 100}%`);
+            return `"hsl${typeof a === 'string' ? 'a' : ''}(${[h, s, l, a].filter(Boolean).join(',')})"`;
+        }
+        return match;
+    });
+}