pico-to-tailwind.ts

import picoPath from "@picocss/pico/css/pico.amber.css";
import tailwindPath from './tailwind.css';
import { transform } from "lightningcss";

/**
 * Pico CSS variables to equivalent Tailwind ones
 * https://picocss.com/docs/css-variables#all-css-variables
 * Only redefine ones that are set to magic values initially since others just use those and we want to simplify
 */
const picoToTheme = {
	"pico-background-color": "color-bg",
	"pico-color": "color-text",
	"pico-border-color": "color-border",
	"pico-underline": "color-underline",

	"pico-text-selection-color": "color-text-selected",
	"pico-muted-color": "color-text-muted",
	"pico-muted-border-color": "color-border-muted",

	// TODO Test if values have to be unique

	// "pico-primary": "color-text",
	// "pico-primary-background": "color-bg",
	// "pico-primary-border": "color-border",
	// "pico-primary-underline": "color-underline",
	// "pico-primary-hover": "color-hover",
	// "pico-primary-hover-background": "color-bg-hover",
	// "pico-primary-hover-border": "color-border-hover",
	// "pico-primary-hover-underline": "color-underline-hover",
	// "pico-primary-focus": "color-focus",
	// "pico-primary-inverse": "color-inverse",

	// "pico-secondary": "color-text",
	// "pico-secondary-background": "color-bg",
	// "pico-secondary-border": "color-border",
	// "pico-secondary-underline": "color-underline",
	// "pico-secondary-hover": "color-hover",
	// "pico-secondary-hover-background": "color-bg-hover",
	// "pico-secondary-hover-border": "color-border-hover",
	// "pico-secondary-hover-underline": "color-underline-hover",
	// "pico-secondary-focus": "color-focus",
	// "pico-secondary-inverse": "color-inverse",

	// "pico-contrast": "",
	// "pico-contrast-background": "",
	// "pico-contrast-border": "",
	// "pico-contrast-underline": "",
	// "pico-contrast-hover": "",
	// "pico-contrast-hover-background": "",
	// "pico-contrast-hover-border": "",
	// "pico-contrast-hover-underline": "",
	// "pico-contrast-focus": "",
	// "pico-contrast-inverse": "",

	// "pico-box-shadow": "shadow",
	// "pico-h1-color": "color-text",
	// "pico-h2-color": "color-text",
	// "pico-h3-color": "color-text",
	// "pico-h4-color": "color-text",
	// "pico-h5-color": "color-text",
	// "pico-h6-color": "color-text",
	// "pico-mark-background-color": "color-bg",
	// "pico-mark-color": "color-text",
	// "pico-ins-color": "color-text",
	// "pico-del-color": "color-text",
	// "pico-blockquote-border-color": "color-border",
	// "pico-blockquote-footer-color": "color-text",
	// "pico-button-box-shadow": "shadow",
	// "pico-button-hover-box-shadow": "shadow",
	// "pico-table-border-color": "color-border",
	// "pico-table-row-stripped-background-color": "color-bg",
	// "pico-code-background-color": "color-bg",
	// "pico-code-color": "color-text",
	// "pico-code-kbd-background-color": "color-bg",
	// "pico-code-kbd-color": "color-text",

	// "pico-form-element-background-color": "color-bg",
	// "pico-form-element-selected-background-color": "color-bg",
	// "pico-form-element-border-color": "color-border",
	// "pico-form-element-color": "color-text",
	// "pico-form-element-placeholder-color": "color-text",
	// "pico-form-element-active-background-color": "color-bg",
	// "pico-form-element-active-border-color": "color-border",
	// "pico-form-element-focus-color": "color-text",
	// "pico-form-element-disabled-opacity": "color-text",
	// "pico-form-element-invalid-border-color": "color-text",
	// "pico-form-element-invalid-active-border-color": "color-text",
	// "pico-form-element-invalid-focus-color": "color-text",
	// "pico-form-element-valid-border-color": "color-text",
	// "pico-form-element-valid-active-border-color": "color-text",
	// "pico-form-element-valid-focus-color": "color-text",
	// "pico-switch-background-color": "color-bg",
	// "pico-switch-checked-background-color": "color-text",
	// "pico-switch-color": "color-text",
	// "pico-switch-thumb-box-shadow": "shadow",
	// "pico-range-border-color": "color-border",
	// "pico-range-active-border-color": "color-border",
	// "pico-range-thumb-border-color": "color-border",
	// "pico-range-thumb-color": "color-text",
	// "pico-range-thumb-active-color": "color-text",
	// "pico-accordion-border-color": "color-border",
	// "pico-accordion-active-summary-color": "color-text",
	// "pico-accordion-close-summary-color": "color-text",
	// "pico-accordion-open-summary-color": "color-text",
	// "pico-card-background-color": "color-bg",
	// "pico-card-border-color": "color-border",
	// "pico-card-box-shadow": "shadow",
	// "pico-card-sectioning-background-color": "color-text",
	// "pico-dropdown-background-color": "color-bg",
	// "pico-dropdown-border-color": "color-border",
	// "pico-dropdown-box-shadow": "shadow",
	// "pico-dropdown-color": "color-text",
	// "pico-dropdown-hover-background-color": "color-text",
	// "pico-loading-spinner-opacity": "color-text",
	// "pico-modal-overlay-background-color": "color-bg",
	// "pico-progress-background-color": "color-bg",
	// "pico-progress-color": "color-text",
	// "pico-tooltip-background-color": "color-bg",
	// "pico-tooltip-color": "color-text",
	//   'pico-icon-valid': '',
	//   'pico-icon-invalid': ''
};

const picoFile = Bun.file(picoPath);
const picoStyles = await picoFile.text();

// First transform pico styles
const res = transform({
	// TODO Figure out why
	filename: "test.css",
	minify: false,
	errorRecovery: true,
	code: Buffer.from(picoStyles),
	visitor: {
		DashedIdent(ident) {
			const undashedIdent = ident.replace("--", "") as keyof typeof picoToTheme;
			return `--${picoToTheme[undashedIdent] ?? undashedIdent}`;
			// TODO Remove line if not defined instead of fallback
		},
	},
});

// Then append pico styles to tailwind styles and tranform again to append tailwindTheme to @theme block

const tranformedPicoStyles = res.code.toString();

const tailwindVars = new Set(Object.values(picoToTheme));

const tailwindTheme = Array.from(tailwindVars).map(
	(twVar) => `--${twVar}: currentColor;`,
);

const styles = `


@theme {
${tailwindTheme.join("\n")}
}

${tranformedPicoStyles}
`;

await Bun.write("./app/test.css", styles);