Our team uses Google Tag Manager and Optimizely in our Nextjs application. Both of these tools use CSS selectors to target sections of the page. We are using CSS Modules

Every time we deploy code, our class name are hashed and will break the selectors because the classname has been changed.

<div class="Button_test__1iM5u">

How can I add a classname along side of the hash classname? Or something that allows me to have a class that does not get hashed every deployment.

<div class="ButtonTest Button_test__1iM5u">

CodePudding user response：

I figured this would be a common problem as things like e2e/webdriver tests would have a hard time with it too.

This is a similar question, and it seems you can config either webpack to handle the styles or add a 'constant' classname prefix (which you can still query with CSS selectors), which points to this discussion.

TLDR: <div className={`constant-class ${styles.cssModuleClass}`} /> or use aria or data attributes to query.