Fix lint

scripts/mistica-skin-generator/.eslintrc.yml

@@ -7,3 +7,7 @@ extends:
 settings:
     react:
         version: '18.0.0' # although this project doesn't use react, we need to set this to avoid warnings
+rules:
+    import/extensions:
+        - error
+        - js: always

scripts/mistica-skin-generator/generators/colors/__tests__/brand-colors-generator.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {reduceColors} from '../reduce-colors';
-import {generateBrandColors} from '../brand-colors-generator';
+import {reduceColors} from '../reduce-colors.js';
+import {generateBrandColors} from '../brand-colors-generator.js';
 
 test('generateBrandColors', () => {
     const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));

scripts/mistica-skin-generator/generators/colors/__tests__/color-toolkit-generator.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {reduceColors} from '../reduce-colors';
-import {generateColorToolkit} from '../color-toolkit-generator';
+import {reduceColors} from '../reduce-colors.js';
+import {generateColorToolkit} from '../color-toolkit-generator.js';
 
 test('generateColorToolkit', () => {
     const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));

scripts/mistica-skin-generator/generators/colors/__tests__/mistica-color-generator.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {reduceColors} from '../reduce-colors';
-import {generateMisticaColor} from '../mistica-color-generator';
+import {reduceColors} from '../reduce-colors.js';
+import {generateMisticaColor} from '../mistica-color-generator.js';
 
 test('generateMisticaColor', () => {
     const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));

scripts/mistica-skin-generator/generators/colors/__tests__/mistica-colors-generator.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {reduceColors} from '../reduce-colors';
-import {generateMisticaColors} from '../mistica-colors-generator';
+import {reduceColors} from '../reduce-colors.js';
+import {generateMisticaColors} from '../mistica-colors-generator.js';
 
 test('generateMisticaColors', () => {
     const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));

scripts/mistica-skin-generator/generators/colors/__tests__/uicolor-toolkit-generator.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {reduceColors} from '../reduce-colors';
-import {generateUIColorToolkit} from '../uicolor-toolkit-generator';
+import {reduceColors} from '../reduce-colors.js';
+import {generateUIColorToolkit} from '../uicolor-toolkit-generator.js';
 
 test('generateUIColorToolkit', () => {
     const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));

scripts/mistica-skin-generator/generators/colors/brand-colors-generator.js

