Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(deps): update dependency style-dictionary to v4 #520

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

chore(deps): update dependency style-dictionary to v4 #520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
12c7547
chore(deps): update dependency style-dictionary to v4
renovate[bot] Jul 10, 2024
bb58330
fix: fix build
jeripeierSBB Jul 11, 2024
3953b7c
fix: simplify
jeripeierSBB Jul 11, 2024
7725740
Merge branch 'refs/heads/main' into renovate/style-dictionary-4.x
jeripeierSBB Aug 5, 2024
dfcebb9
fix: time
jeripeierSBB Aug 5, 2024
99686aa
fix: remove color transition
jeripeierSBB Aug 27, 2024
8b51591
Merge branch 'main' into renovate/style-dictionary-4.x
jeripeierSBB Aug 27, 2024
95e485b
fix: rebase
jeripeierSBB Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 23 additions & 26 deletions build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,53 @@
import { FormatterArguments } from 'style-dictionary/types/Format';
import { config } from './config';
import StyleDictionaryBase, { TransformedToken } from 'style-dictionary';
import { config } from './config.js';
import StyleDictionary from 'style-dictionary';
import * as fs from 'fs';
import type { FormatFnArguments, TransformedToken } from 'style-dictionary/types';
import { fileHeader, getReferences, usesReferences } from 'style-dictionary/utils';

const StyleDictionary = StyleDictionaryBase.extend(config);
const fileHeader = StyleDictionary.formatHelpers.fileHeader;

const styleDictionary = new StyleDictionary(config);
console.log('Build started...');
console.log('\n==============================================');

