Skip to content

Remove color-mix() from packaged CSS via build-time transformation #2670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 6 commits into from
+82 −0
Closed

Remove color-mix() from packaged CSS via build-time transformation #2670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f7a6299
Initial plan
Copilot Jan 20, 2026
dbd9e3a
Replace color-mix with computed color values for compatibility
Copilot Jan 20, 2026
bb0a0b4
Add comprehensive documentation comments explaining color calculations
Copilot Jan 20, 2026
569b5a6
Fix nitpick: Clarify CSS Color Module Level 5 syntax reference
Copilot Jan 20, 2026
8d1aa58
Replace color-mix during build process with PostCSS plugin
Copilot Jan 20, 2026
2cb5ee1
Fix PostCSS plugin to handle whitespace in color-mix correctly
Copilot Jan 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions build/postcss-replace-color-mix.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/**
* PostCSS plugin to replace color-mix() with pre-computed values
* This plugin handles the specific color-mix usage in docsify
*/

// Pre-computed color values based on the default theme
const colorReplacements = {
// Monochrome scale: mix of #fff and #333
'color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 5%)':
'#f5f5f5',
'color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 10%)':
'#ebebeb',
'color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 20%)':
'#d6d6d6',
'color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 32%)':
'#bebebe',
'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 50%)':
'#999999',
'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 32%)':
'#747474',
'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 20%)':
'#5c5c5c',
'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 10%)':
'#474747',
'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 5%)':
'#3d3d3d',

// Theme color tints: mix of #0b85d7 with white (#fff)
'color-mix(in srgb, var(--theme-color), var(--color-mono-min) 90%)':
'#e7f3fb',
'color-mix(in srgb, var(--theme-color), var(--color-mono-min) 75%)':
'#c2e1f5',
'color-mix(in srgb, var(--theme-color), var(--color-mono-min) 55%)':
'#91c8ed',
'color-mix(in srgb, var(--theme-color), var(--color-mono-min) 30%)':
'#54aae3',

// Theme color shades: mix of #0b85d7 with dark gray (#333)
'color-mix(in srgb, var(--theme-color), var(--color-mono-max) 30%)':
'#176ca6',
'color-mix(in srgb, var(--theme-color), var(--color-mono-max) 55%)':
'#21587d',
'color-mix(in srgb, var(--theme-color), var(--color-mono-max) 75%)':
'#29485c',
'color-mix(in srgb, var(--theme-color), var(--color-mono-max) 90%)':
'#2f3b43',

// Strong colors
'color-mix(in srgb, var(--color-text), black 35%)': '#212121',
'color-mix(in srgb, var(--color-text), white 35%)': '#e9e9e9',

// Sidebar toggle with transparency: 10% theme color with 90% transparent
'color-mix( in srgb, var(--sidebar-toggle-bg-hover) 10%, transparent )':
'rgba(11, 133, 215, 0.1)',
};

// Normalize whitespace in color-mix functions for matching
function normalizeColorMix(str) {
return str.replace(/\s+/g, ' ').trim();
}

module.exports = () => {
return {
postcssPlugin: 'postcss-replace-color-mix',
Declaration(decl) {
const value = decl.value;

// Check if the value contains color-mix
if (value.includes('color-mix')) {
const normalized = normalizeColorMix(value);

// Replace with pre-computed value if found
if (colorReplacements[normalized]) {
decl.value = colorReplacements[normalized];
}
}
},
};
};

module.exports.postcss = true;
1 change: 1 addition & 0 deletions postcss.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ module.exports = ctx => ({
'postcss-nesting': {
edition: '2024-02',
},
'./build/postcss-replace-color-mix.cjs': {},
cssnano: ctx.env === 'production' ? { preset: 'default' } : false,
},
});