open-index/open-npm huggingface dataset:
npm package: @macu/dynamic-stylesheet-js
Description: Dynamically render a document stylesheet
Author: Matt Cudmore
Latest version: 1.0.1

# @macu/dynamic-stylesheet-js

Dynamically render a document stylesheet.

Make sure you sanitize all user-supplied input that is included in stylesheet output.

## Rules

Rulesets are objects containing hierarchical CSS with selectors as keys to objects, and rules represented as `'propertyName': 'value'` entries.

If a nested selector does not begin with a combinator (`>`, `+`, or `~`) or pseudo class/element syntax (`:`, `::`), it is rendered with a descendent combinator (` `). Selectors can also begin with the optional `&` cursor to append to the current selector target component (example below).

Arrays are supported; entries may be either `'propertyName: value'` strings, `/* comments */`, or nested rulesets.

Comments may also appear as keys in object rulesets, where the value indicates whether to output the comment.

## Usage

[See demo](https://macu.github.io/dynamic-stylesheet-js/demo.html)

```js
var color = 'blue';
var rules = [
	'/* comments appear in innerHTML output */',
	'',
	{'#app': {
		'>header': {
			'/* conditional comment 1 */': true,
			'/* conditional comment 2 */': false, // omitted
			'padding': '10px 0',
			'background-color': 'aquamarine',
			'>h1': {
				'color': 'white',
			},
		},
		'p': {
			'color': color,
			'&.demo': {
				'font-weight': 'bold',
				'text-decoration': 'underline wavy',
				'test': null, // omitted
			},
		},
	}},
];
```

Using stylesheet API:

```js
var style = document.createElement('style');
style.type = 'text/css';
document.head.appendChild(style);
// style node must be present in the document before calling
DynamicStylesheet.addStylesheetRules(style, rules);
```

Using innerHTML:

```js
var style = document.createElement('style');
style.type = 'text/css';
// can set innerHTML before style node is present in the document
style.innerHTML = DynamicStylesheet.buildStylesheetCSS(rules);
document.head.appendChild(style);
```

Using convenience method:

```js
var style = DynamicStylesheet.appendStylesheet(document.head, rules);
```

Rendered stylesheet:

```css
<style type="text/css">
/* comments appear in innerHTML output */

#app>header {
	/* conditional comment 1 */
	padding: 10px 0;
	background-color: aquamarine;
}
#app>header>h1 {
	color: white;
}
#app p {
	color: blue;
}
#app p.demo {
	font-weight: bold;
	text-decoration: underline wavy;
}
</style>
```

## Testing

Build, start server, and access
[http://localhost:8080/demo.html](http://localhost:8080/demo.html)

```bash
npm run prod
python -m http.server 8080
```
npm package: @macu/dynamic-stylesheet-vue
Description: Dynamically render a document stylesheet through a Vue component
Author: Matt Cudmore
Latest version: 1.0.6

# @macu/dynamic-stylesheet-vue

Dynamically render a document stylesheet through a Vue component.

The component is rendered as a `<style>` element within a hidden `<span>` and re-rendered whenever the rules change.

Make sure you sanitize all user-supplied input that is included in stylesheet output.

## Props

| Prop | Description |
| --- | --- |
| rules | Object containing hierarchical CSS with selectors as keys to objects, and rules represented as `'propertyName': 'value'` entries. If a nested selector does not begin with a combinator (`>`, `+`, or `~`) or pseudo class/element syntax (`:`, `::`), it is rendered with a descendent combinator (` `). Selectors can also begin with the optional `&` cursor to append to the current selector target component (example below). Arrays are supported; entries may be either `'propertyName: value'` strings or nested objects. |
| inner-markup-output | Whether to render using `styleElement.innerHTML` instead of stylesheet API. This mode is used automatically when the stylesheet API is unavailable. |

## Usage

[See demo](https://macu.github.io/dynamic-stylesheet-vue/demo.html)

```vue
<template>
  <div id="app">
    <header>
      <h1>Demo</h1>
    </header>
    <p>App</p>
    <dynamic-stylesheet :rules="styleRules" :inner-markup-output="true"/>
  </div>
</template>

<script>
// Auto-registers dynamic-stylesheet component
import '@macu/dynamic-stylesheet-vue';

export default {
  computed: {
    styleRules() {
      return {
        '#app': {
          '>header': {
            'padding': '10px 0',
            'background-color': 'pink',
            '>h1': {
              'color': 'red',
            },
          },
          'p': [
            'color: blue',
            '&.demo': [
              '/* comments appear in innerHTML output */',
              'font-weight: bold',
            ],
          ],
        },
      };
    },
  },
};
</script>

<style lang="scss">
#app {
  >header {
    margin-bottom: 20px;
  }
}
</style>
```

Rendered stylesheet:

```css
<style type="text/css">
#app>header {
	padding: 10px 0;
	background-color: pink;
}
#app>header>h1 {
	color: red;
}
#app p {
	color: blue;
}
#app p.demo {
	/* comments appear in innerHTML output */
	font-weight: bold;
}
</style>
```

## Testing

Build, start server, and access
[http://localhost:8080/demo.html](http://localhost:8080/demo.html)

```bash
npm run prod
python -m http.server 8080
```