Convert Tailwind config to TypeScript
This commit is contained in:
parent
0b06f04271
commit
154fa0c0ed
5 changed files with 66 additions and 60 deletions
|
@ -61,7 +61,7 @@ module.exports = {
|
||||||
'URLSearchParams', // core-js
|
'URLSearchParams', // core-js
|
||||||
],
|
],
|
||||||
tailwindcss: {
|
tailwindcss: {
|
||||||
config: 'tailwind.config.cjs',
|
config: 'tailwind.config.ts',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -268,7 +268,7 @@ module.exports = {
|
||||||
'error',
|
'error',
|
||||||
{
|
{
|
||||||
classRegex: '^(base|container|icon|item|list|outer|wrapper)?[c|C]lass(Name)?$',
|
classRegex: '^(base|container|icon|item|list|outer|wrapper)?[c|C]lass(Name)?$',
|
||||||
config: 'tailwind.config.cjs',
|
config: 'tailwind.config.ts',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
'tailwindcss/migration-from-tailwind-2': 'error',
|
'tailwindcss/migration-from-tailwind-2': 'error',
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
const { parseColorMatrix } = require('./tailwind/colors.cjs');
|
import aspectRatioPlugin from '@tailwindcss/aspect-ratio';
|
||||||
|
import formsPlugin from '@tailwindcss/forms';
|
||||||
|
import typographyPlugin from '@tailwindcss/typography';
|
||||||
|
import { type Config } from 'tailwindcss';
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
import { parseColorMatrix } from './tailwind/colors';
|
||||||
module.exports = {
|
|
||||||
|
const config: Config = {
|
||||||
content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],
|
content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
|
@ -98,8 +102,10 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require('@tailwindcss/forms'),
|
aspectRatioPlugin,
|
||||||
require('@tailwindcss/typography'),
|
formsPlugin,
|
||||||
require('@tailwindcss/aspect-ratio'),
|
typographyPlugin,
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default config;
|
|
@ -1,46 +0,0 @@
|
||||||
// https://tailwindcss.com/docs/customizing-colors#using-css-variables
|
|
||||||
function withOpacityValue(variable) {
|
|
||||||
return ({ opacityValue }) => {
|
|
||||||
if (opacityValue === undefined) {
|
|
||||||
return `rgb(var(${variable}))`;
|
|
||||||
}
|
|
||||||
return `rgb(var(${variable}) / ${opacityValue})`;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Parse a single color as a CSS variable
|
|
||||||
const toColorVariable = (colorName, tint = null) => {
|
|
||||||
const suffix = tint ? `-${tint}` : '';
|
|
||||||
const variable = `--color-${colorName}${suffix}`;
|
|
||||||
|
|
||||||
return withOpacityValue(variable);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Parse list of tints into Tailwind function with CSS variables
|
|
||||||
const parseTints = (colorName, tints) => {
|
|
||||||
return tints.reduce((colorObj, tint) => {
|
|
||||||
colorObj[tint] = toColorVariable(colorName, tint);
|
|
||||||
return colorObj;
|
|
||||||
}, {});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Parse color matrix into Tailwind color palette
|
|
||||||
const parseColorMatrix = colorMatrix => {
|
|
||||||
return Object.entries(colorMatrix).reduce((palette, colorData) => {
|
|
||||||
const [colorName, tints] = colorData;
|
|
||||||
|
|
||||||
// Conditionally parse array or single-tint colors
|
|
||||||
if (Array.isArray(tints)) {
|
|
||||||
palette[colorName] = parseTints(colorName, tints);
|
|
||||||
} else if (tints === true) {
|
|
||||||
palette[colorName] = toColorVariable(colorName);
|
|
||||||
}
|
|
||||||
|
|
||||||
return palette;
|
|
||||||
}, {});
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
withOpacityValue,
|
|
||||||
parseColorMatrix,
|
|
||||||
};
|
|
|
@ -1,7 +1,7 @@
|
||||||
import {
|
import {
|
||||||
withOpacityValue,
|
withOpacityValue,
|
||||||
parseColorMatrix,
|
parseColorMatrix,
|
||||||
} from './colors.cjs';
|
} from './colors';
|
||||||
|
|
||||||
describe('withOpacityValue()', () => {
|
describe('withOpacityValue()', () => {
|
||||||
it('returns a Tailwind color function with alpha support', () => {
|
it('returns a Tailwind color function with alpha support', () => {
|
||||||
|
@ -11,8 +11,7 @@ describe('withOpacityValue()', () => {
|
||||||
expect(typeof result).toBe('function');
|
expect(typeof result).toBe('function');
|
||||||
|
|
||||||
// Test calling the function
|
// Test calling the function
|
||||||
expect(result({})).toBe('rgb(var(--color-primary-500))');
|
expect(result).toBe('rgb(var(--color-primary-500) / <alpha-value>)');
|
||||||
expect(result({ opacityValue: .5 })).toBe('rgb(var(--color-primary-500) / 0.5)');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -29,8 +28,8 @@ describe('parseColorMatrix()', () => {
|
||||||
const result = parseColorMatrix(colorMatrix);
|
const result = parseColorMatrix(colorMatrix);
|
||||||
|
|
||||||
// Colors are mapped to functions which return CSS values
|
// Colors are mapped to functions which return CSS values
|
||||||
expect(result.primary[500]({})).toEqual('rgb(var(--color-primary-500))');
|
// @ts-ignore
|
||||||
expect(result.accent[300]({ opacityValue: .3 })).toEqual('rgb(var(--color-accent-300) / 0.3)');
|
expect(result.accent['300']).toEqual('rgb(var(--color-accent-300) / <alpha-value>)');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('parses single-tint values', () => {
|
it('parses single-tint values', () => {
|
||||||
|
@ -46,6 +45,6 @@ describe('parseColorMatrix()', () => {
|
||||||
|
|
||||||
const result = parseColorMatrix(colorMatrix);
|
const result = parseColorMatrix(colorMatrix);
|
||||||
|
|
||||||
expect(result['gradient-start']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-start) / 0.7)');
|
expect(result['gradient-start']).toEqual('rgb(var(--color-gradient-start) / <alpha-value>)');
|
||||||
});
|
});
|
||||||
});
|
});
|
47
tailwind/colors.ts
Normal file
47
tailwind/colors.ts
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
import { type RecursiveKeyValuePair } from 'tailwindcss/types/config';
|
||||||
|
|
||||||
|
/** https://tailwindcss.com/docs/customizing-colors#using-css-variables */
|
||||||
|
function withOpacityValue(variable: string): string {
|
||||||
|
return `rgb(var(${variable}) / <alpha-value>)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Parse a single color as a CSS variable. */
|
||||||
|
const toColorVariable = (colorName: string, tint: number | null = null): string => {
|
||||||
|
const suffix = tint ? `-${tint}` : '';
|
||||||
|
const variable = `--color-${colorName}${suffix}`;
|
||||||
|
|
||||||
|
return withOpacityValue(variable);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Parse list of tints into Tailwind function with CSS variables. */
|
||||||
|
const parseTints = (colorName: string, tints: number[]): RecursiveKeyValuePair => {
|
||||||
|
return tints.reduce<Record<string, string>>((colorObj, tint) => {
|
||||||
|
colorObj[tint] = toColorVariable(colorName, tint);
|
||||||
|
return colorObj;
|
||||||
|
}, {});
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ColorMatrix {
|
||||||
|
[colorName: string]: number[] | boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Parse color matrix into Tailwind color palette. */
|
||||||
|
const parseColorMatrix = (colorMatrix: ColorMatrix): RecursiveKeyValuePair => {
|
||||||
|
return Object.entries(colorMatrix).reduce<RecursiveKeyValuePair>((palette, colorData) => {
|
||||||
|
const [colorName, tints] = colorData;
|
||||||
|
|
||||||
|
// Conditionally parse array or single-tint colors
|
||||||
|
if (Array.isArray(tints)) {
|
||||||
|
palette[colorName] = parseTints(colorName, tints);
|
||||||
|
} else if (tints === true) {
|
||||||
|
palette[colorName] = toColorVariable(colorName);
|
||||||
|
}
|
||||||
|
|
||||||
|
return palette;
|
||||||
|
}, {});
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
withOpacityValue,
|
||||||
|
parseColorMatrix,
|
||||||
|
};
|
Loading…
Reference in a new issue