Webpack css-in-js plugin

css-in-js-plugin.ts

import { Plugin, Compiler } from 'webpack';
import { ConcatSource } from 'webpack-sources';

const loaderUtils = require('loader-utils');
const Chunk = require('webpack/lib/Chunk');

import { storeInstance } from '../store';
import { generateCss } from '../../generator';
import { StylesDescriptor } from '../../generator/utils';

export class CSSInJSPlugin implements Plugin {
  public apply(compiler: Compiler) {
    compiler.hooks.thisCompilation.tap(this.constructor.name, (compilation) => {
      compilation.hooks.additionalAssets.tap(this.constructor.name, () => {
        const styleDescriptors = storeInstance.getStyles();
        const styleDescriptorsWithSortedStyles = Object.keys(styleDescriptors)
          .sort()
          .reduce<{ [key: string]: StylesDescriptor }>((result, styleDescriptorHash) => {
            result[styleDescriptorHash] = styleDescriptors[styleDescriptorHash];
            return result;
          }, {});
        const rtlStyles = generateCss(styleDescriptorsWithSortedStyles, 'rtl');
        const ltrStyles = generateCss(styleDescriptorsWithSortedStyles, 'ltr');

        const rtlChunk = new Chunk('stylesRtl');
        const ltrChunk = new Chunk('stylesLtr');

        const ltrFileName = loaderUtils.interpolateName({}, 'styles.ltr.[contenthash].css', {
          content: ltrStyles,
        });
        const rtlFileName = loaderUtils.interpolateName({}, 'styles.rtl.[contenthash].css', {
          content: rtlStyles,
        });
        ltrChunk.ids = [];
        // @TODO change types
        (ltrChunk.files as any).add(ltrFileName);
        rtlChunk.ids = [];
        // @TODO change types
        (rtlChunk.files as any).add(rtlFileName);

        // Add renderedSprite to compilation resources
        // @TODO use https://github.com/webpack/webpack-sources
        const ltrSource = new ConcatSource();
        ltrSource.add(ltrStyles);

        compilation.assets[ltrFileName] = ltrSource;

        // @TODO change types
        (compilation.chunks as any).add(ltrChunk);

        const rtlSource = new ConcatSource();
        rtlSource.add(rtlStyles);

        compilation.assets[rtlFileName] = rtlSource;

        // @TODO change types
        (compilation.chunks as any).add(rtlChunk);
      });
    });
  }
}