Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/factorial-io/drupal-breakpoints-css

Extract CSS custom properties and custom-media queries as well as a JavaScript config from Drupal's theme breakpoints
https://github.com/factorial-io/drupal-breakpoints-css

css custom-media custom-properties drupal mediaqueries postcss

Last synced: 5 days ago
JSON representation

Extract CSS custom properties and custom-media queries as well as a JavaScript config from Drupal's theme breakpoints

Awesome Lists containing this project

README 

        
# Drupal breakpoints to CSS



Drupal Logo



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`](https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media) or [PostCSS](https://github.com/postcss/postcss) with [Custom Media](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-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:



```sh

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:



```typescript

// ./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](https://www.schemastore.org/json) and e.g [Visual Studio Code](https://code.visualstudio.com/) [YAML Extension](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml).



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



```yml

# 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

```



```css

/* 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";

}

```



```js

// 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](https://www.drupal.org), [Eslint](https://babeljs.io/team), [deepmerge](https://github.com/TehShrike/deepmerge) and [Prettier](https://unifiedjs.com/community/member/) teams! Thanks a lot!



## Sponsored by



Factorial