Basic Css Loader

bundle.js

    (function(modules) {
      function require(id) {
        const [fn, mapping] = modules[id];

        function localRequire(name) {
          return require(mapping[name]);
        }

        const module = { exports : {} };

        fn(localRequire, module, module.exports);

        return module.exports;
      }

      require(0);
    })({0: [
      function (require, module, exports) { "use strict";

var _message = require("./message.js");

var _message2 = _interopRequireDefault(_message);

var _styles = require("./styles.css");

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_message2.default);
console.log(_styles2.default); },
      {"./message.js":1,"./styles.css":2},
    ],1: [
      function (require, module, exports) { "use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _name = require("./name.js");

exports.default = "hello " + _name.name + "!"; },
      {"./name.js":3},
    ],2: [
      function (require, module, exports) { "use strict";

var styleTag = document.createElement('style');
var stylesTextNode = document.createTextNode('.KLZhJ2HH9npPuMDEOHLOsNqKesMbUaH4lAImnKnJpaE={color:#ff1414}.YKy08I8kjsFhtsaxcCM9zAITF6317fPrhTn/WaicTO0={color:#ededed}.YKy08I8kjsFhtsaxcCM9zAITF6317fPrhTn/WaicTO0= .KLZhJ2HH9npPuMDEOHLOsNqKesMbUaH4lAImnKnJpaE={color:white}');
styleTag.appendChild(stylesTextNode);
var head = document.getElementsByTagName('head')[0];
head.appendChild(styleTag);

module.exports = {
  'abc': 'KLZhJ2HH9npPuMDEOHLOsNqKesMbUaH4lAImnKnJpaE=', 'xyz': 'YKy08I8kjsFhtsaxcCM9zAITF6317fPrhTn/WaicTO0='
}; },
      {},
    ],3: [
      function (require, module, exports) { "use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var name = exports.name = 'world'; },
      {},
    ],})
  

css-loader.js

const crypto = require('crypto');
const csstree = require('css-tree');

const styleInjectionCode = rawCss => `
 var styleTag = document.createElement('style');
 var stylesTextNode = document.createTextNode('${rawCss}');
 styleTag.appendChild(stylesTextNode);
 var head = document.getElementsByTagName('head')[0];
 head.appendChild(styleTag);
`;

const localIdsExportCode = localIds => {
  const classExportsString = Object.keys(localIds)
    .map(className => {
      return `'${className}': '${localIds[className]}'`;
    })
    .join(',');
  return `
  module.exports = {
    ${classExportsString}
  };
 `;
};

function loader(filename, content) {
  const localIds = {};

  const ast = csstree.parse(content);

  csstree.walk(ast, function(node) {
    if (node.type === 'ClassSelector') {
      const hash = crypto.createHash('sha256');
      hash.update(`${filename}-${node.name}`);
      localIds[node.name] = hash.digest('base64');
      node.name = localIds[node.name];
    }
  });

  const transformedCss = csstree.generate(ast);

  const result = `
    ${styleInjectionCode(transformedCss)}
    ${localIdsExportCode(localIds)}
  `;
  return result;
}

module.exports = loader;

entry.js

import message from './message.js';
import styles from './styles.css';

console.log(message);
console.log(styles);

minipack.js

/* code additions to minipack.js */

// Read the content of the file as a string.
let content = fs.readFileSync(filename, 'utf-8');

// comment would be here explaining how the file loader process works
if(/\.css$/.test(filename)){
  content = cssLoader(filename, content);
}

styles.css

.abc {
  color: #ff1414;
}

.xyz {
  color: #ededed;
}

.xyz .abc {
  color: white;
}