feat: generate SVG types

muhammadsammy · Jun 25, 2020 · 3ce6d80 · 3ce6d80
1 parent b7c3c6f
commit 3ce6d80
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/src/generation/ClassesGenerator.ts b/src/generation/ClassesGenerator.ts
@@ -14,6 +14,7 @@ import { Typography as defaultTypography } from '../classes/Typography';
 import { Transitions as defaultTransitions } from '../classes/Transitions';
 import { Transforms as defaultTransforms } from '../classes/Transforms';
 import { Interactivity as defaultInteractivity } from '../classes/Interactivity';
+import { SVG as defaultSVG } from '../classes/SVG';
 import isEmpty from 'lodash.isempty';
 
 export class ClassesGenerator implements IClassesGenerator {
@@ -152,6 +153,19 @@ export class ClassesGenerator implements IClassesGenerator {
     return new ClassesGroupTemplateGenerator(Interactivity, 'Interactivity', this.configScanner.prefix).generate();
   };
 
+  public SVG = (): string => {
+    const SVG = {
+      ...defaultSVG,
+      fill: Object.keys(this.configScanner.themeConfig.fill).map(value => 'fill-' + value),
+      stroke: Object.keys(this.configScanner.themeConfig.stroke).map(value => 'stroke-' + value),
+      strokeWidth: Object.keys(this.configScanner.themeConfig.strokeWidth).map(value => 'stroke-' + value),
+    };
+
+    this.allGeneratedClasses.SVG = SVG;
+
+    return new ClassesGroupTemplateGenerator(SVG, 'SVG', this.configScanner.prefix).generate();
+  };
+
   public flexBox = (): string => {
     const FlexBox = {
       ...defaultFlexBox,

diff --git a/src/generation/IGenerator.ts b/src/generation/IGenerator.ts
@@ -15,7 +15,7 @@ export interface IClassesGenerator {
   interactivity: () => string;
   // layout: () => string;
   // sizing: () => string;
-  // SVG: () => string;
+  SVG: () => string;
   transforms: () => string;
   typography: () => string;
 }
diff --git a/src/generation/createFile.ts b/src/generation/createFile.ts
@@ -57,7 +57,6 @@ export function createFileWithGeneratedTypes(options: Options): void {
       ? `import {${customClassesTypeName} as TCustomClassesFromExternalFile} from './${customClassesFilename}';`
       : '';
 
-    // prettier-ignore
     const result = baseTemplateString
       .replace(/_PREFIX_/g, prefix)
       .replace(/_SEPARATOR_/g, separator)
@@ -73,6 +72,7 @@ export function createFileWithGeneratedTypes(options: Options): void {
       .replace(/___TRANSITIONS___/g, classesGenerator.transitions)
       .replace(/___TRANSFORMS___/g, classesGenerator.transforms)
       .replace(/___INTERACTIVITY___/g, classesGenerator.interactivity)
+      .replace(/___SVG___/g, classesGenerator.SVG)
 
       .replace(/MAX_WIDTH_BY_BREAKPOINTS/g, generateTypes(classesGenerator.getGeneratedMaxWidthByBreakpointsClasses()))
       .replace(/WIDTH_SPACINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().widths, prefix))

diff --git a/src/generation/utils/baseTemplateString.ts b/src/generation/utils/baseTemplateString.ts
@@ -139,13 +139,7 @@ ___TRANSFORMS___
 
 ___INTERACTIVITY___
 
-export type TFill = '_PREFIX_fill-current';
-
-export type TStroke = '_PREFIX_stroke-current';
-
-export type TStrokeWidth = '_PREFIX_stroke-0' | '_PREFIX_stroke-1' | '_PREFIX_stroke- 2';
-
-export type TSvg = TFill | TStroke | TStrokeWidth;
+___SVG___
 
 export type TScreenReaders = '_PREFIX_sr-only' | '_PREFIX_not-sr-only';