143 lines
3.9 KiB
JavaScript
143 lines
3.9 KiB
JavaScript
/* © Andy Bell - https://buildexcellentwebsit.es/ */
|
|
|
|
const plugin = require('tailwindcss/plugin');
|
|
const postcss = require('postcss');
|
|
const postcssJs = require('postcss-js');
|
|
|
|
const clampGenerator = require('./src/utilities/clamp-generator.js');
|
|
const tokensToTailwind = require('./src/utilities/tokens-to-tailwind.js');
|
|
|
|
// Raw design tokens
|
|
const colorTokens = require('./src/_data/designTokens/colors.json');
|
|
const fontTokens = require('./src/_data/designTokens/fonts.json');
|
|
const spacingTokens = require('./src/_data/designTokens/spacing.json');
|
|
const textSizeTokens = require('./src/_data/designTokens/textSizes.json');
|
|
const textLeadingTokens = require('./src/_data/designTokens/textLeading.json');
|
|
const textWeightTokens = require('./src/_data/designTokens/textWeights.json');
|
|
const viewportTokens = require('./src/_data/designTokens/viewports.json');
|
|
|
|
// Process design tokens
|
|
const colors = tokensToTailwind(colorTokens.items);
|
|
const fontFamily = tokensToTailwind(fontTokens.items);
|
|
const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items));
|
|
const fontWeight = tokensToTailwind(textWeightTokens.items);
|
|
const fontLeading = tokensToTailwind(textLeadingTokens.items);
|
|
const spacing = tokensToTailwind(clampGenerator(spacingTokens.items));
|
|
|
|
module.exports = {
|
|
content: ['./src/**/*.{html,js,md,njk,liquid,webc}'],
|
|
presets: [],
|
|
theme: {
|
|
screens: {
|
|
ltsm: {max: `${viewportTokens.sm}px`},
|
|
sm: `${viewportTokens.sm}px`,
|
|
md: `${viewportTokens.md}px`
|
|
},
|
|
colors,
|
|
spacing,
|
|
fontFamily,
|
|
fontSize,
|
|
fontWeight,
|
|
fontLeading,
|
|
backgroundColor: ({theme}) => theme('colors'),
|
|
textColor: ({theme}) => theme('colors'),
|
|
margin: ({theme}) => ({
|
|
auto: 'auto',
|
|
...theme('spacing')
|
|
}),
|
|
padding: ({theme}) => theme('spacing')
|
|
},
|
|
variantOrder: [
|
|
'first',
|
|
'last',
|
|
'odd',
|
|
'even',
|
|
'visited',
|
|
'checked',
|
|
'empty',
|
|
'read-only',
|
|
'group-hover',
|
|
'group-focus',
|
|
'focus-within',
|
|
'hover',
|
|
'focus',
|
|
'focus-visible',
|
|
'active',
|
|
'disabled'
|
|
],
|
|
|
|
// Disables Tailwind's reset etc
|
|
corePlugins: {
|
|
preflight: false,
|
|
textOpacity: false,
|
|
backgroundOpacity: false,
|
|
borderOpacity: false
|
|
},
|
|
|
|
// Prevents Tailwind's core components
|
|
blocklist: ['container'],
|
|
|
|
// Prevents Tailwind from generating that wall of empty custom properties
|
|
experimental: {
|
|
optimizeUniversalDefaults: true
|
|
},
|
|
|
|
plugins: [
|
|
// Generates custom property values from tailwind config
|
|
plugin(function ({addComponents, config}) {
|
|
let result = '';
|
|
|
|
const currentConfig = config();
|
|
|
|
const groups = [
|
|
{key: 'colors', prefix: 'color'},
|
|
{key: 'spacing', prefix: 'space'},
|
|
{key: 'fontSize', prefix: 'size'},
|
|
{key: 'fontLeading', prefix: 'leading'},
|
|
{key: 'fontFamily', prefix: 'font'},
|
|
{key: 'fontWeight', prefix: 'font'}
|
|
];
|
|
|
|
groups.forEach(({key, prefix}) => {
|
|
const group = currentConfig.theme[key];
|
|
|
|
if (!group) {
|
|
return;
|
|
}
|
|
|
|
Object.keys(group).forEach(key => {
|
|
result += `--${prefix}-${key}: ${group[key]};`;
|
|
});
|
|
});
|
|
|
|
addComponents({
|
|
':root': postcssJs.objectify(postcss.parse(result))
|
|
});
|
|
}),
|
|
|
|
// Generates custom utility classes
|
|
plugin(function ({addUtilities, config}) {
|
|
const currentConfig = config();
|
|
const customUtilities = [
|
|
{key: 'spacing', prefix: 'flow-space', property: '--flow-space'},
|
|
{key: 'colors', prefix: 'spot-color', property: '--spot-color'}
|
|
];
|
|
|
|
customUtilities.forEach(({key, prefix, property}) => {
|
|
const group = currentConfig.theme[key];
|
|
|
|
if (!group) {
|
|
return;
|
|
}
|
|
|
|
Object.keys(group).forEach(key => {
|
|
addUtilities({
|
|
[`.${prefix}-${key}`]: postcssJs.objectify(
|
|
postcss.parse(`${property}: ${group[key]}`)
|
|
)
|
|
});
|
|
});
|
|
});
|
|
})
|
|
]
|
|
};
|