From 526e4078a7a0e404f345072cd849af9761eccc4b Mon Sep 17 00:00:00 2001 From: Jermeiah S Date: Wed, 14 Aug 2024 20:21:13 -0400 Subject: [PATCH] rework testing now has cleaner logs assertions so far are valid removed json files in favor of js --- src/index.js | 9 ++++----- src/themes/{fonts.json => fonts.js} | 6 +++--- src/themes/shadows.js | 7 +++++++ src/themes/shadows.json | 7 ------- tests/index.vitest.js | 12 ++++-------- tests/snapshots/fontsize.css | 2 +- 6 files changed, 19 insertions(+), 24 deletions(-) rename src/themes/{fonts.json => fonts.js} (95%) create mode 100644 src/themes/shadows.js delete mode 100644 src/themes/shadows.json diff --git a/src/index.js b/src/index.js index 89b86e6..6ecfce6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ /** @type {import('tailwindcss').Config} */ import plugin from "tailwindcss/plugin"; import { materialColors, createSpacing } from "./lib"; -const boxShadows = require("./themes/shadows.json"); -const fontSize = require("./themes/fonts.json"); +import { boxShadow } from "./themes/shadows"; +import { fontSize } from "./themes/fonts"; const pluginOptions = { prefix: "lk", baseColors: { primary: "", info: "", warning: "", error: "" }, @@ -55,9 +55,8 @@ module.exports = plugin.withOptions( }, (options = pluginOptions) => { return { - theme: { - boxShadow: boxShadows, + boxShadow: boxShadow, aspectRatio: { "16-9": "16 / 9", "4-3": "4 / 3", @@ -65,7 +64,7 @@ module.exports = plugin.withOptions( "9-16": "9 / 16", "1-1": "1 / 1", }, - fontSize: fontSize, + fontSize: fontSize(createSpacing(options)), extend: { padding: { mid: "100px", diff --git a/src/themes/fonts.json b/src/themes/fonts.js similarity index 95% rename from src/themes/fonts.json rename to src/themes/fonts.js index a76141b..988f5cf 100644 --- a/src/themes/fonts.json +++ b/src/themes/fonts.js @@ -1,6 +1,6 @@ -{ +export const fontSize = (scaling) => ({ "display-1": [ - "4.235em", + `${scaling["lk-xl"]}em`, { "lineHeight": "1.129", "letterSpacing": "-0.022em", @@ -95,4 +95,4 @@ "fontWeight": "400" } ] -} +}); diff --git a/src/themes/shadows.js b/src/themes/shadows.js new file mode 100644 index 0000000..faf3174 --- /dev/null +++ b/src/themes/shadows.js @@ -0,0 +1,7 @@ +export const boxShadow = () => ({ + sm: "0 0 1px 0 rgb(0, 0, 0);", + md: "0 4px 6px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .1), 0 0 1px rgb(0,0,0);", + lg: "0 11px 15px -3px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .2), 0 0 1px rgb(0,0,0);", + xl: "0 20px 25px rgba(0, 0, 0, .2), 0 5px 11px rgba(0, 0, 0, .2), 0 0 1px rgb(0,0,0);", + "2xl": "0 25px 50px rgba(0, 0, 0, .35), 0 9px 18px rgba(0, 0, 0, .1), 0 0 1px rgb(0,0,0);" +}) diff --git a/src/themes/shadows.json b/src/themes/shadows.json deleted file mode 100644 index a860d3c..0000000 --- a/src/themes/shadows.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "sm": "0 0 1px 0 rgb(0, 0, 0);", - "md": "0 4px 6px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .1), 0 0 1px rgb(0,0,0);", - "lg": "0 11px 15px -3px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .2), 0 0 1px rgb(0,0,0);", - "xl": "0 20px 25px rgba(0, 0, 0, .2), 0 5px 11px rgba(0, 0, 0, .2), 0 0 1px rgb(0,0,0);", - "2xl": "0 25px 50px rgba(0, 0, 0, .35), 0 9px 18px rgba(0, 0, 0, .1), 0 0 1px rgb(0,0,0);" -} diff --git a/tests/index.vitest.js b/tests/index.vitest.js index 0effb8f..51d8531 100644 --- a/tests/index.vitest.js +++ b/tests/index.vitest.js @@ -1,12 +1,10 @@ const postcss = require("postcss"); import { test, expect, describe, it } from "vitest"; import tailwindcss from "tailwindcss"; -import cssnanoPlugin from "cssnano"; import liftkittailwindcss from "../src"; -function generatePluginCSS({ content }) { +async function generatePluginCSS({ content }) { return postcss([ - cssnanoPlugin(), tailwindcss({ plugins: [liftkittailwindcss], content: [{ raw: content }] }), ]) .process("@tailwind utilities; @tailwind components;", { from: undefined }) @@ -38,11 +36,9 @@ const testCases = { // Function to run tests for each attribute in the object of objects function mapAndTest(attrSet) { Object.entries(attrSet).forEach(([name, { content }]) => { - describe(`Tailwind CSS Plugin Test: ${name}`, () => { - it(`should generate the correct CSS for ${name}`, async () => { - const css = await generatePluginCSS({ content }); - expect(css).toMatchFileSnapshot(`./snapshots/${name}.css`); - }); + test(`Generate Tailwind CSS for ${name} with ${content}`, async () => { + const css = await generatePluginCSS({ content }); + expect(css).toMatchFileSnapshot(`./snapshots/${name}.css`); }); }); } diff --git a/tests/snapshots/fontsize.css b/tests/snapshots/fontsize.css index 8cebcd1..7b186ed 100644 --- a/tests/snapshots/fontsize.css +++ b/tests/snapshots/fontsize.css @@ -1 +1 @@ -.text-body{font-size:1em;font-weight:400;letter-spacing:-.011em;line-height:1.618}.text-callout{font-size:.943em;letter-spacing:-.009em}.text-callout,.text-caption{font-weight:400;line-height:1.272}.text-caption{font-size:.786em;letter-spacing:-.007em}.text-display-1{font-size:4.235em;line-height:1.129}.text-display-1,.text-display-2{font-weight:400;letter-spacing:-.022em}.text-display-2{font-size:2.618em;line-height:1.272}.text-heading{font-size:1.129em;font-weight:600;letter-spacing:-.014em;line-height:1.272}.text-heading-sub{font-size:.885em;font-weight:400;letter-spacing:-.007em;line-height:1.272}.text-label{font-size:.835em;font-weight:500;letter-spacing:-.004em;line-height:1.272}.text-overline{font-size:.786em;letter-spacing:.0618em}.text-overline,.text-title-3{font-weight:400;line-height:1.272}.text-title-3{font-size:1.272em;letter-spacing:-.017em} \ No newline at end of file +.text-body{font-size:1em;font-weight:400;letter-spacing:-.011em;line-height:1.618}.text-callout{font-size:.943em;letter-spacing:-.009em}.text-callout,.text-caption{font-weight:400;line-height:1.272}.text-caption{font-size:.786em;letter-spacing:-.007em}.text-display-1{font-size:2.61792emem;line-height:1.129}.text-display-1,.text-display-2{font-weight:400;letter-spacing:-.022em}.text-display-2{font-size:2.618em;line-height:1.272}.text-heading{font-size:1.129em;font-weight:600;letter-spacing:-.014em;line-height:1.272}.text-heading-sub{font-size:.885em;font-weight:400;letter-spacing:-.007em;line-height:1.272}.text-label{font-size:.835em;font-weight:500;letter-spacing:-.004em;line-height:1.272}.text-overline{font-size:.786em;letter-spacing:.0618em}.text-overline,.text-title-3{font-weight:400;line-height:1.272}.text-title-3{font-size:1.272em;letter-spacing:-.017em} \ No newline at end of file