skeletonlabs · AdrianGonz97 · Aug 11, 2023 · Aug 11, 2023 · Aug 11, 2023 · Aug 11, 2023
diff --git a/.changeset/flat-insects-film.md b/.changeset/flat-insects-film.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": patch
+---
+
+fix: Plugin's base styles are no longer wrongfully removed
diff --git a/packages/plugin/scripts/compile-css-to-js.ts b/packages/plugin/scripts/compile-css-to-js.ts
@@ -45,19 +45,3 @@ export async function transpileCssToJs(cssEntryPath: string, plugins: Config['pl
 
 	return cssInJs;
 }
-
-// Generates all TW base styles so that we can use this to
-// the remove duplicates in our plugin.
-// Takes ~600ms second to run.
-export async function generateBaseTWStyles() {
-	const twConfig = {
-		content: [{ raw: 'w-1' }]
-	} satisfies Config;
-
-	const result = await postcss(tailwindcss(twConfig)).process('@tailwind base', { from: undefined });
-	if (result.root.type === 'document') throw Error('This should never happen');
-
-	const cssInJs = postcssJs.objectify(result.root);
-
-	return cssInJs;
-}
diff --git a/packages/plugin/scripts/generate-jss.ts b/packages/plugin/scripts/generate-jss.ts
@@ -1,5 +1,5 @@
 import type { CssInJs } from 'postcss-js';
-import { generateBaseTWStyles, transpileCssToJs } from './compile-css-to-js.js';
+import { transpileCssToJs } from './compile-css-to-js.js';
 import { mkdir, writeFile } from 'fs/promises';
 import plugin from 'tailwindcss/plugin.js';
 
@@ -12,17 +12,13 @@ async function exec() {
 		// directory already exists
 	});
 
-	const baseTWStyles = await generateBaseTWStyles();
-
 	const generatedComponentJSS = await transpileCssToJs('./src/styles/components.css');
-	const cleanedComponentClasses = removeDuplicateClasses(generatedComponentJSS, baseTWStyles);
-	const componentClasses = patchMediaQueries(cleanedComponentClasses);
+	const componentClasses = patchMediaQueries(generatedComponentJSS);
 
 	const componentPlugin = plugin(({ addComponents }) => {
 		addComponents(componentClasses);
 	});
-	const generatedBaseJSS = await transpileCssToJs('./src/styles/base.css', [componentPlugin]);
-	const baseStyles = removeDuplicateClasses(generatedBaseJSS, baseTWStyles);
+	const baseStyles = await transpileCssToJs('./src/styles/base.css', [componentPlugin]);
 
 	// Creates the generated CSS-in-JS file
 	await writeFile(
@@ -31,16 +27,6 @@ async function exec() {
 	).catch((e) => console.error(e));
 }
 
