Breaking change in postcss-responsive-variations plugin

Copy post link

Hey there! We have an important update to share regarding a breaking change in the latest version of the postcss-responsive-variations plugin. This change impacts how responsive variations are defined and used.

For Dialpad and Dialpad Meetings projects, no updates are necessary as we have already updated these projects to use the latest version of the plugin, but we wanted to inform you about these changes so you can use the responsive classes in the new recommended way moving forward.

What Are Dialtone Responsive Variations? #

The responsive variations on Dialtone classes are the ones that are prefixed with sm:, md:, lg:, and xl:. These prefixes are used to apply styles at different screen sizes. For example, if you want to apply a gap of 16 at screen widths large or greater, and a gap of 4 otherwise, you would use the following:

// gap of 16 at screen widths large or greater, gap of 4 otherwise
<dt-stack direction="row" class="d-g4 lg:d-g16">

What's Changed #

The previous implementation used max-width media queries, which is not the recommended approach for responsive design. The new implementation uses min-width media queries, which is more in line with modern responsive design practices. This change allows for a more consistent and predictable behavior when applying styles at different breakpoints.

Previously, the default breakpoints were defined as:

const defaultBreakpoints = [
  { prefix: 'sm\\:', mediaQuery: '(max-width: 480px)' },
  { prefix: 'md\\:', mediaQuery: '(max-width: 640px)' },
  { prefix: 'lg\\:', mediaQuery: '(max-width: 960px)' },
  { prefix: 'xl\\:', mediaQuery: '(max-width: 1264px)' },
];

Now, they have been updated to:

const defaultBreakpoints = [
  { prefix: 'sm\\:', mediaQuery: '(min-width: 480px)' },
  { prefix: 'md\\:', mediaQuery: '(min-width: 640px)' },
  { prefix: 'lg\\:', mediaQuery: '(min-width: 960px)' },
  { prefix: 'xl\\:', mediaQuery: '(min-width: 1264px)' },
];

This change means that when updating to the latest version of this plugin, you will need to modify how responsive variations are used in your project. Additionally, if you were using responsive variations directly from dialtone.css, please note that these are no longer available. You will need to install the postcss-responsive-variations plugin yourself and generate the desired variations.

Migration Steps #

If your project already uses the postcss-responsive-variations plugin: #

Update the responsive variations:

For example, if you were using d-d-flex sm:d-display-none to hide an element on small screens, you will now need to use d-d-none sm:d-d-flex to achieve the same effect. Notice that the default styles are now applied to smaller screens, and the responsive styles are applied to larger screens. More information can be found in the breakpoints documentation.

If your project does not use the postcss-responsive-variations plugin: #

1. Install the Plugin: If you were relying on dialtone.css for responsive variations, install the postcss-responsive-variations plugin in your project following the instructions in the README.

2. Generate Variations: Configure the plugin in your PostCSS setup to generate the prefixed responsive variations you need.

3. Update Your Styles: Update your styles to use the new responsive variations as described above.

We understand that this change may require some adjustments in your workflow, but it ensures better alignment with modern responsive design practices. If you have any questions or need assistance, feel free to reach out in the #dialtone channel.

Thanks! Dialtone Team 💜