https://github.com/sunesimonsen/append-styles

Append CSS in a given order
https://github.com/sunesimonsen/append-styles

Last synced: 1 day ago
JSON representation

Append CSS in a given order

• Host: GitHub
• URL: https://github.com/sunesimonsen/append-styles
• Owner: sunesimonsen
• License: other
• Created: 2017-03-29T12:49:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-14T11:03:45.000Z (over 1 year ago)
• Last Synced: 2024-09-16T08:13:23.459Z (17 days ago)
• Language: JavaScript
• Size: 245 KB
• Stars: 1
• Watchers: 3
• Forks: 2
• Open Issues: 9
• Metadata Files:
  • Readme: Readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# append-styles

This module will prepend style tags to the document head. The style tag will get

the given id and you can specify that the style tag should be placed before or

after another tag with a given id. This is useful if you create multiple

dependent modules that needs to injects CSS a specified order. If you don't need

that capability use [insert-css](https://www.npmjs.com/package/insert-css)

instead.

# Example

You have two modules A and B, where B dependents on A. Then you inject your

styles in the following way:

Module A:

```js

var appendStyles = require('append-styles');

appendStyles({

  css: 'body { background:blue; }',

  id: 'module-a',

  before: 'module-b'

});

appendStyles({

  css: 'h1 { color:papayawhip; }',

  id: 'module-a',

  before: 'module-b'

});

```

Module B:

```js

var appendStyles = require('append-styles');

appendStyles({

  css: 'body { background:red; }',

  id: 'module-b',

  after: 'module-a'

});

appendStyles({

  css: 'h1 { color:black; }',

  id: 'module-b',

  after: 'module-a'

});

```

No matter what order you load the modules in, you will get the following styles

injected:

```html

  

    body { background:blue; }

    h1 { color:papayawhip; }

    body { background:red; }

    h1 { color:black; }

    ...

  

  ...

```

# API

## var styleElement = appendStyles(css, options);

* `options.css` - the css to be appended.

* `options.id` - the append styles data id of the script tag to append css to. The element will be created if it does not exist.

* `options.before` - the append styles data id of a script tag that this script tag should be created before.

* `options.after` - the append styles data id of a script tag that this script tag should be created after.

Notice that you have to specify either a `before` and `after`.