oliverdavies.uk/source/_daily_emails/2024-08-25.md

title	date	permalink	tags	cta	snippet	drupal_planet
CSS, data attributes and feature flags	2024-08-25	daily/2024/08/25/css--data-attributes-and-feature-flags	software-development drupal php feature-flags css	~	How I combined a feature flag and a data attribute to release some new CSS styles to a project.	true

I recently used Drupal's Feature Toggle module to set a data attribute which enabled some new styling for buttons.

Firstly, within the theme's .theme file, I added this code:

/**
 * Implements hook_preprocess_html().
 */
function mytheme_preprocess_html(array &$variables): void {
  $variables['attributes']['data-use-new-button-styles'] = \Drupal::service('feature_toggle.feature_status')->getStatus('use_the_new_button_styling');
}

If the feature toggle is enabled, it adds a data-use-new-button-styles="" attribute to the body element.

If it is disabled, the attribute is not added, so I can write CSS that's applied when the data attribute is present:

[data-use-new-button-styles] .btn-primary {
  background-color: red;
}

In a Tailwind CSS project (this isn't), the same could be achiveable with a custom interaction state - similar to hover, focus and active. Something like new-button-styles:bg-red-500.

I like using feature flags and was happy to find a way to use them when adding this new CSS.