rework testing

now has cleaner logs
assertions so far are valid
removed json files in favor of js

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,17 +55,16 @@ module.exports = plugin.withOptions(
   },
   (options = pluginOptions) => {
     return {
-
       theme: {
-        boxShadow: boxShadows,
+        boxShadow: boxShadow,
         aspectRatio: {
           "16-9": "16 / 9",
           "4-3": "4 / 3",
           "3-2": "3 / 2",
           "9-16": "9 / 16",
           "1-1": "1 / 1",
         },
-        fontSize: fontSize,
+        fontSize: fontSize(createSpacing(options)),
         extend: {
           padding: {
             mid: "100px",

src/themes/fonts.json → 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"
     }
   ]
-}
+});

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);"
+})

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`);
     });
   });
 }