mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 16:15:12 +00:00
feat: enable automatic Tailwind CSS v4 integration in blox-tailwind module
- Fix Hugo documentation inconsistency: mount hugo_stats.json to match @source directive - Module provides all Tailwind v4 configuration - zero user config required - Add comprehensive color variables safelist for dynamic YAML usage - Enable build stats and cachebusters for optimal performance - Maintain hugo_stats.json in .gitignore (auto-generated per site) Benefits: - Automatic Tailwind v4 support for all existing users (no breaking changes) - Proper Hugo Stats content detection with corrected paths - Module handles all complexity - users just import and use
This commit is contained in:
George Cushen committed
1 parent
c5625bd0b7
commit
776157d486
5 files changed
+247
-17
No files matched your search
@@ -2,4 +2,229 @@
|
||||
/* Note: In v4, we use @source inline to ensure these are included */
|
||||
/* This ensures Tailwind generates these classes even if not found in templates */
|
||||
|
||||
@source inline("<div class='block hidden dark:block dark:hidden'></div><div class='task-list'></div><div class='pl-4 pl-8 pl-12'></div><div class='min-h-screen'></div><div class='md:grid-cols-1 md:grid-cols-2 md:grid-cols-3 md:grid-cols-4 md:grid-cols-5 md:grid-cols-6'></div><div class='bg-white bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900'></div><div class='bg-neutral-50 bg-neutral-100 bg-neutral-200 bg-neutral-300 bg-neutral-400 bg-neutral-500 bg-neutral-600 bg-neutral-700 bg-neutral-800 bg-neutral-900'></div><div class='dark:bg-neutral-700 dark:bg-neutral-800 dark:bg-neutral-900'></div><div class='bg-primary-50 bg-primary-100 bg-primary-200 bg-primary-300 bg-primary-400 bg-primary-500 bg-primary-600 bg-primary-700 bg-primary-800 bg-primary-900'></div><div class='bg-secondary-50 bg-secondary-100 bg-secondary-200 bg-secondary-300 bg-secondary-400 bg-secondary-500 bg-secondary-600 bg-secondary-700 bg-secondary-800 bg-secondary-900'></div><div class='text-primary-50 text-primary-100 text-primary-200 text-primary-300 text-primary-400 text-primary-500 text-primary-600 text-primary-700 text-primary-800 text-primary-900'></div><div class='text-secondary-50 text-secondary-100 text-secondary-200 text-secondary-300 text-secondary-400 text-secondary-500 text-secondary-600 text-secondary-700 text-secondary-800 text-secondary-900'></div><div class='text-neutral-50 text-neutral-100 text-neutral-200 text-neutral-300 text-neutral-400 text-neutral-500 text-neutral-600 text-neutral-700 text-neutral-800 text-neutral-900'></div><div class='text-white text-black dark:text-white'></div><div class='dark:text-neutral-300 dark:text-neutral-400'></div><div class='border-primary-50 border-primary-100 border-primary-200 border-primary-300 border-primary-400 border-primary-500 border-primary-600 border-primary-700 border-primary-800 border-primary-900'></div><div class='border-secondary-50 border-secondary-100 border-secondary-200 border-secondary-300 border-secondary-400 border-secondary-500 border-secondary-600 border-secondary-700 border-secondary-800 border-secondary-900'></div><div class='border-neutral-50 border-neutral-100 border-neutral-200 border-neutral-300 border-neutral-400 border-neutral-500 border-neutral-600 border-neutral-700 border-neutral-800 border-neutral-900'></div><div class='bg-gradient-to-t bg-gradient-to-tr bg-gradient-to-r bg-gradient-to-br bg-gradient-to-b bg-gradient-to-bl bg-gradient-to-l bg-gradient-to-tl'></div><div class='from-primary-50 from-primary-100 from-primary-200 from-primary-300 from-primary-400 from-primary-500 from-primary-600 from-primary-700 from-primary-800 from-primary-900'></div><div class='from-secondary-50 from-secondary-100 from-secondary-200 from-secondary-300 from-secondary-400 from-secondary-500 from-secondary-600 from-secondary-700 from-secondary-800 from-secondary-900'></div><div class='to-primary-50 to-primary-100 to-primary-200 to-primary-300 to-primary-400 to-primary-500 to-primary-600 to-primary-700 to-primary-800 to-primary-900'></div><div class='to-secondary-50 to-secondary-100 to-secondary-200 to-secondary-300 to-secondary-400 to-secondary-500 to-secondary-600 to-secondary-700 to-secondary-800 to-secondary-900'></div><div class='hover:from-primary-500 hover:from-secondary-500 hover:to-primary-500 hover:to-secondary-500'></div><div class='hover:bg-primary-50 hover:bg-primary-100 hover:bg-primary-200 hover:bg-primary-300 hover:bg-primary-400 hover:bg-primary-500 hover:bg-primary-600 hover:bg-primary-700 hover:bg-primary-800 hover:bg-primary-900'></div><div class='hover:bg-neutral-50 hover:bg-neutral-100 hover:bg-neutral-200 hover:bg-neutral-300 hover:bg-neutral-400 hover:bg-neutral-500 hover:bg-neutral-600 hover:bg-neutral-700 hover:bg-neutral-800 hover:bg-neutral-900'></div><div class='hover:text-primary hover:text-primary-50 hover:text-primary-100 hover:text-primary-200 hover:text-primary-300 hover:text-primary-400 hover:text-primary-500 hover:text-primary-600 hover:text-primary-700 hover:text-primary-800 hover:text-primary-900'></div><div class='hover:text-neutral-50 hover:text-neutral-100 hover:text-neutral-200 hover:text-neutral-300 hover:text-neutral-400 hover:text-neutral-500 hover:text-neutral-600 hover:text-neutral-700 hover:text-neutral-800 hover:text-neutral-900'></div><div class='dark:hover:bg-primary-50 dark:hover:bg-primary-100 dark:hover:bg-primary-200 dark:hover:bg-primary-300 dark:hover:bg-primary-400 dark:hover:bg-primary-500 dark:hover:bg-primary-600 dark:hover:bg-primary-700 dark:hover:bg-primary-800 dark:hover:bg-primary-900'></div><div class='dark:hover:text-neutral-50 dark:hover:text-neutral-100 dark:hover:text-neutral-200 dark:hover:text-neutral-300 dark:hover:text-neutral-400 dark:hover:text-neutral-500 dark:hover:text-neutral-600 dark:hover:text-neutral-700 dark:hover:text-neutral-800 dark:hover:text-neutral-900'></div>");
|
||||
@source inline("<div class='block hidden dark:block dark:hidden'></div><div class='task-list'></div><div class='pl-4 pl-8 pl-12'></div><div class='min-h-screen'></div><div class='md:grid-cols-1 md:grid-cols-2 md:grid-cols-3 md:grid-cols-4 md:grid-cols-5 md:grid-cols-6'></div><div class='bg-white bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900'></div><div class='bg-neutral-50 bg-neutral-100 bg-neutral-200 bg-neutral-300 bg-neutral-400 bg-neutral-500 bg-neutral-600 bg-neutral-700 bg-neutral-800 bg-neutral-900'></div><div class='dark:bg-neutral-700 dark:bg-neutral-800 dark:bg-neutral-900'></div><div class='bg-primary-50 bg-primary-100 bg-primary-200 bg-primary-300 bg-primary-400 bg-primary-500 bg-primary-600 bg-primary-700 bg-primary-800 bg-primary-900'></div><div class='bg-secondary-50 bg-secondary-100 bg-secondary-200 bg-secondary-300 bg-secondary-400 bg-secondary-500 bg-secondary-600 bg-secondary-700 bg-secondary-800 bg-secondary-900'></div><div class='text-primary-50 text-primary-100 text-primary-200 text-primary-300 text-primary-400 text-primary-500 text-primary-600 text-primary-700 text-primary-800 text-primary-900'></div><div class='text-secondary-50 text-secondary-100 text-secondary-200 text-secondary-300 text-secondary-400 text-secondary-500 text-secondary-600 text-secondary-700 text-secondary-800 text-secondary-900'></div><div class='text-neutral-50 text-neutral-100 text-neutral-200 text-neutral-300 text-neutral-400 text-neutral-500 text-neutral-600 text-neutral-700 text-neutral-800 text-neutral-900'></div><div class='text-white text-black dark:text-white'></div><div class='dark:text-neutral-300 dark:text-neutral-400'></div><div class='border-primary-50 border-primary-100 border-primary-200 border-primary-300 border-primary-400 border-primary-500 border-primary-600 border-primary-700 border-primary-800 border-primary-900'></div><div class='border-secondary-50 border-secondary-100 border-secondary-200 border-secondary-300 border-secondary-400 border-secondary-500 border-secondary-600 border-secondary-700 border-secondary-800 border-secondary-900'></div><div class='border-neutral-50 border-neutral-100 border-neutral-200 border-neutral-300 border-neutral-400 border-neutral-500 border-neutral-600 border-neutral-700 border-neutral-800 border-neutral-900'></div><div class='bg-gradient-to-t bg-gradient-to-tr bg-gradient-to-r bg-gradient-to-br bg-gradient-to-b bg-gradient-to-bl bg-gradient-to-l bg-gradient-to-tl'></div><div class='from-primary-50 from-primary-100 from-primary-200 from-primary-300 from-primary-400 from-primary-500 from-primary-600 from-primary-700 from-primary-800 from-primary-900'></div><div class='from-secondary-50 from-secondary-100 from-secondary-200 from-secondary-300 from-secondary-400 from-secondary-500 from-secondary-600 from-secondary-700 from-secondary-800 from-secondary-900'></div><div class='to-primary-50 to-primary-100 to-primary-200 to-primary-300 to-primary-400 to-primary-500 to-primary-600 to-primary-700 to-primary-800 to-primary-900'></div><div class='to-secondary-50 to-secondary-100 to-secondary-200 to-secondary-300 to-secondary-400 to-secondary-500 to-secondary-600 to-secondary-700 to-secondary-800 to-secondary-900'></div><div class='hover:from-primary-500 hover:from-secondary-500 hover:to-primary-500 hover:to-secondary-500'></div><div class='hover:bg-primary-50 hover:bg-primary-100 hover:bg-primary-200 hover:bg-primary-300 hover:bg-primary-400 hover:bg-primary-500 hover:bg-primary-600 hover:bg-primary-700 hover:bg-primary-800 hover:bg-primary-900'></div><div class='hover:bg-neutral-50 hover:bg-neutral-100 hover:bg-neutral-200 hover:bg-neutral-300 hover:bg-neutral-400 hover:bg-neutral-500 hover:bg-neutral-600 hover:bg-neutral-700 hover:bg-neutral-800 hover:bg-neutral-900'></div><div class='hover:text-primary hover:text-primary-50 hover:text-primary-100 hover:text-primary-200 hover:text-primary-300 hover:text-primary-400 hover:text-primary-500 hover:text-primary-600 hover:text-primary-700 hover:text-primary-800 hover:text-primary-900'></div><div class='hover:text-neutral-50 hover:text-neutral-100 hover:text-neutral-200 hover:text-neutral-300 hover:text-neutral-400 hover:text-neutral-500 hover:text-neutral-600 hover:text-neutral-700 hover:text-neutral-800 hover:text-neutral-900'></div><div class='dark:hover:bg-primary-50 dark:hover:bg-primary-100 dark:hover:bg-primary-200 dark:hover:bg-primary-300 dark:hover:bg-primary-400 dark:hover:bg-primary-500 dark:hover:bg-primary-600 dark:hover:bg-primary-700 dark:hover:bg-primary-800 dark:hover:bg-primary-900'></div><div class='dark:hover:text-neutral-50 dark:hover:text-neutral-100 dark:hover:text-neutral-200 dark:hover:text-neutral-300 dark:hover:text-neutral-400 dark:hover:text-neutral-500 dark:hover:text-neutral-600 dark:hover:text-neutral-700 dark:hover:text-neutral-800 dark:hover:text-neutral-900'></div><div class='bg-indigo-50 bg-indigo-100 bg-indigo-200 bg-Line truncated
|
||||
|
||||
/* Force generation of all CSS custom properties for dynamic usage in YAML front matter */
|
||||
/* Hidden utility class that forces all color variables to be generated */
|
||||
.force-all-color-vars {
|
||||
/* Primary Colors */
|
||||
color: var(--color-primary-50);
|
||||
color: var(--color-primary-100);
|
||||
color: var(--color-primary-200);
|
||||
color: var(--color-primary-300);
|
||||
color: var(--color-primary-400);
|
||||
color: var(--color-primary-500);
|
||||
color: var(--color-primary-600);
|
||||
color: var(--color-primary-700);
|
||||
color: var(--color-primary-800);
|
||||
color: var(--color-primary-900);
|
||||
color: var(--color-primary-950);
|
||||
|
||||
/* Secondary Colors */
|
||||
color: var(--color-secondary-50);
|
||||
color: var(--color-secondary-100);
|
||||
color: var(--color-secondary-200);
|
||||
color: var(--color-secondary-300);
|
||||
color: var(--color-secondary-400);
|
||||
color: var(--color-secondary-500);
|
||||
color: var(--color-secondary-600);
|
||||
color: var(--color-secondary-700);
|
||||
color: var(--color-secondary-800);
|
||||
color: var(--color-secondary-900);
|
||||
color: var(--color-secondary-950);
|
||||
|
||||
/* Extended Color Palette for Dynamic Gradients */
|
||||
color: var(--color-indigo-50);
|
||||
color: var(--color-indigo-100);
|
||||
color: var(--color-indigo-200);
|
||||
color: var(--color-indigo-300);
|
||||
color: var(--color-indigo-400);
|
||||
color: var(--color-indigo-500);
|
||||
color: var(--color-indigo-600);
|
||||
color: var(--color-indigo-700);
|
||||
color: var(--color-indigo-800);
|
||||
color: var(--color-indigo-900);
|
||||
color: var(--color-indigo-950);
|
||||
|
||||
color: var(--color-purple-50);
|
||||
color: var(--color-purple-100);
|
||||
color: var(--color-purple-200);
|
||||
color: var(--color-purple-300);
|
||||
color: var(--color-purple-400);
|
||||
color: var(--color-purple-500);
|
||||
color: var(--color-purple-600);
|
||||
color: var(--color-purple-700);
|
||||
color: var(--color-purple-800);
|
||||
color: var(--color-purple-900);
|
||||
color: var(--color-purple-950);
|
||||
|
||||
color: var(--color-pink-50);
|
||||
color: var(--color-pink-100);
|
||||
color: var(--color-pink-200);
|
||||
color: var(--color-pink-300);
|
||||
color: var(--color-pink-400);
|
||||
color: var(--color-pink-500);
|
||||
color: var(--color-pink-600);
|
||||
color: var(--color-pink-700);
|
||||
color: var(--color-pink-800);
|
||||
color: var(--color-pink-900);
|
||||
color: var(--color-pink-950);
|
||||
|
||||
color: var(--color-red-50);
|
||||
color: var(--color-red-100);
|
||||
color: var(--color-red-200);
|
||||
color: var(--color-red-300);
|
||||
color: var(--color-red-400);
|
||||
color: var(--color-red-500);
|
||||
color: var(--color-red-600);
|
||||
color: var(--color-red-700);
|
||||
color: var(--color-red-800);
|
||||
color: var(--color-red-900);
|
||||
color: var(--color-red-950);
|
||||
|
||||
color: var(--color-orange-50);
|
||||
color: var(--color-orange-100);
|
||||
color: var(--color-orange-200);
|
||||
color: var(--color-orange-300);
|
||||
color: var(--color-orange-400);
|
||||
color: var(--color-orange-500);
|
||||
color: var(--color-orange-600);
|
||||
color: var(--color-orange-700);
|
||||
color: var(--color-orange-800);
|
||||
color: var(--color-orange-900);
|
||||
color: var(--color-orange-950);
|
||||
|
||||
color: var(--color-amber-50);
|
||||
color: var(--color-amber-100);
|
||||
color: var(--color-amber-200);
|
||||
color: var(--color-amber-300);
|
||||
color: var(--color-amber-400);
|
||||
color: var(--color-amber-500);
|
||||
color: var(--color-amber-600);
|
||||
color: var(--color-amber-700);
|
||||
color: var(--color-amber-800);
|
||||
color: var(--color-amber-900);
|
||||
color: var(--color-amber-950);
|
||||
|
||||
color: var(--color-yellow-50);
|
||||
color: var(--color-yellow-100);
|
||||
color: var(--color-yellow-200);
|
||||
color: var(--color-yellow-300);
|
||||
color: var(--color-yellow-400);
|
||||
color: var(--color-yellow-500);
|
||||
color: var(--color-yellow-600);
|
||||
color: var(--color-yellow-700);
|
||||
color: var(--color-yellow-800);
|
||||
color: var(--color-yellow-900);
|
||||
color: var(--color-yellow-950);
|
||||
|
||||
color: var(--color-lime-50);
|
||||
color: var(--color-lime-100);
|
||||
color: var(--color-lime-200);
|
||||
color: var(--color-lime-300);
|
||||
color: var(--color-lime-400);
|
||||
color: var(--color-lime-500);
|
||||
color: var(--color-lime-600);
|
||||
color: var(--color-lime-700);
|
||||
color: var(--color-lime-800);
|
||||
color: var(--color-lime-900);
|
||||
color: var(--color-lime-950);
|
||||
|
||||
color: var(--color-green-50);
|
||||
color: var(--color-green-100);
|
||||
color: var(--color-green-200);
|
||||
color: var(--color-green-300);
|
||||
color: var(--color-green-400);
|
||||
color: var(--color-green-500);
|
||||
color: var(--color-green-600);
|
||||
color: var(--color-green-700);
|
||||
color: var(--color-green-800);
|
||||
color: var(--color-green-900);
|
||||
color: var(--color-green-950);
|
||||
|
||||
color: var(--color-emerald-50);
|
||||
color: var(--color-emerald-100);
|
||||
color: var(--color-emerald-200);
|
||||
color: var(--color-emerald-300);
|
||||
color: var(--color-emerald-400);
|
||||
color: var(--color-emerald-500);
|
||||
color: var(--color-emerald-600);
|
||||
color: var(--color-emerald-700);
|
||||
color: var(--color-emerald-800);
|
||||
color: var(--color-emerald-900);
|
||||
color: var(--color-emerald-950);
|
||||
|
||||
color: var(--color-teal-50);
|
||||
color: var(--color-teal-100);
|
||||
color: var(--color-teal-200);
|
||||
color: var(--color-teal-300);
|
||||
color: var(--color-teal-400);
|
||||
color: var(--color-teal-500);
|
||||
color: var(--color-teal-600);
|
||||
color: var(--color-teal-700);
|
||||
color: var(--color-teal-800);
|
||||
color: var(--color-teal-900);
|
||||
color: var(--color-teal-950);
|
||||
|
||||
color: var(--color-cyan-50);
|
||||
color: var(--color-cyan-100);
|
||||
color: var(--color-cyan-200);
|
||||
color: var(--color-cyan-300);
|
||||
color: var(--color-cyan-400);
|
||||
color: var(--color-cyan-500);
|
||||
color: var(--color-cyan-600);
|
||||
color: var(--color-cyan-700);
|
||||
color: var(--color-cyan-800);
|
||||
color: var(--color-cyan-900);
|
||||
color: var(--color-cyan-950);
|
||||
|
||||
color: var(--color-sky-50);
|
||||
color: var(--color-sky-100);
|
||||
color: var(--color-sky-200);
|
||||
color: var(--color-sky-300);
|
||||
color: var(--color-sky-400);
|
||||
color: var(--color-sky-500);
|
||||
color: var(--color-sky-600);
|
||||
color: var(--color-sky-700);
|
||||
color: var(--color-sky-800);
|
||||
color: var(--color-sky-900);
|
||||
color: var(--color-sky-950);
|
||||
|
||||
color: var(--color-blue-50);
|
||||
color: var(--color-blue-100);
|
||||
color: var(--color-blue-200);
|
||||
color: var(--color-blue-300);
|
||||
color: var(--color-blue-400);
|
||||
color: var(--color-blue-500);
|
||||
color: var(--color-blue-600);
|
||||
color: var(--color-blue-700);
|
||||
color: var(--color-blue-800);
|
||||
color: var(--color-blue-900);
|
||||
color: var(--color-blue-950);
|
||||
|
||||
color: var(--color-violet-50);
|
||||
color: var(--color-violet-100);
|
||||
color: var(--color-violet-200);
|
||||
color: var(--color-violet-300);
|
||||
color: var(--color-violet-400);
|
||||
color: var(--color-violet-500);
|
||||
color: var(--color-violet-600);
|
||||
color: var(--color-violet-700);
|
||||
color: var(--color-violet-800);
|
||||
color: var(--color-violet-900);
|
||||
color: var(--color-violet-950);
|
||||
|
||||
/* Never display this class */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Support for dual light/dark background colors in parse_block_v2.html */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.home-section-bg[style*='--dark-bg-color'] {
|
||||
background-color: var(--dark-bg-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .home-section-bg[style*='--dark-bg-color'] {
|
||||
background-color: var(--dark-bg-color) !important;
|
||||
}
|
||||
@@ -6,9 +6,8 @@
|
||||
|
||||
/* Content detection sources */
|
||||
/* Note: @source is a Tailwind v4 directive - linters may show warnings that can be ignored */
|
||||
/* Hugo stats file contains all detected classes from templates */
|
||||
@source "hugo_stats.json";
|
||||
@source "../../layouts/**/*.html";
|
||||
@source "../../assets/**/*.{js,css}";
|
||||
|
||||
/* Custom Variants Configuration */
|
||||
/* Configure dark mode to use class strategy */
|
||||
|
||||
@@ -10,27 +10,27 @@
|
||||
6. Safelist for dynamic classes
|
||||
*/
|
||||
|
||||
/* Tailwind CSS v4 Base */
|
||||
@import "tailwindcss";
|
||||
/* Tailwind CSS v4 - This single import handles base, components, and utilities */
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* Configuration */
|
||||
@import "./config/tailwind.css";
|
||||
@import "./config/theme.css";
|
||||
@import 'config/tailwind.css';
|
||||
@import 'config/theme.css';
|
||||
|
||||
/* Base styles and utilities */
|
||||
@import "./framework/base.css";
|
||||
@import 'framework/base.css';
|
||||
|
||||
/* Hugo Blox theme system (color utilities) */
|
||||
@import "./color-utilities.css";
|
||||
@import 'color-utilities.css';
|
||||
|
||||
/* Hugo Blox framework components */
|
||||
@import "./framework/components.css";
|
||||
@import 'framework/components.css';
|
||||
|
||||
/* Hugo Blox module components */
|
||||
@import "./components/all.css";
|
||||
@import "./blox/all.css";
|
||||
@import "./views/attachments.css";
|
||||
@import "chroma.css";
|
||||
@import 'components/all.css';
|
||||
@import 'blox/all.css';
|
||||
@import 'views/all.css';
|
||||
@import 'chroma.css';
|
||||
|
||||
/* Safelist for dynamic classes */
|
||||
@import "./config/safelist.css";
|
||||
@import 'config/safelist.css';
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"htmlElements": {},
|
||||
"htmlAttributes": {},
|
||||
"cssClasses": [],
|
||||
"ids": []
|
||||
}
|
||||
@@ -2,7 +2,7 @@ build:
|
||||
buildStats:
|
||||
enable: true
|
||||
cachebusters:
|
||||
- source: assets/notwatching/hugo_stats\.json
|
||||
- source: assets/hugo_stats\.json
|
||||
target: css
|
||||
- source: (postcss|tailwind)\.config\.js
|
||||
target: css
|
||||
@@ -112,7 +112,7 @@ module:
|
||||
target: archetypes
|
||||
- disableWatch: true
|
||||
source: hugo_stats.json
|
||||
target: assets/notwatching/hugo_stats.json
|
||||
target: assets/hugo_stats.json
|
||||
|
||||
# BLOX A) Server-rendered block templates (Go HTML)
|
||||
- source: blox
|
||||
|
||||
Reference in new issue
Block a user