Cannot get html-webpack-inline-source-plugin to inline css

Ive have been reading everything and still have no idea why i cannot get my css to be built inline. No build errors. The html file builds to dist and the svg inlines work, but the css link tag does does get inlined during build. Any help would be greatly appreciated. Here's what I have.

webpack.config.js

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin')
const path = require('path')

module.exports = {
  entry: {
    client: ['./src/client/index.js']
  },
  output: {
    path: path.resolve(__dirname, '../..', 'dist', 'client'),
    filename: '[name].js',
    publicPath: '/'
  },
  module: {
    rules: []
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'error.html',
      template: 'src/client/error.html',
      inlineSource: '.(js|css)$' // embed all javascript and css inline
    }),
    new HtmlWebpackInlineSourcePlugin(),
    new HtmlWebpackInlineSVGPlugin({
      runPreEmit: true
    })
  ]
}

error.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Edwin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/client/assets/css/styles.css">
  </head>
  <body>
    <div class="logo">
        <img inline src="src/client/assets/svg/logo.svg">
    </div>
    <div class="error__container">
      <div class="svg__container">
          <img inline src="src/client/assets/svg/server_error.svg">
      </div>
      <div class="info__container">
        <h1 class="error__code">404</h1>
        <h2 class="error__message">Page Not Found</h2>
        <p class="error__desc">The route you have requested could not be resolved</p>
        <div class="back__button">try again</div>
      </div>
    </div>
  </body>
</html>

file structure

src
----client
----|---assets
----|---|---css
----|---|---|---styles.css
----|---|---svg
----|---|---|---logo.svg
----|---|---|---server_error.svg
----|---error.html
----|---index.js
----|---index.html

webpack output

Version: webpack 4.41.0
Child
    Hash: ef7b359fe84d3383bb7b
    Time: 3402ms
    Built at: 10/14/2019 3:25:50 PM
            Asset      Size  Chunks                   Chunk Names
        client.js  4.08 KiB  client  [emitted]        client
    client.js.map  3.51 KiB  client  [emitted] [dev]  client
       error.html  4.99 KiB          [emitted]
    Entrypoint client = client.js client.js.map
    [0] multi ./src/client/index.js 28 bytes {client} [built]
    [./src/client/index.js] 0 bytes {client} [built]
    Child html-webpack-plugin for "error.html":
         1 asset
        Entrypoint undefined = error.html
        [./node_modules/html-webpack-plugin/lib/loader.js!./src/client/error.html] 1.11 KiB {0} [built]
        [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
        [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
            + 1 hidden module