Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

html-inline-css-rspack-plugin

Package Overview
Dependencies
Maintainers
0
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

html-inline-css-rspack-plugin

☄️ A rspack plugin for convert external stylesheet to embedded stylesheet, aka document stylesheet

Source
npmnpm
Version
1.11.4
Version published
Weekly downloads
4
Maintainers
0
Weekly downloads
 
Created
Source

html-inline-css-rspack-plugin

Forked the html-inline-css-webpack-plugin and modified it to be compatible with rspack

MIT Licence PRs Welcome Total downloads npm version

Convert external stylesheet to embedded stylesheet, aka document stylesheet.

<link rel="stylesheet" /> => <style>...<style/>

Require rspack.CssExtractRspackPlugin and rspack.HtmlRspackPlugin

Install

NPM

npm i html-inline-css-rspack-plugin -D

Yarn

yarn add html-inline-css-rspack-plugin -D

Minimal example

// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const HtmlWebpackPlugin = require('html-webpack-plugin');
// const HTMLInlineCSSWebpackPlugin = require("html-inline-css-rspack-plugin").default;
import { rspack } from '@rspack/core';
import { HTMLInlineRspackPlugin } from 'html-inline-css-rspack-plugin'

module.exports = {
  plugins: [
    // new MiniCssExtractPlugin({
    //   filename: "[name].css",
    //   chunkFilename: "[id].css"
    // }),
    // new HtmlWebpackPlugin(),
    new rspack.CssExtractRspackPlugin({}),
    new rspack.HtmlRspackPlugin(options);
    new HTMLInlineRspackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
        type: 'javascript/auto',
      },
    ]
  }
}

Keep the original config as html-inline-css-webpack-plugin.

Config

interface Config {
  filter?: (fileName: string) => boolean
  styleTagFactory?: (params: { style: string }) => string
  leaveCSSFile?: boolean
  replace?: {
    target: string
    position?: 'before' | 'after'
    removeTarget?: boolean
  }
}

filter(optional)

filter?: (fileName: string) => boolean

Return true to make current file internal, otherwise ignore current file. Include both css file and html file name.

example
...
new HTMLInlineRspackPlugin({
  filter(fileName) {
    return fileName.includes('main');
  },
}),
...

styleTagFactory(optional)

styleTagFactory?: (params: { style: string }) => string

Used to customize the style tag.

example
...
  new HTMLInlineRspackPlugin({
    styleTagFactory({ style }) {
      return `<style type="text/css">${style}</style>`;
    },
  }),
...

leaveCSSFile(optional)

if true, it will leave CSS files where they are when inlining

replace(optional)

replace?: {
  target: string
  position?: 'before' | 'after' // default is 'before'
  removeTarget?: boolean // default is false
}

A config for customizing the location of injection, default will add internal style sheet before the </head>

target

A target for adding the internal style sheet

position(optional)

Add internal style sheet before/after the target

removeTarget(optional)

if true, it will remove the target from the output HTML

Please note that HTML comment is removed by default by the html-webpack-plugin in production mode. #16

example
<head>
    <!-- inline_css_plugin -->
    <style>
        /* some hard code style */
    </style>
</head>

...
  new HTMLInlineRspackPlugin({
    replace: {
      removeTarget: true,
      target: '<!-- inline_css_plugin -->',
    },
  }),
...
output:
<head>
    <style>
        /* style from *.css files */
    </style>
    <style>
        /* some hard code style */
    </style>
</head>

Keywords

rspack
inline
internal
embedded
document
css

FAQs

Package last updated on 20 Nov 2024

Did you know?

Socket

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

Related posts

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

Research

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

A malicious package uses a QR code as steganography in an innovative technique.

By Olivia Brown  -  Sep 22, 2025