New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

style-loader-extra

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

style-loader-extra

style loader module for webpack, fork from webpack-contrib/style-loader

1.0.2
latest
Source
npm

Version published: 6 years ago

Maintainers: 1

Created: 6 years ago

Source

Style Loader

style-loader

Adds CSS to the DOM by injecting a <style> tag

Getting Started

To begin, you'll need to install css-loader:

npm install --save-dev style-loader

It's recommended to combine style-loader with the css-loader

Then add the loader to your webpack config. For example:

style.css

body {
  background: green;
}

component.js

import style from './style.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      },
    ],
  },
};

`Locals (CSS Modules)`

When using local scoped CSS the module exports the generated identifiers (locals):

component.js

import style from './file.css';

style.className === 'z849f98ca812';

`Url`

It's also possible to add a URL <link href="path/to/file.css" rel="stylesheet"> instead of inlining the CSS {String} with <style></style> tag.

import url from 'file.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader/url' }, { loader: 'file-loader' }],
      },
    ],
  },
};

<link rel="stylesheet" href="path/to/file.css" />

`Useable`

The style-loader injects the styles lazily making them useable on-demand via style.use() / style.unuse()

By convention the Reference Counter API should be bound to .useable.css and the .css should be loaded with basic style-loader usage.(similar to other file types, i.e. .useable.less and .less).

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.useable\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      },
      {
        test: /\.useable\.css$/,
        use: [
          {
            loader: 'style-loader/useable',
          },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

`Reference Counter API`

component.js

import style from './file.css';

style.use(); // = style.ref();
style.unuse(); // = style.unref();

Styles are not added on import/require(), but instead on call to use/ref. Styles are removed from page if unuse/unref is called exactly as often as use/ref.

⚠️ Behavior is undefined when unuse/unref is called more often than use/ref. Don't do that.

Options

Name	Type	Default	Description
`hmr`	`{Boolean}`	`true`	Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)
`base`	`{Number}`	`true`	Set module ID base (DLLPlugin)
`attributes`	`{Object}`	`{}`	Add custom attributes to `<style></style>`
`insertAt`	`{String\|Object}`	`bottom`	Inserts `<style></style>` at the given position
`insertInto`	`{String\|Function}`	`<head>`	Inserts `<style></style>` into the given position
`singleton`	`{Boolean}`	`undefined`	Reuses a single `<style></style>` element, instead of adding/removing individual elements for each required module.
`sourceMap`	`{Boolean}`	`false`	Enable/Disable Sourcemaps

`hmr`

Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added. This could be used for non local development and production.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              hmr: false,
            },
          },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

`base`

This setting is primarily used as a workaround for css clashes when using one or more DllPlugin's. base allows you to prevent either the app's css (or DllPlugin2's css) from overwriting DllPlugin1's css by specifying a css module id base which is greater than the range used by DllPlugin1 e.g.:

webpack.dll1.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
          },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

webpack.dll2.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader', options: { base: 1000 } },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

webpack.app.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader', options: { base: 2000 } },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

`attributes`

If defined, style-loader will attach given attributes with their values on <style> / <link> element.

component.js

import style from './file.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader', options: { attributes: { id: 'id' } } },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

<style id="id"></style>

`Url`

component.js

import link from './file.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader/url', options: { attributes: { id: 'id' } } },
          { loader: 'file-loader' },
        ],
      },
    ],
  },
};

`insertAt`

By default, the style-loader appends <style> elements to the end of the style target, which is the <head> tag of the page unless specified by insertInto. This will cause CSS created by the loader to take priority over CSS already present in the target. To insert style elements at the beginning of the target, set this query parameter to 'top', e.g

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top',
            },
          },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

A new <style> element can be inserted before a specific element by passing an object, e.g.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: {
                before: '#id',
              },
            },
          },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

`insertInto`

By default, the style-loader inserts the <style> elements into the <head> tag of the page. If you want the tags to be inserted somewhere else you can specify a CSS selector for that element here. If you target an IFrame make sure you have sufficient access rights, the styles will be injected into the content document head.

You can also pass function to override default behavior and insert styles in your container, e.g

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insertInto: () => document.querySelector('#root'),
            },
          },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

Using function you can insert the styles into a ShadowRoot, e.g

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insertInto: () => document.querySelector('#root').shadowRoot,
            },
          },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

`singleton`

If defined, the style-loader will reuse a single <style></style> element, instead of adding/removing individual elements for each required module.

ℹ️ This option is on by default in IE9, which has strict limitations on the number of style tags allowed on a page. You can enable or disable it with the singleton option.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: 'style-loader', options: { singleton: true } },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
};

`sourceMap`

Enable/Disable source map loading

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: 'style-loader', options: { sourceMap: true } },
          { loader: 'css-loader', options: { sourceMap: true } },
        ],
      },
    ],
  },
};

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT

Keywords

webpack

FAQs

What is style-loader-extra?

Is style-loader-extra well maintained?

Package last updated on 30 Jul 2019

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

style-loader-extra

Style Loader

style-loader

Getting Started

Locals (CSS Modules)

Url

Useable

Reference Counter API

Options

hmr

base

attributes

Url

insertAt

insertInto

singleton

sourceMap

Contributing

License

Keywords

Related posts

Create React App Officially Deprecated Amid React 19 Compatibility Issues

Oracle Drags Its Feet in the JavaScript Trademark Dispute

`Locals (CSS Modules)`

`Url`

`Useable`

`Reference Counter API`

`hmr`

`base`

`attributes`

`Url`

`insertAt`

`insertInto`

`singleton`

`sourceMap`