Add 'descriptor' arg to 'getVariableName'

marcomontalbano · May 23, 2023 · f506c00 · f506c00
1 parent f9fadd5
commit f506c00
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 63 deletions.
diff --git a/packages/output-styles-as-css/src/index.test.ts b/packages/output-styles-as-css/src/index.test.ts
@@ -8,9 +8,8 @@ import {
 } from '@figma-export/types';
 import { camelCase } from '@figma-export/utils';
 
-// eslint-disable-next-line import/order
-import fs = require('fs');
-import outputter = require('./index');
+import fs from 'fs';
+import outputter from './index';
 
 const mockFill = (fills: FillStyle[], { visible = true, name = 'variable/name', comment = 'lorem ipsum' } = {}): Style => ({
     fills,

diff --git a/packages/output-styles-as-css/src/index.ts b/packages/output-styles-as-css/src/index.ts
@@ -1,29 +1,27 @@
 import * as FigmaExport from '@figma-export/types';
 import { kebabCase } from '@figma-export/utils';
 
-import { writeVariable, writeComment, sanitizeText } from './utils';
+import { sanitizeText, writeComment, writeVariable } from './utils';
 
 import fs = require('fs');
 import path = require('path');
 
 type Options = {
     output: string;
     getFilename?: () => string;
-    getVariableName?: (style: FigmaExport.Style) => string;
+    getVariableName?: FigmaExport.GetVariableName;
 }
 
 export = ({
     output,
     getFilename = () => '_variables',
-    getVariableName = (style) => kebabCase(style.name).toLowerCase(),
+    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
 }: Options): FigmaExport.StyleOutputter => {
     return async (styles) => {
         let text = '';
 
         styles.forEach((style) => {
             if (style.visible) {
-                const variableName = getVariableName(style);
-
                 // eslint-disable-next-line default-case
                 switch (style.styleType) {
                     case 'FILL': {
@@ -34,7 +32,7 @@ export = ({
 
                         if (value) {
                             text += writeComment(style.comment);
-                            text += writeVariable(variableName, value);
+                            text += writeVariable(getVariableName(style), value);
                         }
 
                         break;
@@ -58,25 +56,25 @@ export = ({
 
                         if (value) {
                             text += writeComment(style.comment);
-                            text += writeVariable(variableName, value);
+                            text += writeVariable(getVariableName(style), value);
                         }
 
                         break;
                     }
 
                     case 'TEXT': {
                         text += writeComment(style.comment);
-                        text += writeVariable(`${variableName}-font-family`, `"${style.style.fontFamily}"`);
-                        text += writeVariable(`${variableName}-font-size`, `${style.style.fontSize}px`);
-                        text += writeVariable(`${variableName}-font-style`, `${style.style.fontStyle}`);
-                        text += writeVariable(`${variableName}-font-variant`, `${style.style.fontVariant}`);
-                        text += writeVariable(`${variableName}-font-weight`, `${style.style.fontWeight}`);
-                        text += writeVariable(`${variableName}-letter-spacing`, `${style.style.letterSpacing}px`);
-                        text += writeVariable(`${variableName}-line-height`, `${style.style.lineHeight}px`);
-                        text += writeVariable(`${variableName}-text-align`, `${style.style.textAlign}`);
-                        text += writeVariable(`${variableName}-text-decoration`, `${style.style.textDecoration}`);
-                        text += writeVariable(`${variableName}-text-transform`, `${style.style.textTransform}`);
-                        text += writeVariable(`${variableName}-vertical-align`, `${style.style.verticalAlign}`);
+                        text += writeVariable(getVariableName(style, 'font-family'), `"${style.style.fontFamily}"`);
+                        text += writeVariable(getVariableName(style, 'font-size'), `${style.style.fontSize}px`);
+                        text += writeVariable(getVariableName(style, 'font-style'), `${style.style.fontStyle}`);
+                        text += writeVariable(getVariableName(style, 'font-variant'), `${style.style.fontVariant}`);
+                        text += writeVariable(getVariableName(style, 'font-weight'), `${style.style.fontWeight}`);
+                        text += writeVariable(getVariableName(style, 'letter-spacing'), `${style.style.letterSpacing}px`);
+                        text += writeVariable(getVariableName(style, 'line-height'), `${style.style.lineHeight}px`);
+                        text += writeVariable(getVariableName(style, 'text-align'), `${style.style.textAlign}`);
+                        text += writeVariable(getVariableName(style, 'text-decoration'), `${style.style.textDecoration}`);
+                        text += writeVariable(getVariableName(style, 'text-transform'), `${style.style.textTransform}`);
+                        text += writeVariable(getVariableName(style, 'vertical-align'), `${style.style.verticalAlign}`);
 
                         break;
                     }

diff --git a/packages/output-styles-as-less/src/index.test.ts b/packages/output-styles-as-less/src/index.test.ts
@@ -8,9 +8,8 @@ import {
 } from '@figma-export/types';
 import { camelCase } from '@figma-export/utils';
 
-// eslint-disable-next-line import/order
-import fs = require('fs');
-import outputter = require('./index');
+import fs from 'fs';
+import outputter from './index';
 
 const mockFill = (fills: FillStyle[], { visible = true, name = 'variable/name', comment = 'lorem ipsum' } = {}): Style => ({
     fills,
@@ -317,7 +316,29 @@ describe('style output as less', () => {
                 + 'text-decoration: none;\n'
                 + 'text-transform: uppercase;\n'
                 + 'vertical-align: middle;\n'
-                + '};\n',
+                + '};\n'
+                + '\n\n'
+                + '@variable-name-font-family: "Verdana";\n'
+                + '\n\n'
+                + '@variable-name-font-size: 12px;\n'
+                + '\n\n'
+                + '@variable-name-font-style: italic;\n'
+                + '\n\n'
+                + '@variable-name-font-variant: normal;\n'
+                + '\n\n'
+                + '@variable-name-font-weight: 100;\n'
+                + '\n\n'
+                + '@variable-name-letter-spacing: 10px;\n'
+                + '\n\n'
+                + '@variable-name-line-height: 12px;\n'
+                + '\n\n'
+                + '@variable-name-text-align: left;\n'
+                + '\n\n'
+                + '@variable-name-text-decoration: none;\n'
+                + '\n\n'
+                + '@variable-name-text-transform: uppercase;\n'
+                + '\n\n'
+                + '@variable-name-vertical-align: middle;\n',
             );
         });
     });

diff --git a/packages/output-styles-as-less/src/index.ts b/packages/output-styles-as-less/src/index.ts
@@ -1,29 +1,27 @@
 import * as FigmaExport from '@figma-export/types';
 import { kebabCase } from '@figma-export/utils';
 
-import { writeVariable, writeMap } from './utils';
+import { writeMap, writeVariable } from './utils';
 
 import fs = require('fs');
 import path = require('path');
 
 type Options = {
     output: string;
     getFilename?: () => string;
-    getVariableName?: (style: FigmaExport.Style) => string;
+    getVariableName?: FigmaExport.GetVariableName;
 }
 
 export = ({
     output,
     getFilename = () => '_variables',
-    getVariableName = (style) => kebabCase(style.name).toLowerCase(),
+    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
 }: Options): FigmaExport.StyleOutputter => {
     return async (styles) => {
         let text = '';
 
         styles.forEach((style) => {
             if (style.visible) {
-                const variableName = getVariableName(style);
-
                 // eslint-disable-next-line default-case
                 switch (style.styleType) {
                     case 'FILL': {
@@ -32,7 +30,7 @@ export = ({
                             .map((fill) => fill.value)
                             .join(', ');
 
-                        text += writeVariable(style.comment, variableName, value);
+                        text += writeVariable(style.comment, getVariableName(style), value);
 
                         break;
                     }
@@ -51,7 +49,7 @@ export = ({
                             .join(', ');
 
                         // Shadow and Blur effects cannot be combined together since they use two different CSS properties.
-                        text += writeVariable(style.comment, variableName, boxShadowValue || filterBlurValue);
+                        text += writeVariable(style.comment, getVariableName(style), boxShadowValue || filterBlurValue);
 
                         break;
                     }
@@ -71,7 +69,19 @@ export = ({
                             vertical-align: ${style.style.verticalAlign};
                         }`;
 
-                        text += writeMap(style.comment, variableName, value);
+                        text += writeMap(style.comment, getVariableName(style), value);
+
+                        text += writeVariable(style.comment, getVariableName(style, 'font-family'), `"${style.style.fontFamily}"`);
+                        text += writeVariable(style.comment, getVariableName(style, 'font-size'), `${style.style.fontSize}px`);
+                        text += writeVariable(style.comment, getVariableName(style, 'font-style'), `${style.style.fontStyle}`);
+                        text += writeVariable(style.comment, getVariableName(style, 'font-variant'), `${style.style.fontVariant}`);
+                        text += writeVariable(style.comment, getVariableName(style, 'font-weight'), `${style.style.fontWeight}`);
+                        text += writeVariable(style.comment, getVariableName(style, 'letter-spacing'), `${style.style.letterSpacing}px`);
+                        text += writeVariable(style.comment, getVariableName(style, 'line-height'), `${style.style.lineHeight}px`);
+                        text += writeVariable(style.comment, getVariableName(style, 'text-align'), `${style.style.textAlign}`);
+                        text += writeVariable(style.comment, getVariableName(style, 'text-decoration'), `${style.style.textDecoration}`);
+                        text += writeVariable(style.comment, getVariableName(style, 'text-transform'), `${style.style.textTransform}`);
+                        text += writeVariable(style.comment, getVariableName(style, 'vertical-align'), `${style.style.verticalAlign}`);
 
                         break;
                     }

diff --git a/packages/output-styles-as-sass/src/index.test.ts b/packages/output-styles-as-sass/src/index.test.ts
@@ -8,9 +8,8 @@ import {
 } from '@figma-export/types';
 import { camelCase } from '@figma-export/utils';
 
-// eslint-disable-next-line import/order
-import fs = require('fs');
-import outputter = require('./index');
+import fs from 'fs';
+import outputter from './index';
 
 const mockFill = (fills: FillStyle[], { visible = true, name = 'variable/name', comment = 'lorem ipsum' } = {}): Style => ({
     fills,
@@ -318,7 +317,29 @@ describe('style output as scss', () => {
                 + '  "text-decoration": none,\n'
                 + '  "text-transform": uppercase,\n'
                 + '  "vertical-align": middle\n'
-                + ');\n',
+                + ');\n'
+                + '\n\n'
+                + '$variable-name-font-family: "Verdana";\n'
+                + '\n\n'
+                + '$variable-name-font-size: 12px;\n'
+                + '\n\n'
+                + '$variable-name-font-style: italic;\n'
+                + '\n\n'
+                + '$variable-name-font-variant: normal;\n'
+                + '\n\n'
+                + '$variable-name-font-weight: 100;\n'
+                + '\n\n'
+                + '$variable-name-letter-spacing: 10px;\n'
+                + '\n\n'
+                + '$variable-name-line-height: 12px;\n'
+                + '\n\n'
+                + '$variable-name-text-align: left;\n'
+                + '\n\n'
+                + '$variable-name-text-decoration: none;\n'
+                + '\n\n'
+                + '$variable-name-text-transform: uppercase;\n'
+                + '\n\n'
+                + '$variable-name-vertical-align: middle;\n',
             );
         });
     });

diff --git a/packages/output-styles-as-sass/src/index.ts b/packages/output-styles-as-sass/src/index.ts
@@ -1,8 +1,8 @@
 import * as FigmaExport from '@figma-export/types';
 import { kebabCase } from '@figma-export/utils';
 
-import { writeVariable } from './utils';
 import { Extension } from './types';
+import { writeVariable } from './utils';
 
 import fs = require('fs');
 import path = require('path');
@@ -11,14 +11,14 @@ type Options = {
     output: string;
     getExtension?: () => Extension;
     getFilename?: () => string;
-    getVariableName?: (style: FigmaExport.Style) => string;
+    getVariableName?: FigmaExport.GetVariableName
 }
 
 export = ({
     output,
     getExtension = () => 'SCSS',
     getFilename = () => '_variables',
-    getVariableName = (style) => kebabCase(style.name).toLowerCase(),
+    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
 }: Options): FigmaExport.StyleOutputter => {
     return async (styles) => {
         const extension = getExtension();
@@ -27,8 +27,6 @@ export = ({
 
         styles.forEach((style) => {
             if (style.visible) {
-                const variableName = getVariableName(style);
-
                 // eslint-disable-next-line default-case
                 switch (style.styleType) {
                     case 'FILL': {
@@ -37,7 +35,7 @@ export = ({
                             .map((fill) => fill.value)
                             .join(', ');
 
-                        text += writeVariable(style.comment, variableName, value, extension);
+                        text += writeVariable(style.comment, getVariableName(style), value, extension);
 
                         break;
                     }
@@ -56,7 +54,7 @@ export = ({
                             .join(', ');
 
                         // Shadow and Blur effects cannot be combined together since they use two different CSS properties.
-                        text += writeVariable(style.comment, variableName, boxShadowValue || filterBlurValue, extension);
+                        text += writeVariable(style.comment, getVariableName(style), boxShadowValue || filterBlurValue, extension);
 
                         break;
                     }
@@ -76,7 +74,74 @@ export = ({
                             "vertical-align": ${style.style.verticalAlign}
                         )`;
 
-                        text += writeVariable(style.comment, variableName, value, extension);
+                        text += writeVariable(style.comment, getVariableName(style), value, extension);
+
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'font-family'),
+                            `"${style.style.fontFamily}"`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'font-size'),
+                            `${style.style.fontSize}px`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'font-style'),
+                            `${style.style.fontStyle}`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'font-variant'),
+                            `${style.style.fontVariant}`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'font-weight'),
+                            `${style.style.fontWeight}`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'letter-spacing'),
+                            `${style.style.letterSpacing}px`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'line-height'),
+                            `${style.style.lineHeight}px`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'text-align'),
+                            `${style.style.textAlign}`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'text-decoration'),
+                            `${style.style.textDecoration}`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'text-transform'),
+                            `${style.style.textTransform}`,
+                            extension,
+                        );
+                        text += writeVariable(
+                            style.comment,
+                            getVariableName(style, 'vertical-align'),
+                            `${style.style.verticalAlign}`,
+                            extension,
+                        );
 
                         break;
                     }