Skip to content

Commit

Permalink
fix: add all dark mode variants to formatter
Browse files Browse the repository at this point in the history
  • Loading branch information
Mirko Nowak committed Nov 11, 2023
1 parent ac2f1f9 commit fd5e569
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 44 deletions.
54 changes: 13 additions & 41 deletions src/app/core/services/formatter.service.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,13 @@ describe('Service: Formatter', () => {
});

describe('toggleDarkModeVariants()', () => {
it('should add dark variant to bg color', inject(
[FormatterService],
(service: FormatterService) => {
const str = '<span class="bg-black"></span>';
const result = '<span class="dark:bg-black"></span>';
expect(service.toggleDarkModeVariants(str, true)).toBe(result);
}
));

it('should add dark variant to border color', inject(
[FormatterService],
(service: FormatterService) => {
const str = '<span class="border-red-500"></span>';
const result = '<span class="dark:border-red-500"></span>';
expect(service.toggleDarkModeVariants(str, true)).toBe(result);
}
));
it('should add dark variants', inject([FormatterService], (service: FormatterService) => {
const str =
'<span class="text-white border-white ring-white ring-offset-white accent-white divide-white bg-white from-white via-white to-white outline-white decoration-white shadow-white caret-white fill-white stroke-white"></span>';
const result =
'<span class="dark:text-white dark:border-white dark:ring-white dark:ring-offset-white dark:accent-white dark:divide-white dark:bg-white dark:from-white dark:via-white dark:to-white dark:outline-white dark:decoration-white dark:shadow-white dark:caret-white dark:fill-white dark:stroke-white"></span>';
expect(service.toggleDarkModeVariants(str, true)).toBe(result);
}));

it('should not add dark variant to border width', inject(
[FormatterService],
Expand All @@ -95,20 +85,20 @@ describe('Service: Formatter', () => {
}
));

it('should not add dark variant to border opacity', inject(
it('should not add dark variant to svg fill or fill-rule', inject(
[FormatterService],
(service: FormatterService) => {
const str = '<span class="border-opacity-50"></span>';
const result = '<span class="border-opacity-50"></span>';
const str = '<svg><path fill="#fff" fill-rule="evenodd"></path></svg>';
const result = '<svg><path fill="#fff" fill-rule="evenodd"></path></svg>';
expect(service.toggleDarkModeVariants(str, true)).toBe(result);
}
));

it('should add dark variant to placeholder color', inject(
it('should not add dark variant to border opacity', inject(
[FormatterService],
(service: FormatterService) => {
const str = '<span class="placeholder-gray-300"></span>';
const result = '<span class="dark:placeholder-gray-300"></span>';
const str = '<span class="border-opacity-50"></span>';
const result = '<span class="border-opacity-50"></span>';
expect(service.toggleDarkModeVariants(str, true)).toBe(result);
}
));
Expand All @@ -122,15 +112,6 @@ describe('Service: Formatter', () => {
}
));

it('should add dark variant to text color', inject(
[FormatterService],
(service: FormatterService) => {
const str = '<span class="text-white"></span>';
const result = '<span class="dark:text-white"></span>';
expect(service.toggleDarkModeVariants(str, true)).toBe(result);
}
));

it('should not add dark variant to text size', inject(
[FormatterService],
(service: FormatterService) => {
Expand All @@ -140,15 +121,6 @@ describe('Service: Formatter', () => {
}
));

it('should add dark variant to gradient colors', inject(
[FormatterService],
(service: FormatterService) => {
const str = '<span class="from-gray-100 via-gray-500 to-gray-900"></span>';
const result =
'<span class="dark:from-gray-100 dark:via-gray-500 dark:to-gray-900"></span>';
expect(service.toggleDarkModeVariants(str, true)).toBe(result);
}
));
it('should remove dark variant when not in dark mode', inject(
[FormatterService],
(service: FormatterService) => {
Expand Down
6 changes: 3 additions & 3 deletions src/app/core/services/formatter.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class FormatterService {

formatNode(node: any, level: number): any {
const indentBefore = level > 0 ? '\t'.repeat(level) : '';
const indentAfter = indentBefore.substr(1);
const indentAfter = indentBefore.substring(1);
let textNode;

for (let i = 0; i < node.children.length; i++) {
Expand Down Expand Up @@ -89,14 +89,14 @@ export class FormatterService {
toggleDarkModeVariants(codeStr: string, darkTheme: boolean): string {
return darkTheme
? codeStr.replace(
/(bg|border|placeholder|text|from|via|to)-(?!opacity)(black|white|transparent|\w+-\d{2,3})/gm,
/(bg|border|placeholder|text|from|via|to|ring|ring-offset|accent|divide|outline|decoration|shadow|caret|fill|stroke)-(?!opacity)(black|white|transparent|\w+-\d{2,3})/gm,
'dark:$1-$2'
)
: codeStr.replace(/dark:/gm, '');
}

replaceColor(codeStr: string, oldColor: string, newColor: string): string {
const colorsWithOnlyOneShade: string[] = ['black', 'white', 'transparent'];
const colorsWithOnlyOneShade: string[] = ['black', 'white', 'transparent', 'current'];

oldColor = colorsWithOnlyOneShade.includes(oldColor)
? '-' + oldColor
Expand Down

1 comment on commit fd5e569

@vercel
Copy link

@vercel vercel bot commented on fd5e569 Nov 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mamba-ui – ./

mamba-ui-microwawe.vercel.app
mamba-ui-git-master-microwawe.vercel.app

Please sign in to comment.