Skip to content

Commit

Permalink
add: .vscode/settings.json & format: files
Browse files Browse the repository at this point in the history
  • Loading branch information
@sudoaugustin
sudoaugustin committed Sep 25, 2024
1 parent 695eb9f commit f50f90c
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 133 deletions.
11 changes: 11 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports": "never",
"source.organizeImports.biome": "explicit"
},
"[json][jsonc][javascript][javascriptreact][typescript][typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"typescript.tsdk": "node_modules/typescript/lib"
}
141 changes: 38 additions & 103 deletions index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@ async function compile(content: string, config: Options = {}) {
plugins: [tailwindcssPlugin(config)],
};

const result = await postcss([
tailwindcss(tailwindConfig),
cssNano(),
]).process("@tailwind utilities;", { from: undefined });
const result = await postcss([tailwindcss(tailwindConfig), cssNano()]).process("@tailwind utilities;", {
from: undefined,
});
return result.css;
}

Expand All @@ -26,20 +25,12 @@ test("Test 'a-' utility", async () => {
// Check with built-in value
expect(await compile("a-5")).toBe(".a-5{height:1.25rem;width:1.25rem}");
expect(await compile("a-5x10")).toBe(".a-5x10{height:2.5rem;width:1.25rem}");
expect(await compile("a-5xmax")).toBe(
".a-5xmax{height:max-content;width:1.25rem}"
);
expect(await compile("a-5xmax")).toBe(".a-5xmax{height:max-content;width:1.25rem}");

// Check with arbitary value
expect(await compile("a-[100%]")).toBe(
".a-\\[100\\%\\]{height:100%;width:100%}"
);
expect(await compile("a-[5remx10rem]")).toBe(
".a-\\[5remx10rem\\]{height:10rem;width:5rem}"
);
expect(await compile("a-[5remxmax-content]")).toBe(
".a-\\[5remxmax-content\\]{height:max-content;width:5rem}"
);
expect(await compile("a-[100%]")).toBe(".a-\\[100\\%\\]{height:100%;width:100%}");
expect(await compile("a-[5remx10rem]")).toBe(".a-\\[5remx10rem\\]{height:10rem;width:5rem}");
expect(await compile("a-[5remxmax-content]")).toBe(".a-\\[5remxmax-content\\]{height:max-content;width:5rem}");
});

