Drupal breakpoints to CSS

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.

Installation

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

Configuration

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;
  };
}

Schema Validation

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

Prettier

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

Usage

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

Examples

# 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;

Acknowledgements

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!

Sponsored by