-// Purges the generated CSS-in-JS file of duplicate TW classes
-function removeDuplicateClasses(cssInJs: CssInJs, baseTWStyles: CssInJs) {
-	// We'll delete all the TW Base styles (i.e. html {...} body {...} etc.)
-	for (const key of Object.keys(cssInJs)) {
-		if (baseTWStyles[key] !== undefined) delete cssInJs[key];
-	}
-
-	return cssInJs;
-}
-
 // Moves all of the media queries towards the end of the cssInJs object.
 function patchMediaQueries(cssInJs: CssInJs) {
 	const mediaQueries: CssInJs = {};

diff --git a/packages/plugin/src/index.ts b/packages/plugin/src/index.ts
@@ -16,7 +16,7 @@ const skeleton = plugin.withOptions<ConfigOptions>(
 
 			// Base styles configuration
 			if (options?.base !== false) {
-				baseStyles = { ...base };
+				addBase(base);
 			}
 
 			// Custom Themes configuration

diff --git a/packages/plugin/src/styles/base/core.css b/packages/plugin/src/styles/base/core.css
@@ -1,56 +1,54 @@
 /* Stylesheet: core.css */
 
-@layer base {
-	/* === Body Styles === */
-
-	body {
-		@apply bg-surface-50-900-token;
-		/* Typography */
-		@apply text-base font-token text-token;
-	}
-
-	/* === Selection === */
-
-	::selection {
-		@apply bg-primary-500/30;
-	}
-
-	/* === Focus === */
-
-	/* Outline (do not change) */
-	/* http://www.outlinenone.com/ */
-
-	/* Mobile tap highlight */
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
-	html {
-		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
-	}
-
-	/* === Scrollbars === */
-
-	::-webkit-scrollbar {
-		@apply w-2;
-		@apply h-2;
-	}
-	::-webkit-scrollbar-track {
-		@apply !bg-surface-50-900-token px-[1px];
-	}
-	::-webkit-scrollbar-thumb {
-		@apply rounded-token bg-surface-400-500-token;
-	}
-
-	/* Firefox */
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
-	html {
-		scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.05);
-	}
-	html.dark {
-		scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.05);
-	}
-
-	/* === Horizontal Rules === */
-
-	hr:not(.divider) {
-		@apply block border-t border-solid border-surface-300-600-token;
-	}
+/* === Body Styles === */
+
+body {
+	@apply bg-surface-50-900-token;
+	/* Typography */
+	@apply text-base font-token text-token;
+}
+
+/* === Selection === */
+
+::selection {
+	@apply bg-primary-500/30;
+}
+
+/* === Focus === */
+
+/* Outline (do not change) */
+/* http://www.outlinenone.com/ */
+
+/* Mobile tap highlight */
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
+html {
+	-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
+}
+
+/* === Scrollbars === */
+
+::-webkit-scrollbar {
+	@apply w-2;
+	@apply h-2;
+}
+::-webkit-scrollbar-track {
+	@apply !bg-surface-50-900-token px-[1px];
+}
+::-webkit-scrollbar-thumb {
+	@apply rounded-token bg-surface-400-500-token;
+}
+
+/* Firefox */
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
+html {
+	scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.05);
+}
+html.dark {
+	scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.05);
+}
+
+/* === Horizontal Rules === */
+
+hr:not(.divider) {
+	@apply block border-t border-solid border-surface-300-600-token;
 }
diff --git a/packages/plugin/src/styles/base/elements.css b/packages/plugin/src/styles/base/elements.css
@@ -1,35 +1,33 @@
 /* Tailwind Elements: elements.css */
 
