Skip to content

Commit b1588bf

Browse files
brandyscarneybrandyscarney
committed
style: lint
1 parent 84bd5ca commit b1588bf

File tree

1 file changed

+126
-127
lines changed

1 file changed

+126
-127
lines changed

‎core/scripts/tokens/index.js‎

Lines changed: 126 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -23,136 +23,135 @@
2323
} = require('./utils.js');
2424

2525
const StyleDictionary = (await import('style-dictionary')).default;
26-
26+
2727
// Set the prefix for variables and classes
2828
setPrefixValue('ion');
2929

3030
// Register a custom file header
3131
StyleDictionary.registerFileHeader({
32-
name: 'custom-header',
33-
fileHeader: async (defaultMessages = []) => {
34-
return [...defaultMessages, 'Do not edit directly, this file was auto-generated.'];
35-
},
32+
name: 'custom-header',
33+
fileHeader: async (defaultMessages = []) => {
34+
return [...defaultMessages, 'Do not edit directly, this file was auto-generated.'];
35+
},
3636
});
3737

3838
// SCSS variables format
3939
StyleDictionary.registerFormat({
4040
name: 'scssVariablesFormat',
41-
format: async function({ dictionary, file}) {
41+
format: async function ({ dictionary, file }) {
4242

4343
console.log('Generating SCSS variables...');
4444

45-
// Separate typography tokens from the rest
46-
const typographyProperties = dictionary.allTokens.filter((prop) => prop.$type === 'typography');
47-
const otherProperties = dictionary.allTokens.filter((prop) => prop.$type !== 'typography');
48-
49-
// Make sure the reused scss variables are defined first, to avoid compilation errors
50-
const sortedProperties = [...otherProperties, ...typographyProperties];
51-
52-
const prefixedVariables = sortedProperties.map((prop) => {
53-
// Remove consecutive repeated words from the token name, like border-border-color
54-
const propName = removeConsecutiveRepeatedWords(prop.name);
55-
56-
switch (prop.$type) {
57-
case 'boxShadow':
58-
return generateShadowValue(prop, propName);
59-
case 'fontFamilies':
60-
return generateFontFamilyValue(prop, propName, 'scss');
61-
case 'fontSizes':
62-
return generateFontSizeValue(prop, propName, 'scss');
63-
case 'typography':
64-
return generateTypographyOutput(prop, propName, true);
65-
default:
66-
return generateValue(prop, propName);
67-
}
68-
});
69-
70-
const fileHeader = await file.options.fileHeader();
71-
72-
return [
73-
`/*\n${fileHeader.join('\n')}\n*/`,
74-
'@use "../themes/functions.sizes" as font;\n',
75-
prefixedVariables.join('\n') + '\n',
76-
].join('\n');
45+
// Separate typography tokens from the rest
46+
const typographyProperties = dictionary.allTokens.filter((prop) => prop.$type === 'typography');
47+
const otherProperties = dictionary.allTokens.filter((prop) => prop.$type !== 'typography');
48+
49+
// Make sure the reused scss variables are defined first, to avoid compilation errors
50+
const sortedProperties = [...otherProperties, ...typographyProperties];
51+
52+
const prefixedVariables = sortedProperties.map((prop) => {
53+
// Remove consecutive repeated words from the token name, like border-border-color
54+
const propName = removeConsecutiveRepeatedWords(prop.name);
55+
56+
switch (prop.$type) {
57+
case 'boxShadow':
58+
return generateShadowValue(prop, propName);
59+
case 'fontFamilies':
60+
return generateFontFamilyValue(prop, propName, 'scss');
61+
case 'fontSizes':
62+
return generateFontSizeValue(prop, propName, 'scss');
63+
case 'typography':
64+
return generateTypographyOutput(prop, propName, true);
65+
default:
66+
return generateValue(prop, propName);
67+
}
68+
});
69+
70+
const fileHeader = await file.options.fileHeader();
71+
72+
return [
73+
`/*\n${fileHeader.join('\n')}\n*/`,
74+
'@use "../themes/functions.sizes" as font;\n',
75+
prefixedVariables.join('\n') + '\n',
76+
].join('\n');
7777
},
7878
});
7979

8080
// Create utility-classes
8181
StyleDictionary.registerFormat({
8282
name: 'cssUtilityClassesFormat',
83-
format: async function({ dictionary, file}) {
84-
85-
console.log('Generating Utility-Classes...');
86-
87-
// Arrays to store specific utility classes
88-
const typographyUtilityClasses = [];
89-
const otherUtilityClasses = [];
90-
91-
// Generate utility classes for each token
92-
dictionary.allTokens.map((prop) => {
93-
94-
const tokenCategory = prop.attributes.category;
95-
96-
if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
97-
// Not creating for the tokens below, as they make no sense to exist as utility-classes.
98-
return;
99-
}
100-
101-
// Remove consecutive repeated words from the token name, like border-border-color
102-
const propName = removeConsecutiveRepeatedWords(prop.name);
103-
104-
if (prop.$type === 'typography') {
105-
// Typography tokens are handled differently, as each might have a different tokenType
106-
return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
107-
108-
} else if(tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
109-
// Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
110-
return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
111-
112-
}
113-
114-
let utilityClass = '';
115-
116-
switch (tokenCategory) {
117-
case 'color':
118-
case 'primitives':
119-
case 'semantics':
120-
case 'text':
121-
case 'bg':
122-
case 'icon':
123-
case 'state':
124-
utilityClass = generateColorUtilityClasses(prop, propName);
125-
break;
126-
case 'border-size':
127-
utilityClass = generateBorderSizeUtilityClasses(propName);
128-
break;
129-
case 'font':
130-
utilityClass = generateFontUtilityClasses(prop, propName);
131-
break;
132-
case 'space':
133-
utilityClass = generateSpaceUtilityClasses(prop, propName);
134-
break;
135-
case 'shadow':
136-
case 'elevation':
137-
utilityClass = generateShadowUtilityClasses(propName);
138-
break;
139-
default:
140-
utilityClass = generateUtilityClasses(tokenCategory, propName);
141-
}
142-
143-
return otherUtilityClasses.push(utilityClass);
144-
});
145-
146-
// Concatenate typography utility classes at the beginning
147-
const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
148-
149-
const fileHeader = await file.options.fileHeader();
150-
151-
return [
152-
`/*\n${fileHeader.join('\n')}\n*/`,
153-
'@import "./ionic.vars";\n@import "../themes/mixins";\n',
154-
finalOutput,
155-
].join('\n');
83+
format: async function ({ dictionary, file }) {
84+
85+
console.log('Generating Utility-Classes...');
86+
87+
// Arrays to store specific utility classes
88+
const typographyUtilityClasses = [];
89+
const otherUtilityClasses = [];
90+
91+
// Generate utility classes for each token
92+
dictionary.allTokens.map((prop) => {
93+
94+
const tokenCategory = prop.attributes.category;
95+
96+
if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
97+
// Not creating for the tokens below, as they make no sense to exist as utility-classes.
98+
return;
99+
}
100+
101+
// Remove consecutive repeated words from the token name, like border-border-color
102+
const propName = removeConsecutiveRepeatedWords(prop.name);
103+
104+
if (prop.$type === 'typography') {
105+
// Typography tokens are handled differently, as each might have a different tokenType
106+
return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
107+
108+
} else if (tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
109+
// Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
110+
return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
111+
}
112+
113+
let utilityClass = '';
114+
115+
switch (tokenCategory) {
116+
case 'color':
117+
case 'primitives':
118+
case 'semantics':
119+
case 'text':
120+
case 'bg':
121+
case 'icon':
122+
case 'state':
123+
utilityClass = generateColorUtilityClasses(prop, propName);
124+
break;
125+
case 'border-size':
126+
utilityClass = generateBorderSizeUtilityClasses(propName);
127+
break;
128+
case 'font':
129+
utilityClass = generateFontUtilityClasses(prop, propName);
130+
break;
131+
case 'space':
132+
utilityClass = generateSpaceUtilityClasses(prop, propName);
133+
break;
134+
case 'shadow':
135+
case 'elevation':
136+
utilityClass = generateShadowUtilityClasses(propName);
137+
break;
138+
default:
139+
utilityClass = generateUtilityClasses(tokenCategory, propName);
140+
}
141+
142+
return otherUtilityClasses.push(utilityClass);
143+
});
144+
145+
// Concatenate typography utility classes at the beginning
146+
const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
147+
148+
const fileHeader = await file.options.fileHeader();
149+
150+
return [
151+
`/*\n${fileHeader.join('\n')}\n*/`,
152+
'@import "./ionic.vars";\n@import "../themes/mixins";\n',
153+
finalOutput,
154+
].join('\n');
156155
},
157156
});
158157

@@ -163,24 +162,24 @@ module.exports = {
163162
source: ["node_modules/outsystems-design-tokens/tokens/**/*.json"],
164163
platforms: {
165164
scss: {
166-
transformGroup: "scss",
167-
buildPath: './src/foundations/',
168-
files: [
169-
{
170-
destination: "ionic.vars.scss",
171-
format: "scssVariablesFormat",
172-
options: {
173-
fileHeader: `custom-header`,
174-
},
165+
transformGroup: "scss",
166+
buildPath: './src/foundations/',
167+
files: [
168+
{
169+
destination: "ionic.vars.scss",
170+
format: "scssVariablesFormat",
171+
options: {
172+
fileHeader: `custom-header`,
175173
},
176-
{
177-
destination: "ionic.utility.scss",
178-
format: "cssUtilityClassesFormat",
179-
options: {
180-
fileHeader: `custom-header`
181-
}
174+
},
175+
{
176+
destination: "ionic.utility.scss",
177+
format: "cssUtilityClassesFormat",
178+
options: {
179+
fileHeader: `custom-header`
182180
}
183-
]
181+
}
182+
]
184183
}
185184
}
186185
};

0 commit comments

Comments
 (0)