update imports, use ESM

This commit is contained in:
madrilene 2024-06-03 11:04:35 +02:00
parent b7c2308091
commit ec20c4d731

View file

@ -1,20 +1,20 @@
/* © Andy Bell - https://buildexcellentwebsit.es/ */ /* © Andy Bell - https://github.com/Set-Creative-Studio/cube-boilerplate */
const plugin = require('tailwindcss/plugin'); import plugin from 'tailwindcss/plugin';
const postcss = require('postcss'); import postcss from 'postcss';
const postcssJs = require('postcss-js'); import postcssJs from 'postcss-js';
const clampGenerator = require('./src/utilities/clamp-generator.js'); import {clampGenerator} from './src/_config/utils/clamp-generator.js';
const tokensToTailwind = require('./src/utilities/tokens-to-tailwind.js'); import {tokensToTailwind} from './src/_config/utils/tokens-to-tailwind.js';
// Raw design tokens // Raw design tokens
const colorTokens = require('./src/_data/designTokens/colors.json'); import colorTokens from './src/_data/designTokens/colors.json';
const fontTokens = require('./src/_data/designTokens/fonts.json'); import fontTokens from './src/_data/designTokens/fonts.json';
const spacingTokens = require('./src/_data/designTokens/spacing.json'); import spacingTokens from './src/_data/designTokens/spacing.json';
const textSizeTokens = require('./src/_data/designTokens/textSizes.json'); import textSizeTokens from './src/_data/designTokens/textSizes.json';
const textLeadingTokens = require('./src/_data/designTokens/textLeading.json'); import textLeadingTokens from './src/_data/designTokens/textLeading.json';
const textWeightTokens = require('./src/_data/designTokens/textWeights.json'); import textWeightTokens from './src/_data/designTokens/textWeights.json';
const viewportTokens = require('./src/_data/designTokens/viewports.json'); import viewportTokens from './src/_data/designTokens/viewports.json';
// Process design tokens // Process design tokens
const colors = tokensToTailwind(colorTokens.items); const colors = tokensToTailwind(colorTokens.items);
@ -24,14 +24,15 @@ const fontWeight = tokensToTailwind(textWeightTokens.items);
const fontLeading = tokensToTailwind(textLeadingTokens.items); const fontLeading = tokensToTailwind(textLeadingTokens.items);
const spacing = tokensToTailwind(clampGenerator(spacingTokens.items)); const spacing = tokensToTailwind(clampGenerator(spacingTokens.items));
module.exports = { export default {
content: ['./src/**/*.{html,js,md,njk,liquid,webc}'], content: ['./src/**/*.{html,js,md,njk,liquid,webc}'],
presets: [], presets: [],
theme: { theme: {
screens: { screens: {
ltsm: {max: `${viewportTokens.sm}px`}, ltsm: {max: `${viewportTokens.sm}px`},
sm: `${viewportTokens.sm}px`, sm: `${viewportTokens.sm}px`,
md: `${viewportTokens.md}px` md: `${viewportTokens.md}px`,
navigation: `${viewportTokens.navigation}px`
}, },
colors, colors,
spacing, spacing,
@ -132,9 +133,7 @@ module.exports = {
Object.keys(group).forEach(key => { Object.keys(group).forEach(key => {
addUtilities({ addUtilities({
[`.${prefix}-${key}`]: postcssJs.objectify( [`.${prefix}-${key}`]: postcssJs.objectify(postcss.parse(`${property}: ${group[key]}`))
postcss.parse(`${property}: ${group[key]}`)
)
}); });
}); });
}); });