{"id":20227143,"url":"https://github.com/imrdjai/dynamo-css","last_synced_at":"2026-05-08T02:10:55.716Z","repository":{"id":57217789,"uuid":"298065247","full_name":"iMrDJAi/dynamo-css","owner":"iMrDJAi","description":"Make your css variables more dynamic and relative with dynamo-css!","archived":false,"fork":false,"pushed_at":"2021-04-15T11:44:18.000Z","size":32,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-15T11:48:57.707Z","etag":null,"topics":["css","css-custom-properties","css-in-js","css-variables","dynamo-css","javascript","theme","theming"],"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/iMrDJAi.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}},"created_at":"2020-09-23T18:52:10.000Z","updated_at":"2021-04-15T11:44:20.000Z","dependencies_parsed_at":"2022-08-28T21:40:37.532Z","dependency_job_id":null,"html_url":"https://github.com/iMrDJAi/dynamo-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMrDJAi%2Fdynamo-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMrDJAi%2Fdynamo-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMrDJAi%2Fdynamo-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iMrDJAi%2Fdynamo-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iMrDJAi","download_url":"https://codeload.github.com/iMrDJAi/dynamo-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241670155,"owners_count":20000327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","css-custom-properties","css-in-js","css-variables","dynamo-css","javascript","theme","theming"],"created_at":"2024-11-14T07:23:05.880Z","updated_at":"2026-05-08T02:10:55.665Z","avatar_url":"https://github.com/iMrDJAi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"***\n# dynamo-css \n[![npm](https://img.shields.io/npm/v/dynamo-css?color=red)](https://www.npmjs.com/package/dynamo-css)\n\nMake your css variables more dynamic and relative with dynamo-css!\n***\n\n## Table of Contents\n-   [Introduction](#introduction)\n-   [Demo](#demo)\n-   [Installation](#installation)\n-   [Usage](#usage)\n-   [Examples](#examples)\n-   [Limitations](#limitations)\n-   [Notes](#notes)\n-   [License](#license)\n\n## Introduction\n### What's That?\n\u003e CSS variables (or css custom properties) are so limited, and this should change!  \nThat's why **dynamo-css** exists, it aims to make them more dynamic, relative and useful for theming.  \nThis library powers css variables with javascript, it basically gives more control over their values.\n### How Does it Work?\n\u003e The system scans the whole document (including nested shadow roots) to extract used css variables from every stylesheet, style tag and style attribute, it also uses mutation observers and modified prototypes to listen for new ones.  \nThen it executes registered functions (created by user) on them to set values upon user needs, these functions get executed automatically when a new css variable found, or when a used relative css variable get updated.\n\n## Demo\nWorking on it! it will be available soon..\n\n## Installation\n### NPM:\nUse this command to install the node module:\n```shell\n$ npm i dynamo-css --save\n```\nThen simply require it:\n```js\nimport DynamoCSS from 'dynamo-css'\n//or\nconst DynamoCSS = require('dynamo-css')\n```\nThen bundle it with Webpack, Rollup or any javascript module bundler you prefer.\n### Browser:\nA bundled version is available and ready to use directly on browsers, you can get it from  [JsDeliver CDN](https://cdn.jsdelivr.net/gh/iMrDJAi/dynamo-css/dist/bundle.js):\n```html\n\u003cscript src='https://cdn.jsdelivr.net/gh/iMrDJAi/dynamo-css/dist/bundle.js'\u003e\u003c/script\u003e\n```\nYou can also download it for local use:\n```\n📄index.html\n📁js\n ↳ 📄bundle.js\n```\n```html\n\u003cscript src='./js/bundle.js'\u003e\u003c/script\u003e\n```\nIt will be declared as `window.DynamoCSS`:\n```js\nconst DynamoCSS = window.DynamoCSS\n```\n\n## Usage\n### Initialization\nCreate a new instance of `DynamoCSS` **once**:\n```js\nvar dc = new DynamoCSS()\n```\nLet's take a look on methods and properties that we have:\n| name | description |\n|:--:|:--:|\n| variables | An array of css variables that found inside the document and its nested shadow roots |\n| functions | An array of user registered functions that process the css variables |\n| registerFunction | A method to register functions |\n| unregisterFunction | A method to unregister functions |\n| getVariable | Get css variable value |\n| setVariable | Set css variable value |\n| scan  | Manually scan a parent (Document, ShadowRoot or Element) for css variables |\n| execute | Manually execute a registered function on a css variable  |\n| parseVariable | A css variables parser follows a special format |\n### registerFunction(id: string, fun: function)\nTo process css variables, you have to register your own custom functions to the system, each one should have a unique ID, here is an example:\n\n**To register a function:**\n```js\nvar fun = dc.registerFunction('cardHeight', (v, setValue, getVariable) =\u003e {\n    if (v === \"--card-height\") {\n        var width = getVariable('--card-width') // =\u003e 500px\n        var height = + width.slice(0, -2) / 2 + \"px\" // =\u003e 250px\n        setValue(height)\n    }\n}) // =\u003e Function\n```\n**Function parameters:**\n| name | description |\n|:--:|:--:|\n| v | The css variable string |\n| setValue | Set the value of the passed css variable|\n| getVariable | Get a css variable value relatively |\n\n**To see which relative variables used by the function (returned from `getVariable()`):**  \n**Note:** The system uses this array to execute the function again when a relative variable get updated.\n```js\nfun.relativeVariables // =\u003e [\"--card-width\"]\n```\n**To see which variables the function got executed on:**  \n**Note:** The system uses this array to make sure to execute every function on every variable once only.\n```js\nfun.executedVariables // =\u003e Array\n```\n**To unregister a function:**  \n**Note:** This will completely remove that function.\n```js\nfun.unregister() // =\u003e true\n```\n**To override a function:**  \n**Note:** This will remove the existing values inside `fun.relativeVariables` and `fun.executedVariables`.\n```js\nfun = dc.registerFunction('cardHeight', (v, setValue, getVariable) =\u003e {\n    if (v === \"--card-height\") {\n        var width = getVariable('--card-width') // =\u003e 500px\n        var height = + width.slice(0, -2) * 2 + \"px\" // =\u003e 1000px\n        setValue(height)\n    }\n}) // =\u003e Function\n```\n### unregisterFunction(id: string)\nThis is an alternative way to unregister a function, you have to pass that function ID as a parameter:\n```js\ndc.unregisterFunction('cardHeight') // =\u003e true\n```\n### getVariable(cssVariable: string)\nUse this one to get a value of a css variable of your choice.  \nUnless you want to keep your variable relative, you can use this one inside a function to keep it static.  \nThe function won't get executed again when the variable get updated.\n```js\ndc.getVariable('--card-width') // =\u003e 500px\n```\n### setVariable(cssVariable: string, value: string)\nUse this one to set the value of a css variable:  \n```js\ndc.setVariable('--card-width', '400px') // =\u003e true\n```\n### scan(parent: Document|ShadowRoot|Element)\nScan a parent (Document, ShadowRoot or Element) to find out more css variables.  \nUseful when adding style using a way cannot be detected by the system (see [Limitations](#limitations)).\n```js\ndc.scan(document)\n```\n### execute(fun: function, cssVariable: string)\nExecute a registered function on a css variable manually, this can be useful for more advanced use cases:\n```js\ndc.execute(fun, '--container-width')\n```\n### parseVariable(cssVariable: string)\nA css variables parser follows a special format works with Regex.  \nIt's made to keep processing css variables simpler and faster.\n\n**Format:**\n```css\n--var-name_key1--value1_key2--value2_key3--value3...\n```\n**Output:**\n```js\n{\n    name: \"var-name\",\n    string: \"--var-name_value1--prop1_value2--prop2_value3--prop3\",\n    properties: {\n        key1: \"value1\",\n        key2: \"value2\",\n        key3: \"value3\"\n    }\n}\n```\n**To keep it clear, just imagine it like that:**\n```css\n--var-name|key1:value1|key2:value2|key3:value3...\n```\n**Example:**\n```js\ndc.registerFunction('color', (v, setValue, getVariable) =\u003e {\n    //v =\u003e --color_hex--ef1\n    var variable = dc.parseVariable(v)\n    var colorHexRegex = /^[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3}$/\n    if (variable \u0026\u0026 variable.name === 'color') {\n        if (variable.properties.hex \u0026\u0026 variable.properties.hex.match(colorHexRegex)) {\n            setValue(\"#\" + variable.properties.hex) // =\u003e #ef1\n        }\n    }\n})\n```\n\n## Examples\n### Custom Colors:\nLet's say we have an element, with a blurple background color:\n```css\n.element {\n    background-color: blurple;\n}\n```\nBut wait.. blurple is a custom color, this will not gonna work.  \nWell, this one will work:\n```css\n.element {\n    background-color: var(--blurple);\n}\n```\nThis is a css variable, it should have a value with the correct color hex code, right?  \nTrue! it's **dynamo-css** time:\n```js\ndc.registerFunction('blurple', (v, setValue, getVariable) =\u003e {\n    if (v === \"--blurple\") setValue(\"#7289DA\") \n})\n```\nDone! it works like a charm!\n### More Examples Will Be Added Soon...\n\n## Limitations\n- The system cannot access to style loaded from a cross domain.\n- The system cannot access to style added by browser dev-tool (execpt if added to an element style attribute).\n- Currently, the system doesn't listen to new added or updated LINK tags at all, this will be added in future.\n- Currently, the system only defines css variables at `:root`, custom selectors will be added in future.\n\n## Notes\nHey! don't forget to star ⭐ this project 😅!\n\n## License\n[MIT](https://github.com/iMrDJAi/dynamo-css/blob/master/LICENSE) © [iMrDJAi](https://github.com/iMrDJAi)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimrdjai%2Fdynamo-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimrdjai%2Fdynamo-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimrdjai%2Fdynamo-css/lists"}