-@layer base {
-	/* === States === */
+/* === States === */
 
-	/* File Input Button */
-	input[type='file']:not(.file-dropzone-input)::file-selector-button {
-		@apply border-0 btn variant-filled btn-sm mr-2;
-	}
+/* File Input Button */
+input[type='file']:not(.file-dropzone-input)::file-selector-button {
+	@apply border-0 btn variant-filled btn-sm mr-2;
+}
 
-	/* Range Input */
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
-	[type='range'] {
-		@apply w-full accent-surface-900 dark:accent-surface-50;
-	}
+/* Range Input */
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
+[type='range'] {
+	@apply w-full accent-surface-900 dark:accent-surface-50;
+}
 
-	/* === Sort Styles ==== */
+/* === Sort Styles ==== */
 
-	[data-sort] {
-		@apply hover:bg-primary-hover-token cursor-pointer;
-		/* Sort Icon - invisible by default */
-		@apply after:opacity-0 after:!ml-2 after:!content-['↓'];
-	}
+[data-sort] {
+	@apply hover:bg-primary-hover-token cursor-pointer;
+	/* Sort Icon - invisible by default */
+	@apply after:opacity-0 after:!ml-2 after:!content-['↓'];
+}
 
-	/* === Popup === */
+/* === Popup === */
 
-	[data-popup] {
-		/* https://floating-ui.com/docs/computeposition#usage */
-		@apply absolute top-0 left-0;
-		/* Set hidden on page load */
-		@apply hidden;
-		/* Transitions */
-		@apply transition-opacity duration-150;
-	}
+[data-popup] {
+	/* https://floating-ui.com/docs/computeposition#usage */
+	@apply absolute top-0 left-0;
+	/* Set hidden on page load */
+	@apply hidden;
+	/* Transitions */
+	@apply transition-opacity duration-150;
 }
diff --git a/packages/plugin/src/styles/base/forms.css b/packages/plugin/src/styles/base/forms.css
@@ -1,63 +1,61 @@
 /* Stylesheet: forms.css */
 
-@layer base {
-	/* === Resets === */
+/* === Resets === */
 
-	fieldset,
-	legend,
-	label {
-		@apply block;
-	}
+fieldset,
+legend,
+label {
+	@apply block;
+}
 
-	/* Placeholders */
-	::-moz-placeholder {
-		@apply text-surface-500-400-token;
-	}
-	:-ms-input-placeholder {
-		@apply text-surface-500-400-token;
-	}
-	::placeholder {
-		@apply text-surface-500-400-token;
-	}
+/* Placeholders */
+::-moz-placeholder {
+	@apply text-surface-500-400-token;
+}
+:-ms-input-placeholder {
+	@apply text-surface-500-400-token;
+}
+::placeholder {
+	@apply text-surface-500-400-token;
+}
 
-	/* Date Calendar Picker (Webkit) */
-	input::-webkit-calendar-picker-indicator {
-		@apply dark:invert;
-	}
+/* Date Calendar Picker (Webkit) */
+input::-webkit-calendar-picker-indicator {
+	@apply dark:invert;
+}
 
-	/* Search Input "X" Cancel Button (Webkit) */
-	/* Source: https://stackoverflow.com/a/64267916 */
-	input[type='search']::-webkit-search-cancel-button {
-		-webkit-appearance: none;
-		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'/%3E%3C/svg%3E")
-			no-repeat 50% 50%;
-		@apply h-4 w-4 rounded-full bg-contain opacity-0 pointer-events-none;
-	}
-	input[type='search']:focus::-webkit-search-cancel-button {
-		@apply opacity-100 pointer-events-auto;
-	}
-	input[type='search']::-webkit-search-cancel-button {
-		@apply dark:invert;
-	}
+/* Search Input "X" Cancel Button (Webkit) */
+/* Source: https://stackoverflow.com/a/64267916 */
+input[type='search']::-webkit-search-cancel-button {
+	-webkit-appearance: none;
+	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'/%3E%3C/svg%3E")
+		no-repeat 50% 50%;
+	@apply h-4 w-4 rounded-full bg-contain opacity-0 pointer-events-none;
+}
+input[type='search']:focus::-webkit-search-cancel-button {
+	@apply opacity-100 pointer-events-auto;
+}
+input[type='search']::-webkit-search-cancel-button {
+	@apply dark:invert;
+}
 
-	/* Progress Bar */
-	progress {
-		webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		@apply w-full h-2 overflow-hidden rounded-token;
-		@apply bg-surface-400-500-token;
-	}
-	progress::-webkit-progress-bar {
-		@apply bg-surface-400-500-token;
-	}
-	progress::-webkit-progress-value {
-		@apply bg-surface-900-50-token;
-	}
-	::-moz-progress-bar {
-		@apply bg-surface-900-50-token;
-	}
-	:indeterminate::-moz-progress-bar {
-		width: 0;
-	}
+/* Progress Bar */
+progress {
+	webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	@apply w-full h-2 overflow-hidden rounded-token;
+	@apply bg-surface-400-500-token;
+}
+progress::-webkit-progress-bar {
+	@apply bg-surface-400-500-token;
+}
+progress::-webkit-progress-value {
+	@apply bg-surface-900-50-token;
+}
+::-moz-progress-bar {
+	@apply bg-surface-900-50-token;
+}
+:indeterminate::-moz-progress-bar {
+	width: 0;
 }
diff --git a/packages/plugin/src/styles/tailwind.css b/packages/plugin/src/styles/tailwind.css
@@ -5,28 +5,13 @@
 */
 
 /**
- * This injects Tailwind's base styles and any base styles registered by
- * plugins.
+ * This injects Tailwind's component classes and any component classes
+ * registered by plugins.
  */
-@tailwind base;
-
-/**
-   * This injects Tailwind's component classes and any component classes
-   * registered by plugins.
-   */
 @tailwind components;
 
 /**
-   * This injects Tailwind's utility classes and any utility classes registered
-   * by plugins.
-   */
+ * This injects Tailwind's utility classes and any utility classes registered
+ * by plugins.
+ */
 @tailwind utilities;
-
-/**
-   * Use this directive to control where Tailwind injects the hover, focus,
-   * responsive, dark mode, and other variants of each class.
-   *
-   * If omitted, Tailwind will append these classes to the very end of
-   * your stylesheet by default.
-   */
-@tailwind variants;