Skip to content

Commit

Permalink
feat: generate transforms classes types from theme config
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhammadsammy
muhammadsammy committed Jun 25, 2020
1 parent 5842b6e commit 599a2e3
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 156 deletions.
29 changes: 29 additions & 0 deletions src/generation/ClassesGenerator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { FlexBox as defaultFlexBox } from '../classes/Flexbox';
import { Grid as defaultGrid } from '../classes/Grid';
import { Typography as defaultTypography } from '../classes/Typography';
import { Transitions as defaultTransitions } from '../classes/Transitions';
import { Transforms as defaultTransforms } from '../classes/Transforms';
import isEmpty from 'lodash.isempty';

export class ClassesGenerator implements IClassesGenerator {
Expand Down Expand Up @@ -111,6 +112,34 @@ export class ClassesGenerator implements IClassesGenerator {
return new ClassesGroupTemplateGenerator(Transitions, 'Transitions', this.configScanner.prefix).generate();
};

public transforms = (): string => {
const Transforms = {
...defaultTransforms,
scale: ['', 'x-', 'y-'].flatMap(x =>
Object.keys(this.configScanner.themeConfig.scale).map(value => 'scale-' + x + value),
),
rotate: Object.keys(this.configScanner.themeConfig.rotate).map(value => 'rotate-' + value),
translate: ['translate-x', '-translate-x', 'translate-y', '-translate-y'].flatMap(x => {
return Object.keys(
// NOTE: translate gets values from theme.spacing + 50% and 100% variations, but theme.translate overrides it.
isEmpty(this.configScanner.themeConfig.translate)
? { ...this.configScanner.themeConfig.spacing, full: '100%', '1/2': '50%' }
: (this.configScanner.themeConfig.translate as { [key: string]: string }),
).map(value => x + '-' + value);
}),
skew: ['x', 'y'].flatMap(side =>
Object.keys(this.configScanner.themeConfig.skew).map(value =>
value.startsWith('-') ? `-skew-${side}-${value.substring(1)}` : `skew-${side}-${value}`,
),
),
transformOrigin: Object.keys(this.configScanner.themeConfig.transformOrigin).map(value => 'origin-' + value),
};

this.allGeneratedClasses.Transforms = Transforms;

return new ClassesGroupTemplateGenerator(Transforms, 'Transforms', this.configScanner.prefix).generate();
};

public flexBox = (): string => {
const FlexBox = {
...defaultFlexBox,
Expand Down
2 changes: 1 addition & 1 deletion src/generation/IGenerator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@ export interface IClassesGenerator {
// layout: () => string;
// sizing: () => string;
// SVG: () => string;
// transforms: () => string;
transforms: () => string;
typography: () => string;
}
1 change: 1 addition & 0 deletions src/generation/createFile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export function createFileWithGeneratedTypes(options: Options): void {
.replace(/___TYPOGRAPHY___/g, classesGenerator.typography)
.replace(/___TABLES___/g, classesGenerator.tables)
.replace(/___TRANSITIONS___/g, classesGenerator.transitions)
.replace(/___TRANSFORMS___/g, classesGenerator.transforms)

.replace(/MAX_WIDTH_BY_BREAKPOINTS/g, generateTypes(classesGenerator.getGeneratedMaxWidthByBreakpointsClasses()))
.replace(/WIDTH_SPACINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().widths, prefix))
Expand Down
156 changes: 1 addition & 155 deletions src/generation/utils/baseTemplateString.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,161 +135,7 @@ ___EFFECTS___
___TRANSITIONS___
export type TScale =
| '_PREFIX_scale-0'
| '_PREFIX_scale-50'
| '_PREFIX_scale-75'
| '_PREFIX_scale-90'
| '_PREFIX_scale-95'
| '_PREFIX_scale-100'
| '_PREFIX_scale-105'
| '_PREFIX_scale-110'
| '_PREFIX_scale-125'
| '_PREFIX_scale-150'
| '_PREFIX_scale-x-0'
| '_PREFIX_scale-x-50'
| '_PREFIX_scale-x-75'
| '_PREFIX_scale-x-90'
| '_PREFIX_scale-x-95'
| '_PREFIX_scale-x-100'
| '_PREFIX_scale-x-105'
| '_PREFIX_scale-x-110'
| '_PREFIX_scale-x-125'
| '_PREFIX_scale-x-150'
| '_PREFIX_scale-y-0'
| '_PREFIX_scale-y-50'
| '_PREFIX_scale-y-75'
| '_PREFIX_scale-y-90'
| '_PREFIX_scale-y-95'
| '_PREFIX_scale-y-100'
| '_PREFIX_scale-y-105'
| '_PREFIX_scale-y-110'
| '_PREFIX_scale-y-125'
| '_PREFIX_scale-y-150';
export type TRotate =
| '_PREFIX_rotate-0'
| '_PREFIX_rotate-45'
| '_PREFIX_rotate-90'
| '_PREFIX_rotate-180'
| '_PREFIX_-rotate-180'
| '_PREFIX_-rotate-90'
| '_PREFIX_-rotate-45';
export type TTranslate =
| '_PREFIX_translate-x-0'
| '_PREFIX_translate-x-1'
| '_PREFIX_translate-x-2'
| '_PREFIX_translate-x-3'
| '_PREFIX_translate-x-4'
| '_PREFIX_translate-x-5'
| '_PREFIX_translate-x-6'
| '_PREFIX_translate-x-8'
| '_PREFIX_translate-x-10'
| '_PREFIX_translate-x-12'
| '_PREFIX_translate-x-16'
| '_PREFIX_translate-x-20'
| '_PREFIX_translate-x-24'
| '_PREFIX_translate-x-32'
| '_PREFIX_translate-x-40'
| '_PREFIX_translate-x-48'
| '_PREFIX_translate-x-56'
| '_PREFIX_translate-x-64'
| '_PREFIX_translate-x-px'
| '_PREFIX_-translate-x-1'
| '_PREFIX_-translate-x-2'
| '_PREFIX_-translate-x-3'
| '_PREFIX_-translate-x-4'
| '_PREFIX_-translate-x-5'
| '_PREFIX_-translate-x-6'
| '_PREFIX_-translate-x-8'
| '_PREFIX_-translate-x-10'
| '_PREFIX_-translate-x-12'
| '_PREFIX_-translate-x-16'
| '_PREFIX_-translate-x-20'
| '_PREFIX_-translate-x-24'
| '_PREFIX_-translate-x-32'
| '_PREFIX_-translate-x-40'
| '_PREFIX_-translate-x-48'
| '_PREFIX_-translate-x-56'
| '_PREFIX_-translate-x-64'
| '_PREFIX_-translate-x-px'
| '_PREFIX_-translate-x-full'
| '_PREFIX_-translate-x-1/2'
| '_PREFIX_translate-x-1/2'
| '_PREFIX_translate-x-full'
| '_PREFIX_translate-y-0'
| '_PREFIX_translate-y-1'
| '_PREFIX_translate-y-2'
| '_PREFIX_translate-y-3'
| '_PREFIX_translate-y-4'
| '_PREFIX_translate-y-5'
| '_PREFIX_translate-y-6'
| '_PREFIX_translate-y-8'
| '_PREFIX_translate-y-10'
| '_PREFIX_translate-y-12'
| '_PREFIX_translate-y-16'
| '_PREFIX_translate-y-20'
| '_PREFIX_translate-y-24'
| '_PREFIX_translate-y-32'
| '_PREFIX_translate-y-40'
| '_PREFIX_translate-y-48'
| '_PREFIX_translate-y-56'
| '_PREFIX_translate-y-64'
| '_PREFIX_translate-y-px'
| '_PREFIX_-translate-y-1'
| '_PREFIX_-translate-y-2'
| '_PREFIX_-translate-y-3'
| '_PREFIX_-translate-y-4'
| '_PREFIX_-translate-y-5'
| '_PREFIX_-translate-y-6'
| '_PREFIX_-translate-y-8'
| '_PREFIX_-translate-y-10'
| '_PREFIX_-translate-y-12'
| '_PREFIX_-translate-y-16'
| '_PREFIX_-translate-y-20'
| '_PREFIX_-translate-y-24'
| '_PREFIX_-translate-y-32'
| '_PREFIX_-translate-y-40'
| '_PREFIX_-translate-y-48'
| '_PREFIX_-translate-y-56'
| '_PREFIX_-translate-y-64'
| '_PREFIX_-translate-y-px'
| '_PREFIX_-translate-y-full'
| '_PREFIX_-translate-y-1/2'
| '_PREFIX_translate-y-1/2'
| '_PREFIX_translate-y-full';
export type TSkew =
| '_PREFIX_skew-x-0'
| '_PREFIX_skew-x-3'
| '_PREFIX_skew-x-6'
| '_PREFIX_skew-x-12'
| '_PREFIX_-skew-x-0'
| '_PREFIX_-skew-x-3'
| '_PREFIX_-skew-x-6'
| '_PREFIX_-skew-x-12'
| '_PREFIX_skew-y-0'
| '_PREFIX_skew-y-3'
| '_PREFIX_skew-y-6'
| '_PREFIX_skew-y-12'
| '_PREFIX_-skew-y-0'
| '_PREFIX_-skew-y-3'
| '_PREFIX_-skew-y-6'
| '_PREFIX_-skew-y-12';
export type TTransformOrigin =
| '_PREFIX_origin-center'
| '_PREFIX_origin-top'
| '_PREFIX_origin-top-right'
| '_PREFIX_origin-right'
| '_PREFIX_origin-bottom-right'
| '_PREFIX_origin-bottom'
| '_PREFIX_origin-bottom-left'
| '_PREFIX_origin-left'
| '_PREFIX_origin-top-left';
export type TTransforms = '_PREFIX_transform' | TScale | TRotate | TTranslate | TSkew | TTransformOrigin;
___TRANSFORMS___
export type TAppearance = '_PREFIX_appearance-none';
Expand Down

0 comments on commit 599a2e3

Please sign in to comment.