append-styles

Append CSS in a given order

2.2.1
latest
Source
npm

Version published: 2 years ago

Weekly downloads: 99; decreased by-1%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

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 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:

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:

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>
  <head>
    <style data-append-styles="module-a">body { background:blue; }</style>
    <style data-append-styles="module-a">h1 { color:papayawhip; }</style>
    <style data-append-styles="module-b">body { background:red; }</style>
    <style data-append-styles="module-b">h1 { color:black; }</style>
    ...
  </head>
  ...
<html>

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.

Keywords

FAQs

What is append-styles?

Is append-styles popular?

Is append-styles well maintained?

Package last updated on 14 Feb 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install