{"id":20284661,"url":"https://github.com/ovesco/vue-dynamic-style","last_synced_at":"2025-05-07T18:31:27.525Z","repository":{"id":57395701,"uuid":"222275485","full_name":"ovesco/vue-dynamic-style","owner":"ovesco","description":"Easy dynamic styling in your components","archived":true,"fork":false,"pushed_at":"2023-03-02T05:39:26.000Z","size":391,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-04T03:43:09.027Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ovesco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-11-17T16:13:29.000Z","updated_at":"2024-07-05T13:22:28.000Z","dependencies_parsed_at":"2024-11-14T18:46:40.772Z","dependency_job_id":null,"html_url":"https://github.com/ovesco/vue-dynamic-style","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"163058bbadb8b5c7df93421dbd31f0e501cd1b9f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovesco%2Fvue-dynamic-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovesco%2Fvue-dynamic-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovesco%2Fvue-dynamic-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ovesco%2Fvue-dynamic-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ovesco","download_url":"https://codeload.github.com/ovesco/vue-dynamic-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252934035,"owners_count":21827629,"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":[],"created_at":"2024-11-14T14:20:55.939Z","updated_at":"2025-05-07T18:31:27.177Z","avatar_url":"https://github.com/ovesco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-dynamic-style\n\nA Vue plugin to declare dynamic style in your components. This is a work in progress that I'm using in side projects in production. I believe it is stable enough for that (although it's quite simple).\n\n## Usage\nFirst install the library using npm `npm install -S vue-dynamic-style`.\nThen load the library\n```js\nimport Vue from 'vue';\nimport DynamicStyle from 'vue-dynamic-style';\n\nVue.use(DynamicStyle, { /* config, see below */ });\n```\n\n\nIn your components, you can now declare custom styles like this:\n```js\nexport default {\n  // Return a function if you use local state, store, computed, props...\n  // This enable the plugin to react to data change\n  styles() {\n    return {\n      scoped: true, // If you want your style to be scoped to this component\n      h1: {\n        background: 'red',\n        marginTop: `${this.foo}px`, // data or props\n        marginLeft: `${this.bar()}px`, // method\n        paddingTop: `${this.$store.state.baz}px`, // vuex\n      },\n      '.my-div': {\n        width: '100px',\n        \n        // Supports nested styles\n        'p.my-text': {\n          size: Math.random() * 10 + 'px',\n          \n          // And using the \u0026 cursor\n          '\u0026.danger': {\n            color: this.dangerColor,\n          },\n        },\n      }\n    };\n  },\n  \n  // Or simply declare an object if nothing is dynamically updated through your component's lifecycle\n  // But in this case you should simply style your components with normal CSS...\n  styles: {\n    h1: {\n      // ...\n    },      \n  },\n}\n```\n\n## How does it work\nWhenever you custom-style a component using this library, a new `\u003cstyle\u003e` node will be appended\nto your page body. This node will follow your component lifecycle, when it dies, it will be removed\nfrom the page.\n\nThis can result in quite a lot of `\u003cstyle\u003e` nodes being added, you can greatly minimize the amount\nby setting your styles as `scoped: false`. Whenever a component gets rendered, it will check if another component\nwith the exact same dynamic style is already rendered (so scoped must be false), and if so will simply do nothing.\n\nThis implies the following:\n1. If you remove a component whose dynamic style was rendered (an attached style node is loaded on page)\n2. The library will iterate over all visible components where a dynamic style exist to see if it's the same style\n3. If it finds one with same style which is rendered (should not happen but hey never too confident), does nothing\n4. Otherwise, takes the last \"candidat\" and forces it to render.\n\n## Manually updating a style\nIf you wish to manually update your component styles or adding dynamic rules, you can access\nthe `$styles` property which offers one \"public\" method:\n```js\nexport default {\n  methods: {\n    myMethod() {\n      this.$styles.update({ h1: { color: 'green' } });\n    },\n  },\n}\n```\n\nPlease note that using this will result in deep merging the defined style object (if any) with the given custom style before\nrendering it.\n\n## Configuration\nThe library can be easily customized with the following options.\n\n### scoped\nDefault: `false`\n\nIf the component's style is scoped or not. If true, a uniqid class is added to the component root node and all style target\nproperties will be prepended with this class. Please note that the additional class will be added to the `$el` node.\n```html\n\u003ctemplate\u003e\n    \u003c!-- this won't work --\u003e\n    \u003cdiv\u003e\n        \u003cdiv class=\"foo\"\u003e\n            \u003cp\u003esome text\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003c!-- this works --\u003e\n    \u003cdiv class=\"foo\"\u003e\n        \u003cp\u003esome text\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n```js\n{\n  '.foo': {\n    background: 'blue',\n    'p': {\n      color: 'red',\n    }\n  }\n}\n```\n\n### prefix\nDefault: `'ds-'`\nIf scoped, the random class will be prefixed with this string.\n\n### styleStringifier\nThe JS style object to CSS converter. It is lightweight and quite naive, doesn't check CSS rules validation or anything.\n```json\n{\n  \"h1\": {\n    \"color\": \"green\",\n    \"size\": \"10px\"    \n  },\n  \".div\": {\n    \"width\": \"calc(100% - 200px)\"\n  },\n  \".div \u003e .test foo + baz\": {\n    \"height\": \"3px\",\n  }\n}\n```\nWill be converted to\n```css\n h1 {\n   color: green;\n   size: 10px;\n } \n \n .div {\n   width: calc(100% - 200px);\n }\n \n .div \u003e .test foo + baz {\n   height: 3px;\n }\n```\n\n### Flattenner\nThe JS style object flattener. This allows you to write nested styles and use the `\u0026` operator easily as seen in the first example.\nIf you want to override it, you can provide a function which takes a single style object, and should return a two levels deep object.\n\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovesco%2Fvue-dynamic-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fovesco%2Fvue-dynamic-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovesco%2Fvue-dynamic-style/lists"}