test("Test 'p-' utility", async () => {
Expand Down Expand Up @@ -70,123 +61,67 @@ test("Test 'gap-' utility", async () => {
});

test("Test 'flex-' utility", async () => {
expect(await compile("flex-start")).toBe(
".flex-start{align-items:flex-start;justify-content:flex-start}"
);
expect(await compile("flex-end")).toBe(
".flex-end{align-items:flex-end;justify-content:flex-end}"
);
expect(await compile("flex-center")).toBe(
".flex-center{align-items:center;justify-content:center}"
);
expect(await compile("flex-stretch")).toBe(
".flex-stretch{align-items:stretch;justify-content:stretch}"
);
expect(await compile("flex-start")).toBe(".flex-start{align-items:flex-start;justify-content:flex-start}");
expect(await compile("flex-end")).toBe(".flex-end{align-items:flex-end;justify-content:flex-end}");
expect(await compile("flex-center")).toBe(".flex-center{align-items:center;justify-content:center}");
expect(await compile("flex-stretch")).toBe(".flex-stretch{align-items:stretch;justify-content:stretch}");
});

test("Test nth-child variant", async () => {
const options: Options = { nths: [11] };

expect(await compile("1st:w-10")).toBe(
".\\31st\\:w-10:first-child{width:2.5rem}"
);
expect(await compile("2nd:w-10")).toBe(
".\\32nd\\:w-10:nth-child(2){width:2.5rem}"
);
expect(await compile("11th:w-10", options)).toBe(
".\\31 1th\\:w-10:nth-child(11){width:2.5rem}"
);
expect(await compile("1st:w-10")).toBe(".\\31st\\:w-10:first-child{width:2.5rem}");
expect(await compile("2nd:w-10")).toBe(".\\32nd\\:w-10:nth-child(2){width:2.5rem}");
expect(await compile("11th:w-10", options)).toBe(".\\31 1th\\:w-10:nth-child(11){width:2.5rem}");

// Group variants
expect(await compile("group-1st:w-10")).toBe(
".group:first-child .group-1st\\:w-10{width:2.5rem}"
);
expect(await compile("group-2nd:w-10")).toBe(
".group:nth-child(2) .group-2nd\\:w-10{width:2.5rem}"
);
expect(await compile("group-11th:w-10", options)).toBe(
".group:nth-child(11) .group-11th\\:w-10{width:2.5rem}"
);
expect(await compile("group-1st:w-10")).toBe(".group:first-child .group-1st\\:w-10{width:2.5rem}");
expect(await compile("group-2nd:w-10")).toBe(".group:nth-child(2) .group-2nd\\:w-10{width:2.5rem}");
expect(await compile("group-11th:w-10", options)).toBe(".group:nth-child(11) .group-11th\\:w-10{width:2.5rem}");

// Peer variants
expect(await compile("peer-1st:w-10")).toBe(
".peer:first-child~.peer-1st\\:w-10{width:2.5rem}"
);
expect(await compile("peer-2nd:w-10")).toBe(
".peer:nth-child(2)~.peer-2nd\\:w-10{width:2.5rem}"
);
expect(await compile("peer-11th:w-10", options)).toBe(
".peer:nth-child(11)~.peer-11th\\:w-10{width:2.5rem}"
);
expect(await compile("peer-1st:w-10")).toBe(".peer:first-child~.peer-1st\\:w-10{width:2.5rem}");
expect(await compile("peer-2nd:w-10")).toBe(".peer:nth-child(2)~.peer-2nd\\:w-10{width:2.5rem}");
expect(await compile("peer-11th:w-10", options)).toBe(".peer:nth-child(11)~.peer-11th\\:w-10{width:2.5rem}");
});

test("Test nth-of-type variant", async () => {
const options: Options = { nths: [11] };
expect(await compile("1st-of:w-10")).toBe(
".\\31st-of\\:w-10:first-of-type{width:2.5rem}"
);
expect(await compile("2nd-of:w-10")).toBe(
".\\32nd-of\\:w-10:nth-of-type(2){width:2.5rem}"
);
expect(await compile("11th-of:w-10", options)).toBe(
".\\31 1th-of\\:w-10:nth-of-type(11){width:2.5rem}"
);
expect(await compile("1st-of:w-10")).toBe(".\\31st-of\\:w-10:first-of-type{width:2.5rem}");
expect(await compile("2nd-of:w-10")).toBe(".\\32nd-of\\:w-10:nth-of-type(2){width:2.5rem}");
expect(await compile("11th-of:w-10", options)).toBe(".\\31 1th-of\\:w-10:nth-of-type(11){width:2.5rem}");

// Group variants
expect(await compile("group-1st-of:w-10")).toBe(
".group:first-of-type .group-1st-of\\:w-10{width:2.5rem}"
);
expect(await compile("group-2nd-of:w-10")).toBe(
".group:nth-of-type(2) .group-2nd-of\\:w-10{width:2.5rem}"
);
expect(await compile("group-1st-of:w-10")).toBe(".group:first-of-type .group-1st-of\\:w-10{width:2.5rem}");
expect(await compile("group-2nd-of:w-10")).toBe(".group:nth-of-type(2) .group-2nd-of\\:w-10{width:2.5rem}");
expect(await compile("group-11th-of:w-10", options)).toBe(
".group:nth-of-type(11) .group-11th-of\\:w-10{width:2.5rem}"
".group:nth-of-type(11) .group-11th-of\\:w-10{width:2.5rem}",
);

// Peer variants
expect(await compile("peer-1st-of:w-10")).toBe(
".peer:first-of-type~.peer-1st-of\\:w-10{width:2.5rem}"
);
expect(await compile("peer-2nd-of:w-10")).toBe(
".peer:nth-of-type(2)~.peer-2nd-of\\:w-10{width:2.5rem}"
);
expect(await compile("peer-11th-of:w-10", options)).toBe(
".peer:nth-of-type(11)~.peer-11th-of\\:w-10{width:2.5rem}"
);
expect(await compile("peer-1st-of:w-10")).toBe(".peer:first-of-type~.peer-1st-of\\:w-10{width:2.5rem}");
expect(await compile("peer-2nd-of:w-10")).toBe(".peer:nth-of-type(2)~.peer-2nd-of\\:w-10{width:2.5rem}");
expect(await compile("peer-11th-of:w-10", options)).toBe(".peer:nth-of-type(11)~.peer-11th-of\\:w-10{width:2.5rem}");
});

test("Test data-state variant", async () => {
const options = { states: ["pending"] };

expect(await compile("state-on:w-10")).toBe(
".state-on\\:w-10[data-state=on]{width:2.5rem}"
);
expect(await compile("state-off:w-10")).toBe(
".state-off\\:w-10[data-state=off]{width:2.5rem}"
);
expect(await compile("state-pending:w-10", options)).toBe(
".state-pending\\:w-10[data-state=pending]{width:2.5rem}"
);
expect(await compile("state-on:w-10")).toBe(".state-on\\:w-10[data-state=on]{width:2.5rem}");
expect(await compile("state-off:w-10")).toBe(".state-off\\:w-10[data-state=off]{width:2.5rem}");
expect(await compile("state-pending:w-10", options)).toBe(".state-pending\\:w-10[data-state=pending]{width:2.5rem}");

// Group variants
expect(await compile("group-state-on:w-10")).toBe(
".group[data-state=on] .group-state-on\\:w-10{width:2.5rem}"
);
expect(await compile("group-state-off:w-10")).toBe(
".group[data-state=off] .group-state-off\\:w-10{width:2.5rem}"
);
expect(await compile("group-state-on:w-10")).toBe(".group[data-state=on] .group-state-on\\:w-10{width:2.5rem}");
expect(await compile("group-state-off:w-10")).toBe(".group[data-state=off] .group-state-off\\:w-10{width:2.5rem}");
expect(await compile("group-state-pending:w-10", options)).toBe(
".group[data-state=pending] .group-state-pending\\:w-10{width:2.5rem}"
".group[data-state=pending] .group-state-pending\\:w-10{width:2.5rem}",
);

// Peer variants
expect(await compile("peer-state-on:w-10")).toBe(
".peer[data-state=on]~.peer-state-on\\:w-10{width:2.5rem}"
);
expect(await compile("peer-state-off:w-10")).toBe(
".peer[data-state=off]~.peer-state-off\\:w-10{width:2.5rem}"
);
expect(await compile("peer-state-on:w-10")).toBe(".peer[data-state=on]~.peer-state-on\\:w-10{width:2.5rem}");
expect(await compile("peer-state-off:w-10")).toBe(".peer[data-state=off]~.peer-state-off\\:w-10{width:2.5rem}");
expect(await compile("peer-state-pending:w-10", options)).toBe(
".peer[data-state=pending]~.peer-state-pending\\:w-10{width:2.5rem}"
".peer[data-state=pending]~.peer-state-pending\\:w-10{width:2.5rem}",
);
});
33 changes: 9 additions & 24 deletions index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function arrToObj(values: string[], filters: string[] = []) {
(total, index) =>
// To fix tailwind generating duplicate classes. If removed, tailwind will generate .z-10,-20,-30... twice.
filters.includes(`${index}`) ? total : { ...total, [index]: index },
{}
{},
);
}

Expand All @@ -40,15 +40,10 @@ function parseVal(values: string | string[], separator: string) {
["fit-", "fit@"],
["max-", "ma@@"],
];
const $value = tags.reduce(
(str, [key, val]) => str.replaceAll(key, val),
values
);
const $value = tags.reduce((str, [key, val]) => str.replaceAll(key, val), values);
const [x, y = x] = $value
.split(separator)
.map((str) =>
tags.reduce((str, [key, val]) => str.replaceAll(val, key), str)
);
.map((str) => tags.reduce((str, [key, val]) => str.replaceAll(val, key), str));
return [x, y];
}
return values;
Expand Down Expand Up @@ -97,7 +92,7 @@ export default function tailwindcssPlugin({
return { width, height };
},
},
{ values: pairVals(theme("width"), theme("height"), separator) }
{ values: pairVals(theme("width"), theme("height"), separator) },
);

