Skip to content

Commit

Permalink
feat: add sort for @apply directive� #115 (#233)
Browse files Browse the repository at this point in the history 
feat(commands.ts): sort apply directives

test(sort.test.ts): test sorting apply directives

refactor(sort.test.ts): remove redundant code
  • Loading branch information
@IgnisDa
IgnisDa authored Aug 19, 2021
1 parent cd7a605 commit 16dcf6a
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 29 deletions.
5 changes: 4 additions & 1 deletion src/lib/commands.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,14 @@ export default class Commands {
const text = textEditor.document.getText();
const parser = new HTMLParser(text);

let toSort = [];
const classes = parser.parseClasses();
const applies = parser.parseApplies();
toSort = [...classes, ...applies];
const variants = Object.keys(this.processor?.resolveVariants() ?? {});
const variantsMap = Object.assign({}, ...variants.map((value, index) => ({ [value]: index + 1 })));

for (const p of classes) {
for (const p of toSort) {
const sortedP = sortClassNames(p.result, variantsMap);
const separators = getAllSeparators(p.result);
const toReplace = combineSeparators(separators, sortedP);
Expand Down
83 changes: 55 additions & 28 deletions test/sort.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { HTMLParser } from 'windicss/utils/parser';
import { sortClassNames, combineSeparators, getAllSeparators } from '../src/utils';
import { HTMLParser } from '../src/utils/parser';
import {
sortClassNames,
combineSeparators,
getAllSeparators,
} from '../src/utils';

it('sorts classes single line', () => {
const parser = new HTMLParser();
parser.html = `
<div class="p-4 text-transparent bg-transparent backdrop-blur" />
const text = `
<div class="bg-transparent text-transparent p-4 backdrop-blur" />
`;
const parser = new HTMLParser(text);
const p = parser.parseClasses()[0];
const expected = 'bg-transparent text-transparent p-4 backdrop-blur';
const sortedP = sortClassNames(p.result, {});
Expand All @@ -15,29 +19,30 @@ it('sorts classes single line', () => {
});

it('sorts classes single line but malformed', () => {
const parser = new HTMLParser();
parser.html = `
<div class=" p-4 text-transparent bg-transparent backdrop-blur" />
const text = `
<div class=" bg-transparent text-transparent p-4 backdrop-blur" />
`;
const parser = new HTMLParser(text);
const p = parser.parseClasses()[0];
const expected = ' bg-transparent text-transparent p-4 backdrop-blur';
const sortedP = sortClassNames(p.result, {});
const separators = getAllSeparators(p.result);
const toReplace = combineSeparators(separators, sortedP); expect(toReplace).toBe(expected);
const toReplace = combineSeparators(separators, sortedP);
expect(toReplace).toBe(expected);
});

it('sorts classes multi line', () => {
const parser = new HTMLParser();
parser.html = `
const text = `
<div
class="
p-4
text-transparent
bg-transparent
text-transparent
p-4
backdrop-blur
"
/>
`;
const parser = new HTMLParser(text);
const p = parser.parseClasses()[0];
const expected = `
bg-transparent
Expand All @@ -48,21 +53,22 @@ it('sorts classes multi line', () => {

const sortedP = sortClassNames(p.result, {});
const separators = getAllSeparators(p.result);
const toReplace = combineSeparators(separators, sortedP); expect(toReplace).toBe(expected);
const toReplace = combineSeparators(separators, sortedP);
expect(toReplace).toBe(expected);
});

it('sorts classes multi line but malformed', () => {
const parser = new HTMLParser();
parser.html = `
const text = `
<div
class="
p-4
bg-transparent
text-transparent
bg-transparent
p-4
backdrop-blur
"
/>
`;
const parser = new HTMLParser(text);
const p = parser.parseClasses()[0];
const expected = `
bg-transparent
Expand All @@ -73,33 +79,54 @@ backdrop-blur

const sortedP = sortClassNames(p.result, {});
const separators = getAllSeparators(p.result);
const toReplace = combineSeparators(separators, sortedP); expect(toReplace).toBe(expected);
const toReplace = combineSeparators(separators, sortedP);
expect(toReplace).toBe(expected);
});

it('sorts including custom classes', () => {
const parser = new HTMLParser();
parser.html = `
<a class="font-custom text-15px font-bold leading-20px custom-class">
const text = `
<a class="font-custom font-bold text-15px leading-20px custom-class">
Hello World
</a>
`;
const parser = new HTMLParser(text);
const p = parser.parseClasses()[0];
const expected = 'font-custom font-bold text-15px leading-20px custom-class';
const sortedP = sortClassNames(p.result, {});
const separators = getAllSeparators(p.result);
const toReplace = combineSeparators(separators, sortedP); expect(toReplace).toBe(expected);
const toReplace = combineSeparators(separators, sortedP);
expect(toReplace).toBe(expected);
});

it('sorts including custom classes but malformed', () => {
const parser = new HTMLParser();
parser.html = `
<a class=" font-custom text-15px font-bold leading-20px custom-class">
const text = `
<a class=" font-custom font-bold text-15px leading-20px custom-class">
Hello World
</a>
`;
const parser = new HTMLParser(text);
const p = parser.parseClasses()[0];
const expected = ' font-custom font-bold text-15px leading-20px custom-class';
const expected =
' font-custom font-bold text-15px leading-20px custom-class';
const sortedP = sortClassNames(p.result, {});
const separators = getAllSeparators(p.result);
const toReplace = combineSeparators(separators, sortedP);
expect(toReplace).toBe(expected);
});

it('sorts apply directives', () => {
const text = `
<style>
.some-class {
@apply p-4 text-transparent bg-transparent backdrop-blur;
}
</style>
`;
const parser = new HTMLParser(text);
const p = parser.parseApplies()[0];
const expected = 'bg-transparent text-transparent p-4 backdrop-blur';
const sortedP = sortClassNames(p.result, {});
const separators = getAllSeparators(p.result);
const toReplace = combineSeparators(separators, sortedP); expect(toReplace).toBe(expected);
const toReplace = combineSeparators(separators, sortedP);
expect(toReplace).toBe(expected);
});

0 comments on commit 16dcf6a

Please sign in to comment.