StyleDictionary.registerFormat({
formatter: ({ file, dictionary, options }: FormatterArguments) => {
const symbols = dictionary.allProperties.map(cssTemplate).join('') + '\n';
styleDictionary.registerFormat({
format: async ({ file, dictionary, options }: FormatFnArguments) => {
const symbols = dictionary.allTokens.map(cssTemplate).join('') + '\n';

const composedVars = fs
.readFileSync('./composed-variables/composed-variables.css', 'utf-8')
.match(/\/\* EXTRACTING_CSS_VARS_START \*\/([\S\s]*)\/\* EXTRACTING_CSS_VARS_END \*\//m)![1];

return (
fileHeader({ file }) +
(await fileHeader({ file })) +
`${options.selector ?? ':root'} {\n${symbols}\n /* Composed variables */\n\n ${composedVars.trim()}\n}\n`
);
},
name: 'css/variables',
});

StyleDictionary.registerFormat({
formatter: (args: FormatterArguments) =>
args.dictionary.allProperties.map(scssTemplate).join('') + '\n',
styleDictionary.registerFormat({
format: async (args: FormatFnArguments) =>
args.dictionary.allTokens.map(scssTemplate).join('') + '\n',
name: 'custom/format/scss',
});

StyleDictionary.registerFormat({
formatter: (args: FormatterArguments) => {
const symbols = args.dictionary.allProperties.map(commonjsTemplate).join('');
styleDictionary.registerFormat({
format: async (args: FormatFnArguments) => {
const symbols = args.dictionary.allTokens.map(commonjsTemplate).join('');
return `module.exports = {\n${symbols}};\n`;
},
name: 'custom/format/javascript/module',
});

StyleDictionary.registerFormat({
formatter: ({ dictionary }) => {
styleDictionary.registerFormat({
format: async ({ dictionary }: FormatFnArguments) => {
const { allTokens } = dictionary;

allTokens.forEach((token) => {
// if a token uses a reference token, we add the original token object
const usesReference = dictionary.usesReference(token);
// If a token uses a reference token, we add the original token object
const usesReference = usesReferences(token);

if (usesReference) {
const ref = dictionary.getReferences(token.original.value);

token.refOriginal = ref;
token.refOriginal = getReferences(token.original.value, dictionary.tokens);
}
});

Expand All @@ -64,7 +61,7 @@ StyleDictionary.registerFormat({
});

// FINALLY, BUILD ALL THE PLATFORMS
StyleDictionary.buildAllPlatforms();
await styleDictionary.buildAllPlatforms();

console.log('\n==============================================');
console.log('\nBuild completed!');
Expand All @@ -83,7 +80,7 @@ function cssTemplate(token: TransformedToken) {
if (token.comment) {
output += ` * ${token.comment}\n`;
}
if (token.attributes?.category === 'size') {
if (token.type === 'dimension') {
output += ` * Original Value: ${token.original.value}px\n`;
}
output += ' */\n';
Expand All @@ -106,7 +103,7 @@ function scssTemplate(token: TransformedToken) {
if (token.comment) {
output += `/// ${token.comment}\n`;
}
if (token.attributes?.category === 'size') {
if (token.type === 'dimension') {
output += `/// Original Value: ${token.original.value}px\n`;
}
output += `$${token.name}: ${token.value};\n`;
Expand Down
27 changes: 10 additions & 17 deletions config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import type { Config } from 'style-dictionary';
import type { Config } from 'style-dictionary/types';

import tokens from './designTokens/index.js';

export const config: Config = {
tokens,
platforms: {
css: {
buildPath: 'dist/css/',
Expand All @@ -15,15 +18,7 @@ export const config: Config = {
},
],
transformGroup: 'css',
transforms: [
'attribute/cti',
'name/cti/kebab',
'time/seconds',
'content/icon',
'color/css',
'size/pxToRem',
'size/rem',
],
transforms: ['attribute/cti', 'name/kebab', 'html/icon', 'size/pxToRem', 'size/rem'],
},
js: {
buildPath: 'dist/js/',
Expand All @@ -47,7 +42,7 @@ export const config: Config = {
},
],
transformGroup: 'js',
transforms: ['attribute/cti', 'name/cti/pascal', 'color/css'],
transforms: ['attribute/cti', 'name/pascal'],
},
jsonFlat: {
buildPath: 'dist/js/',
Expand All @@ -59,7 +54,7 @@ export const config: Config = {
},
],
transformGroup: 'js',
transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
transforms: ['attribute/cti', 'name/kebab'],
},
jsonRaw: {
buildPath: 'dist/js/',
Expand All @@ -71,7 +66,7 @@ export const config: Config = {
},
],
transformGroup: 'js',
transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
transforms: ['attribute/cti', 'name/kebab'],
},
scss: {
buildPath: 'dist/scss/',
Expand All @@ -92,14 +87,12 @@ export const config: Config = {
transformGroup: 'scss',
transforms: [
'attribute/cti',
'name/cti/kebab',
'name/kebab',
'time/seconds',
'content/icon',
'color/css',
'html/icon',
'size/pxToRem',
'size/rem',
],
},
},
source: ['designTokens'],
};
29 changes: 14 additions & 15 deletions designTokens/animation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,44 @@
import type { DesignToken, DesignTokens } from 'style-dictionary';
import type { DesignToken, DesignTokens } from 'style-dictionary/types';

const baseDuration = 40;
const duration = (value: number): number => value * baseDuration;
const attributes = (): Partial<DesignToken> => ({
attributes: {
category: 'time',
},
});
const attributes = {
type: 'time',
attributes: { category: 'time' },
} satisfies Partial<DesignToken>;

export const animation: DesignTokens = {
export const animation = {
duration: {
'-1x': {
...attributes,
value: duration(1),
...attributes(),
},
'-2x': {
...attributes,
value: duration(2),
...attributes(),
},
'-3x': {
...attributes,
value: duration(3),
...attributes(),
},
'-4x': {
...attributes,
value: duration(4),
...attributes(),
},
'-5x': {
...attributes,
value: duration(5),
...attributes(),
},
'-6x': {
...attributes,
value: duration(6),
...attributes(),
},
'-12x': {
...attributes,
value: duration(12),
...attributes(),
},
},
easing: {
value: 'cubic-bezier(.47, .1, 1, .63)',
},
};
} satisfies DesignTokens;
29 changes: 15 additions & 14 deletions designTokens/border.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,57 @@
import type { DesignToken, DesignTokens } from 'style-dictionary';
import type { DesignToken, DesignTokens } from 'style-dictionary/types';

const baseBorderWidth = 1;
const baseBorderRadius = 2;

const borderWidth = (width: number): number => width * baseBorderWidth;
const borderRadius = (width: number): number => width * baseBorderRadius;

const attributes = (): Partial<DesignToken> => ({
const attributes = {
type: 'dimension',
attributes: {
category: 'size',
},
});
} satisfies Partial<DesignToken>;

export const border: DesignTokens = {
export const border = {
width: {
'1x': {
value: borderWidth(1),
...attributes(),
...attributes,
},
'2x': {
value: borderWidth(2),
...attributes(),
...attributes,
},
'3x': {
value: borderWidth(3),
...attributes(),
...attributes,
},
},
radius: {
'1x': {
value: borderRadius(1),
...attributes(),
...attributes,
},
'2x': {
value: borderRadius(2),
...attributes(),
...attributes,
},
'4x': {
value: borderRadius(4),
...attributes(),
...attributes,
},
'6x': {
value: borderRadius(6),
...attributes(),
...attributes,
},
'8x': {
value: borderRadius(8),
...attributes(),
...attributes,
},
'16x': {
value: borderRadius(16),
...attributes(),
...attributes,
},
},
};
} satisfies DesignTokens;
Loading