// Space utils
Expand All @@ -113,7 +108,7 @@ export default function tailwindcssPlugin({
return { [prop]: `${y} ${x}` };
},
},
{ values: pairVals(values, values, separator, true) }
{ values: pairVals(values, values, separator, true) },
);
});

Expand All @@ -140,24 +135,14 @@ export default function tailwindcssPlugin({
values,
});

matchVariant(
`group-${name}`,
(value) => `:merge(.group)[data-${name}="${value}"] &`,
{ values }
);
matchVariant(`group-${name}`, (value) => `:merge(.group)[data-${name}="${value}"] &`, { values });

matchVariant(
`peer-${name}`,
(value) => `:merge(.peer)[data-${name}="${value}"] ~ &`,
{ values }
);
matchVariant(`peer-${name}`, (value) => `:merge(.peer)[data-${name}="${value}"] ~ &`, { values });
});

// Child variants
nths.forEach((child) => {
const order = `${child}${
child === 1 ? "st" : child === 2 ? "nd" : child === 3 ? "rd" : "th"
}`;
const order = `${child}${child === 1 ? "st" : child === 2 ? "nd" : child === 3 ? "rd" : "th"}`;

[
{ variant: order, pseudo: "nth-child" },
Expand All @@ -170,6 +155,6 @@ export default function tailwindcssPlugin({
});
});
},
{ theme: { zIndex: arrToObj(zIndexes) } }
{ theme: { zIndex: arrToObj(zIndexes) } },
);
}
7 changes: 1 addition & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@
"version": "1.0.1",
"description": "Useful tailwindcss shorthand classes and variants to boost productivity",
"main": "dist/index.js",
"keywords": [
"tailwindcss",
"plugin",
"shorthand",
"productivity"
],
"keywords": ["tailwindcss", "plugin", "shorthand", "productivity"],
"author": "sudoaugustin",
"license": "ISC",
"scripts": {
Expand Down

0 comments on commit f50f90c

Please sign in to comment.