@@ -1,4 +1,4 @@
-import {MISTICA_COLOR, UI_COLOR} from './reduce-colors';
+import {MISTICA_COLOR, UI_COLOR} from './reduce-colors.js';
 
 const mapSolidColor = (prefix, value) => {
     if (value.includes('rgb')) {

scripts/mistica-skin-generator/generators/colors/color-toolkit-generator.js

@@ -1,4 +1,4 @@
-import {UI_COLOR} from './reduce-colors';
+import {UI_COLOR} from './reduce-colors.js';
 
 const template = (props) => `
 // Generated using Make

scripts/mistica-skin-generator/generators/colors/mistica-color-generator.js

@@ -1,4 +1,4 @@
-import {MISTICA_COLOR} from './reduce-colors';
+import {MISTICA_COLOR} from './reduce-colors.js';
 
 const template = (props) => `
 // Generated using Make

scripts/mistica-skin-generator/generators/colors/uicolor-toolkit-generator.js

@@ -1,4 +1,4 @@
-import {UI_COLOR} from './reduce-colors';
+import {UI_COLOR} from './reduce-colors.js';
 
 const template = (props) => `
 // Generated using Make

scripts/mistica-skin-generator/generators/corner-radius/__tests__/brand-font-weights-generator.test.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {generateBrandCornerRadius} from '../brand-corner-radius-generator';
+import {generateBrandCornerRadius} from '../brand-corner-radius-generator.js';
 
 test('generateBrandCornerRadius', () => {
     const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');

scripts/mistica-skin-generator/generators/corner-radius/__tests__/mistica-font-weights-generator.test.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {generateMisticaCornerRadius} from '../mistica-corner-radius-generator';
+import {generateMisticaCornerRadius} from '../mistica-corner-radius-generator.js';
 
 test('generateMisticaCornerRadius', () => {
     const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');

scripts/mistica-skin-generator/generators/font-sizes/__tests__/brand-font-weights-generator.test.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {generateBrandFontSizes} from '../brand-font-sizes-generator';
+import {generateBrandFontSizes} from '../brand-font-sizes-generator.js';
 
 test('generateBrandFontSizes', () => {
     const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');

scripts/mistica-skin-generator/generators/font-sizes/__tests__/mistica-font-weights-generator.test.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {generateMisticaFontSizes} from '../mistica-font-sizes-generator';
+import {generateMisticaFontSizes} from '../mistica-font-sizes-generator.js';
 
 test('generateMisticaFontSizes', () => {
     const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');

scripts/mistica-skin-generator/generators/font-weights/__tests__/brand-font-weights-generator.test.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {generateBrandFontWeights} from '../brand-font-weights-generator';
+import {generateBrandFontWeights} from '../brand-font-weights-generator.js';
 
 test('generateBrandFontWeights', () => {
     const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');

scripts/mistica-skin-generator/generators/font-weights/__tests__/mistica-font-weights-generator.test.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import {resolve} from 'path';
-import {generateMisticaFontWeights} from '../mistica-font-weights-generator';
+import {generateMisticaFontWeights} from '../mistica-font-weights-generator.js';
 
 test('generateMisticaFontWeights', () => {
     const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');

scripts/mistica-skin-generator/index.js

@@ -1,17 +1,17 @@
 import fs from 'fs';
-import {generateMisticaCornerRadius} from './generators/corner-radius/mistica-corner-radius-generator';
-import {generateBrandFontSizes} from './generators/font-sizes/brand-font-sizes-generator';
-import {generateMisticaFontSizes} from './generators/font-sizes/mistica-font-sizes-generator';
-import {generateBrandFontWeights} from './generators/font-weights/brand-font-weights-generator';
-import {generateMisticaFontWeights} from './generators/font-weights/mistica-font-weights-generator';
-import {downloadTokens} from './token-downloader';
-import {generateBrandCornerRadius} from './generators/corner-radius/brand-corner-radius-generator';
-import {generateMisticaColors} from './generators/colors/mistica-colors-generator';
-import {generateMisticaColor} from './generators/colors/mistica-color-generator';
-import {reduceColors} from './generators/colors/reduce-colors';
-import {generateColorToolkit} from './generators/colors/color-toolkit-generator';
-import {generateUIColorToolkit} from './generators/colors/uicolor-toolkit-generator';
-import {generateBrandColors} from './generators/colors/brand-colors-generator';
+import {generateMisticaCornerRadius} from './generators/corner-radius/mistica-corner-radius-generator.js';
+import {generateBrandFontSizes} from './generators/font-sizes/brand-font-sizes-generator.js';
+import {generateMisticaFontSizes} from './generators/font-sizes/mistica-font-sizes-generator.js';
+import {generateBrandFontWeights} from './generators/font-weights/brand-font-weights-generator.js';
+import {generateMisticaFontWeights} from './generators/font-weights/mistica-font-weights-generator.js';
+import {downloadTokens} from './token-downloader.js';
+import {generateBrandCornerRadius} from './generators/corner-radius/brand-corner-radius-generator.js';
+import {generateMisticaColors} from './generators/colors/mistica-colors-generator.js';
+import {generateMisticaColor} from './generators/colors/mistica-color-generator.js';
+import {reduceColors} from './generators/colors/reduce-colors.js';
+import {generateColorToolkit} from './generators/colors/color-toolkit-generator.js';
+import {generateUIColorToolkit} from './generators/colors/uicolor-toolkit-generator.js';
+import {generateBrandColors} from './generators/colors/brand-colors-generator.js';
 
 const BRANDS = [
     {