Nerdiest Political Manifesto
    Have ideas to improve npm?Join in the discussion! »

    html-webpack-inject-style-plugin

    1.0.1 • Public • Published

    html-webpack-inject-style-plugin

    Enhances html-webpack-plugin functionality by changing the default inject assets method to dynamically inject css style assets.

    webpack-rtl-plugin is plugin to use to create a second css bundle, processed to be rtl, rtl css bundle default filename is xxx.rtl.css. When html-webpack-plugin will generate an HTML5 file, they are all included with tags in the HTML head by default.

    It is expected that the corresponding styles can be loaded according to the language type, instead of all styles being injected into index.html by default.This plugin is used to help us complete this work. It uses cookies to determine the language type, and then decides which style to load.

    Installation

    You must be running webpack on Node v4.0.0 or higher.

    Install the plugin with npm:

    $ npm install --save-dev html-webpack-inject-style-plugin

    Usage

    Require the plugin in your webpack config, and add the plugin to your webpack config as follows:

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const WebpackRTLPlugin = require('webpack-rtl-plugin');
    const HtmlWebpackInjectStylePlugin = require('html-webpack-inject-style-plugin');
    
    module.exports ={
      entry: './entry.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader'
            ]
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: 'style.css'
        }),
        new WebpackRTLPlugin(),
        new HtmlWebpackPlugin(),
        new HtmlWebpackInjectStylePlugin({
          // isRtl: /lang_type=ar/ // is a RegExp
          isRtl: function () {  // is a Function
            return true
          }
        })
      ]
    }

    The above configuration will inject a script in the head, When the page is parsed, execute to determine whether the current language is an RTL language, such as Arabic. If it is RTL language, inject xxx.rtl.css style otherwise inject xxx.css style.

    <html>
      <head>
        <meta charset="UTF-8">
        <title>Webpack App</title>
        <link href="style.css" rel="stylesheet">
        <link href="style.rtl.css" rel="stylesheet">
      </head>
      <body>
        <script type="text/javascript" src="main.js"></script>
      </body>
    </html>

    The above is the index.html file generated by default, it will be processed into the following

    <html>
      <head>
        <meta charset="UTF-8">
        <title>Webpack App</title>
        <script type="text/javascript">
          (function () {
            // if `isRTL` is a RegExp
            // var isRTL = new Function("return /lang_type=ar/.test(document.cookie)");
            // if `isRTL` is a Function
            var isRTL = new Function("return (function isRtl () {\n      return true;\n    })(window)");
            var head = document.querySelector('head');
            ["style"].forEach(function (href) {
              var fullhref = isRTL() ? href + '.rtl.css' : href + '.css';
              var linkTag = document.createElement("link");
              linkTag.rel = "stylesheet";
              linkTag.type = "text/css";
              linkTag.href = fullhref;
              head.appendChild(linkTag);
            })
          })();
        </script>
      </head>
      <body>
        <script type="text/javascript" src="main.js"></script>
      </body>
    </html>

    Options

    Name Type Default required Description
    isRtl {RegExp|Function} / true The regexp to use to process cookies to determine whether the current page is in RTL language, and you can also set it as a function, if the execution result of the function is true, it is a RTL language.

    Install

    npm i html-webpack-inject-style-plugin

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    18.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar