To eliminate the need for different places for breakpoints and only maintain a single source of truth for those, this node_module extracts the breakpoints defined in the currently used Drupal themes breakpoint file and generates grouped customProperties and a separate js object with all necessary parameters.

If the draft @custom-media or PostCSS with Custom Media plugin is already used, media queries can be written with customProperties. So any declaration of media queries within stylesheets is omitted and maintainability is increased.

Install as a devDependency with yarn or npm like:

yarn add --dev @factorial/drupal-breakpoints-css
# or
npm install --sav-dev @factorial/drupal-breakpoints-css

In your themes root folder, besides your already defined breakpoints file from Drupal, add a breakpoints.config.yml configuration file. The following properties are mandatory:

// ./lib/types.d.ts
export interface UserConfig {
  drupal: {
    breakpointsPath: string;
    themeName: string;
  };
  prettier?: {
    configPath: string;
  };
  js?: {
    enabled?: boolean;
    path?: string;
    type?: "commonjs" | "module";
  };
  css?: {
    enabled?: boolean;
    path?: string;
    element?: string;
    customMedia?: boolean;
    customProperty?: boolean;
  };
  options?: {
    mediaQuery?: boolean;
    resolution?: boolean;
    minWidth?: boolean;
    maxWidth?: boolean;
  };
}

You could validate your configuration files with the help of JSON Schema Store and e.g Visual Studio Code YAML Extension.

To respect your local Prettier formatting rules please add the path to the configuration file to prettier.path.

Just run yarn drupal-breakpoints-css start or npm run drupal-breakpoints-css start. Thats it :)

# Durpal breakpoints file
theme_name.s:
  label: small
  mediaQuery: "only screen and (max-width: 47.9375rem)"
  weight: 0
  multipliers:
    - 1x
    - 2x
theme_name.md:
  label: medium
  mediaQuery: "only screen and (min-width: 48rem) and (max-width: 63.9375rem)"
  weight: 2
  multipliers:
    - 1x
    - 2x
theme_name.lg:
  label: large
  mediaQuery: "only screen and (min-width: 64rem) and (max-width: 89.9375rem)"
  weight: 3
  group: theme_name.group
  multipliers:
    - 1x
    - 2x

/* Generated CSS file */
@custom-media --Themename-small-mediaQuery (only screen and (max-width: 47.9375rem));
@custom-media --Themename-small-resolution (resolution: 2x);
@custom-media --Themename-small-maxWidth (max-width: 47.9375rem);

:root {
  --ThemeName-small-mediaQuery: "only screen and (max-width: 47.9375rem)";
  --ThemeName-small-resolution: "2x";
  --ThemeName-small-maxWidth: "47.9375rem";
}

// Generated JS file
const BREAKPOINTS = {
  "ThemeName-small-mediaQuery--raw": "only screen and (max-width: 47.9375rem)",
  "ThemeName-small-resolution--raw": "2x",
  "ThemeName-small-resolution": "resolution: 2x",
  "ThemeName-small-maxWidth--raw": "47.9375rem",
  "ThemeName-small-maxWidth": "max-width: 47.9375rem",
};
export default BREAKPOINTS;

This Script uses open source software and would not have been possible without the excellent work of the Drupal, Eslint, deepmerge and Prettier teams! Thanks a lot!