{"id":19356505,"url":"https://github.com/factorial-io/drupal-breakpoints-css","last_synced_at":"2026-03-03T21:01:56.956Z","repository":{"id":59791380,"uuid":"533821861","full_name":"factorial-io/drupal-breakpoints-css","owner":"factorial-io","description":"Extract CSS custom properties and custom-media queries as well as a JavaScript config from Drupal's theme breakpoints","archived":false,"fork":false,"pushed_at":"2024-03-20T09:34:54.000Z","size":149,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-11-21T20:13:04.388Z","etag":null,"topics":["css","custom-media","custom-properties","drupal","mediaqueries","postcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/factorial-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-07T15:16:21.000Z","updated_at":"2024-03-20T08:20:06.000Z","dependencies_parsed_at":"2024-11-15T22:30:10.172Z","dependency_job_id":"a2e98e42-b109-47a9-ad99-2de3487a3ad1","html_url":"https://github.com/factorial-io/drupal-breakpoints-css","commit_stats":{"total_commits":54,"total_committers":2,"mean_commits":27.0,"dds":0.01851851851851849,"last_synced_commit":"c9156a0f0f364c6f84bec849d726d7a47360537f"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/factorial-io/drupal-breakpoints-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Fdrupal-breakpoints-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Fdrupal-breakpoints-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Fdrupal-breakpoints-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Fdrupal-breakpoints-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/factorial-io","download_url":"https://codeload.github.com/factorial-io/drupal-breakpoints-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/factorial-io%2Fdrupal-breakpoints-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30060631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","custom-media","custom-properties","drupal","mediaqueries","postcss"],"created_at":"2024-11-10T07:04:40.682Z","updated_at":"2026-03-03T21:01:56.940Z","avatar_url":"https://github.com/factorial-io.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drupal breakpoints to CSS\n\n\u003cimg\n  style=\"margin:2rem\"\n  height=\"60px\"\n  alt=\"Drupal Logo\"\n  src=\"https://www.drupal.org/files/Wordmark_blue_RGB.png\"\u003e\n\nTo 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.\n\nIf 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.\n\n## Installation\n\nInstall as a `devDependency` with `yarn` or `npm` like:\n\n```sh\nyarn add --dev @factorial/drupal-breakpoints-css\n# or\nnpm install --sav-dev @factorial/drupal-breakpoints-css\n```\n\n## Configuration\n\nIn your themes root folder, besides your already defined breakpoints file from Drupal, add a `breakpoints.config.yml` configuration file. The following properties are mandatory:\n\n```typescript\n// ./lib/types.d.ts\nexport interface UserConfig {\n  drupal: {\n    breakpointsPath: string;\n    themeName: string;\n  };\n  prettier?: {\n    configPath: string;\n  };\n  js?: {\n    enabled?: boolean;\n    path?: string;\n    type?: \"commonjs\" | \"module\";\n  };\n  css?: {\n    enabled?: boolean;\n    path?: string;\n    element?: string;\n    customMedia?: boolean;\n    customProperty?: boolean;\n  };\n  options?: {\n    mediaQuery?: boolean;\n    resolution?: boolean;\n    minWidth?: boolean;\n    maxWidth?: boolean;\n  };\n}\n```\n\n### Schema Validation\n\nYou 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).\n\n### Prettier\n\nTo respect your local Prettier formatting rules please add the path to the configuration file to `prettier.path`.\n\n## Usage\n\nJust run `yarn drupal-breakpoints-css start` or `npm run drupal-breakpoints-css start`. Thats it :)\n\n## Examples\n\n```yml\n# Durpal breakpoints file\ntheme_name.s:\n  label: small\n  mediaQuery: \"only screen and (max-width: 47.9375rem)\"\n  weight: 0\n  multipliers:\n    - 1x\n    - 2x\ntheme_name.md:\n  label: medium\n  mediaQuery: \"only screen and (min-width: 48rem) and (max-width: 63.9375rem)\"\n  weight: 2\n  multipliers:\n    - 1x\n    - 2x\ntheme_name.lg:\n  label: large\n  mediaQuery: \"only screen and (min-width: 64rem) and (max-width: 89.9375rem)\"\n  weight: 3\n  group: theme_name.group\n  multipliers:\n    - 1x\n    - 2x\n```\n\n```css\n/* Generated CSS file */\n@custom-media --Themename-small-mediaQuery (only screen and (max-width: 47.9375rem));\n@custom-media --Themename-small-resolution (resolution: 2x);\n@custom-media --Themename-small-maxWidth (max-width: 47.9375rem);\n\n:root {\n  --ThemeName-small-mediaQuery: \"only screen and (max-width: 47.9375rem)\";\n  --ThemeName-small-resolution: \"2x\";\n  --ThemeName-small-maxWidth: \"47.9375rem\";\n}\n```\n\n```js\n// Generated JS file\nconst BREAKPOINTS = {\n  \"ThemeName-small-mediaQuery--raw\": \"only screen and (max-width: 47.9375rem)\",\n  \"ThemeName-small-resolution--raw\": \"2x\",\n  \"ThemeName-small-resolution\": \"resolution: 2x\",\n  \"ThemeName-small-maxWidth--raw\": \"47.9375rem\",\n  \"ThemeName-small-maxWidth\": \"max-width: 47.9375rem\",\n};\nexport default BREAKPOINTS;\n```\n\n## Acknowledgements\n\nThis **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!\n\n## Sponsored by\n\n\u003ca href=\"https://factorial.io\"\u003e\u003cimg src=\"https://logo.factorial.io/color.png\" width=\"40\" height=\"56\" alt=\"Factorial\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffactorial-io%2Fdrupal-breakpoints-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffactorial-io%2Fdrupal-breakpoints-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffactorial-io%2Fdrupal-breakpoints-css/lists"}