Debugging Gulp CSS Issue

TODO: collapasable, copyable, download, etc

I am trying to debug a gulp process. Currently I have a css selector written as :focus:not(:focus-visible) when gulp runs it is converting it to :focus:not(.focus-visible) why is it doing that and how do I make it stopIt sounds like you're encountering an issue where Gulp, probably through one of its plugins, is incorrectly processing your CSS selectors. The change from :focus:not(:focus-visible) to :focus:not(.focus-visible) suggests that the plugin might be misinterpreting the pseudo-class :focus-visible as a class selector (.focus-visible).

Here are some steps you can take to troubleshoot and potentially fix this issue:

1. Identify the Plugin Causing the Issue: Determine which Gulp plugin is responsible for processing your CSS. Common culprits might be minifiers, autoprefixers, or other CSS optimization tools.

2. Check Plugin Configuration: Once you've identified the plugin, check its configuration options. It's possible that there's a setting that's causing this behavior, and adjusting the configuration might solve the problem.

3. Update Your Dependencies: Ensure that all your dependencies, including Gulp and its plugins, are up to date. Sometimes, bugs like this are fixed in newer versions of the software.

4. Consult Plugin Documentation: Look at the documentation for the plugin to see if this is a known issue or if there are recommended settings for handling pseudo-classes like :focus-visible.

5. Bypass the Plugin (Temporarily): As a test, temporarily disable the plugin in your Gulp workflow and see if the problem persists. This can confirm whether the plugin is the source of the issue.

6. Search for Similar Issues: Look for similar issues in the plugin's issue tracker on GitHub or forums. Other users might have encountered the same problem and found a solution.

7. Report the Bug: If it seems like a bug and you can't find any existing reports or solutions, consider reporting it to the plugin's maintainers.

8. Workaround: As a temporary workaround, you could write a custom CSS rule that achieves the same effect without using :focus-visible, or manually adjust the CSS after Gulp has processed it.

9. Alternative Plugins: If the issue persists and no solution is available, you might need to look for alternative plugins that don't have this issue.

Remember to keep backups of your files before making changes to your build process, and test any changes thoroughly to ensure they don't have unintended side effects.

Debugging Gulp CSS Issue created at Tue Jan 20 1970 16:32:07 GMT+0000 (Coordinated Universal Time)