https://github.com/allnulled/v-descriptor
Inject CSS classes with meaning.
https://github.com/allnulled/v-descriptor
Last synced: about 2 months ago
JSON representation
Inject CSS classes with meaning.
- Host: GitHub
- URL: https://github.com/allnulled/v-descriptor
- Owner: allnulled
- License: other
- Created: 2025-01-26T02:01:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-24T17:50:18.000Z (about 1 year ago)
- Last Synced: 2025-04-12T06:39:13.868Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://npmjs.com/@allnulled/v-descriptor
- Size: 105 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# v-descriptor
Inject CSS classes with meaning. For vue.js (v2).
## Installation
```html
```
## Usage
The current test goes as follows:
```js
window.stylingDescriptor = {
titulo: ["fondoNegro", "letraBlanca"],
principal: ["letraGrande"],
emergencia: ["fondoRojoImportante"]
};
Vue.component("app", {
template: `
Este mensaje debería verse en rojooo
`
});
const app = new Vue({
render: h => h(Vue.options.components.app),
}).$mount("#app");
```
This will make reflect `fondoNegro letraBlanca letraGrande fondoRojoImportante` as classes.
You can use it recursively, and only the *non-solved keys* will become applied as classes, **(caution:) unless it contains `.` in the key**. This allows you to use `.` as namespacer for document sections, which makes sense, as the names of these sections will be absolutely **virtual** and will have no direct interaction with the DOM in any step.
Only the unsolved keys that do not contain `.` will be applied as class.
With this rule, and aware that you have to `"'whatever w2 w3'"` (so, `"'` to open and `'"` to close), you can go straightforward.