如何阻止clean-css将font-family中的'Crimson'替换为#dc143c？

This is a tricky edge case! The root issue here is that clean-css’s color optimization is misinterpreting the word "Crimson" in your font family name as the CSS color keyword crimson (which maps to the hex value #dc143c), and incorrectly replacing it during minification. Here are several targeted solutions to fix this:

1. Disable Color Optimization in clean-css Level 1 #

Since you’re working with Level 1 optimizations, you can explicitly turn off the color conversion rule that’s causing the problem. This is the most straightforward fix if you don’t need color keyword-to-hex conversion in your project.

Update your gulp-clean-css task configuration like this:

gulp.task('minify-css', function() {
  return gulp.src('src/**/*.css')
    .pipe(cleanCss({
      level: {
        1: {
          // Disable all color-related optimizations to prevent misinterpretation
          colors: false
        }
      }
    }))
    .pipe(gulp.dest('dist'));
});

If you want to keep most color optimizations but just disable keyword-to-hex conversion, use a more granular setting instead:

colors: {
  convert: {
    keywords: false
  }
}

2. Add an Exception for the "Crimson Text" Font #

If you don’t want to disable color optimizations globally, you can adjust how clean-css processes specific font family declarations. One way is to ensure the font name is formatted in a way that clean-css doesn’t mistake it for a color.

In your local npm package’s precompiled CSS, modify the font-family line to use escaped quotes or a different syntax that avoids the conflict:

font-family: "\'Crimson Text\'", serif;

Or simply wrap the font name in double quotes (some minifiers handle this better with string literals):

font-family: "Crimson Text", serif;

3. Update or Downgrade Your clean-css Version #

This might be a bug in the specific version of clean-css (or gulp-clean-css) you’re using. Try upgrading to the latest stable version to see if the issue has been fixed:

npm update gulp-clean-css

If the latest version still has the problem, try downgrading to a version known to not have this edge-case bug (check the package’s GitHub issues for reports of similar problems).

4. Preprocess to Avoid the Conflict #

Since you’re using Stylus, you can add a safeguard in your main project’s styles. For example, define the font family as a variable with escaped characters to ensure it survives minification:

crimson-font = "\'Crimson Text\'"
body
  font-family: crimson-font, serif

Any of these approaches should stop clean-css from incorrectly replacing your font family with a hex color. I’d start with option 1 or 2 since they target the exact issue without major changes to your workflow.

内容的提问来源于stack exchange，提问作者Kevin Danikowski