style loader for webpack with SSR support
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
Vitaliy Filippov d46ab05313 Add npm ignores 1 month ago
.github Add issue templates 5 years ago
fixtures finalized insertAt=top 6 years ago
test Fix tests 1 month ago
.gitignore fix(fixUrls): add param to fix relative urls (#186) 5 years ago
.npmignore Add npm ignores 1 month ago
.travis.yml test: unit tests for basic configurations 5 years ago
CHANGELOG.md chore(release): 0.16.1 5 years ago
LICENSE Add LICENSE file 5 years ago
README.md Rename to newer-universal-style-loader 1 month ago
addStyleUrl.js feat: Set custom attributes for tag in url mode (#198) 5 years ago
addStyles.js Remove global variable, add ID to style elements so server- and client-rendered match each other 1 month ago
fixUrls.js fix: match parens recursively on URLs to not fix embeded calls (#192) 5 years ago
index.js merge 0.16.1 style loader into simple-universal-style-loader 5 years ago
package.json Rename to newer-universal-style-loader 1 month ago
universal.js Remove global variable, add ID to style elements so server- and client-rendered match each other 1 month ago
url.js feat: Set custom attributes for tag in url mode (#198) 5 years ago
useable.js fix: negative refs (#122) 5 years ago

README.md

npm node

Simple Universal Style Loader

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

Install

npm install newer-universal-style-loader --save-dev

Usage

Documentation: Using loaders

Webpack Configuration

newer-universal-style-loader is a drop-in replacement for the usual style-loader.

It's recommended to combine it with the css-loader.

Example for Webpack 5 with CSS module support:

  module: {
    rules: [ {
      test: /\.css$/,
      use: [ {
        loader: "newer-universal-style-loader",
        options: { singleton: true }
      }, {
        loader: "css-loader",
        options: {
          modules: { localIdentName: "[name]--[local]--[hash:base64:8]" },
          sourceMap: true,
          importLoaders: 1
        }
      } ]
    } ]
  },

Then, in your JS code:

import css from './file.css';

This will add rules in file.css to the document.

Server environment

On server side we can't load styles into the DOM but to collect them and use when assembling the layout.

Use getStyles() to get captured styles in the form of a <style> element ready to be added into <head>.

Use this piece of code somewhere in your server-side bundle:

import universal from 'newer-universal-style-loader/universal';

const html = universal.getStyles();

Options

insertAt

By default, the 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.

insertInto

By default, the loader inserts the <style> elements into the <head> tag of the page. If you want the tags to be inserted somewhere else, e.g. into a ShadowRoot, you can specify a CSS selector for that element here, e.g. options: { insertInto: "#host::shadow>#root" }.

singleton

If defined, the loader will re-use a single <style> element, instead of adding/removing individual elements for each required module. This option is ON by default. To disable it, set options: { singleton: false }.

convertToAbsoluteUrls

If convertToAbsoluteUrls and sourceMaps are both enabled, relative urls will be converted to absolute urls right before the css is injected into the page. This resolves an issue where relative resources fail to load when source maps are enabled.

attrs

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

Note about source maps support and assets referenced with url: when style loader is used with ?sourceMap option, the CSS modules will be generated as Blobs, so relative paths don't work (they would be relative to chrome:blob or chrome:devtools). In order for assets to maintain correct paths setting output.publicPath property of webpack configuration must be set, so that absolute paths are generated. Alternatively you can enable the convertToAbsoluteUrls option mentioned above.

Contributing

Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling npm test.

Maintainer

Vitaliy Filippov https://github.com/vitalif

Also contains code authored by:

LICENSE

MIT