WIP

Author: jquense

.eslintignore

@@ -0,0 +1,5 @@
+lib/
+node_modules/
+test/fixtures/
+test/integration/
+__file_snapshots__/

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "plugins": ["prettier"],
+  "extends": ["4catalyzer", "4catalyzer-jest", "prettier"],
+  "env": {
+    "node": true
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "global-require": "off",
+    "import/no-dynamic-require": "off"
+  }
+}

.gitignore

@@ -0,0 +1,60 @@
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+

.prettierignore

@@ -0,0 +1,7 @@
+**/coverage/**
+**/lib/**
+**/fixtures/**
+**/flow-typed/**
+**/node_modules/**
+**/CHANGELOG.md
+**/package.json

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+  - '10'
+  - '8'
+
+cache: yarn
+
+branches:
+  only:
+    - master

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 4Catalyzer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

getLocalName.js

@@ -0,0 +1,47 @@
+/** Taken from css-loader */
+
+const path = require('path');
+const cssesc = require('cssesc');
+const loaderUtils = require('loader-utils');
+
+// eslint-disable-next-line no-control-regex
+const filenameReservedRegex = /[<>:"/\\|?*\x00-\x1F]/g;
+// eslint-disable-next-line no-control-regex
+const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
+const reRelativePath = /^\.+/;
+
+module.exports = function getLocalName(
+  localName,
+  loaderContext,
+  loaderOptions,
+) {
+  const hashPrefix = loaderOptions.hashPrefix || '';
+  const context = loaderOptions.context || loaderContext.rootContext;
+  const request = path.relative(context || '', loaderContext.resourcePath);
+
+  // eslint-disable-next-line no-param-reassign
+  const content = `${hashPrefix + request}+${localName}`;
+
+  // Using `[path]` placeholder outputs `/` we need escape their
+  // Also directories can contains invalid characters for css we need escape their too
+  return cssesc(
+    loaderUtils
+      .interpolateName(
+        loaderContext,
+        loaderOptions.localIdentName || '[name]--[local]--[hash:base64:5]',
+        {
+          context,
+          content,
+          hashPrefix,
+          regexp: loaderOptions.localIdentRegExp || null,
+        },
+      )
+      // For `[hash]` placeholder
+      .replace(/^((-?[0-9])|--)/, '_$1')
+      .replace(filenameReservedRegex, '-')
+      .replace(reControlChars, '-')
+      .replace(reRelativePath, '-')
+      .replace(/\./g, '-'),
+    { isIdentifier: true },
+  ).replace(/\\\[local\\\]/gi, localName);
+};

index.js

@@ -0,0 +1,76 @@
+const Processor = require('@modular-css/processor');
+const path = require('path');
+const { promisify } = require('util');
+const { getOptions } = require('loader-utils');
+
+const getLocalName = require('./getLocalName');
+
+const PROCESSOR = Symbol('@modular-css processor');
+
+function getLoadFilePrefix(loaderContext) {
+  // loads a file with all loaders configured after this one
+  const loadersRequest = loaderContext.loaders
+    .slice(loaderContext.loaderIndex + 1)
+    .map(x => x.request)
+    .join('!');
+
+  return `-!${require.resolve('./stringifyLoader')}!${loadersRequest}!`;
+}
+
+function loader(src) {
+  const { resourcePath, _compilation: compilation } = this;
+  const cb = this.async();
+
+  const options = getOptions(this) || {};
+  const dir = path.dirname(resourcePath);
+
+  const prefix = getLoadFilePrefix(this);
+
+  const loadModule = promisify((request, done) =>
+    this.loadModule(request, (err, moduleSource) => {
+      done(err, JSON.parse(moduleSource.toString()));
+    }),
+  );
+
+  if (!compilation[PROCESSOR]) {
+    compilation[PROCESSOR] = new Processor({
+      namer: (_, localName) => getLocalName(localName, this, options),
+      async loadFile(file) {
+        // console.log('LOAD');
+        const txt = await loadModule(`${prefix}${file}`);
+        // console.log(txt);
+        return txt;
+      },
+    });
+  }
+
+  const processor = compilation[PROCESSOR];
+
+  const process = async () => {
+    const { details, exports } = await processor.string(resourcePath, src);
+
+    const deps = processor.dependencies(resourcePath);
+
+    const icssImport = deps.reduce(
+      (acc, dep) => `${acc}@import "${path.relative(dir, dep)}";\n`,
+      '',
+    );
+
+    let icssExport = ':export {\n';
+    for (const [key, value] of Object.entries(exports)) {
+      icssExport += `  ${key}: ${value.join(' ')}\n`;
+    }
+    icssExport += '}';
+
+    return `${details.result.css}\n\n${icssImport}\n\n${icssExport}`;
+  };
+
+  return process().then(
+    r => cb(null, r),
+    err => {
+      cb(err);
+    },
+  );
+}
+
+module.exports = loader;

loader.js

@@ -0,0 +1,77 @@
+{
+  "name": "css-module-loader",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/4Catalyzer/css-module-loader.git"
+  },
+  "author": "4Catalyzer",
+  "license": "MIT",
+  "scripts": {
+    "format": "4c format src './*'",
+    "lint": "4c lint src './*'",
+    "release": "4c release",
+    "tdd": "jest --watch",
+    "test": "yarn lint && jest",
+    "testonly": "jest"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "prettier": "@4c/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*": [
+      "yarn 4c lint --fix",
+      "git add"
+    ]
+  },
+  "jest": {
+    "preset": "@4c/jest-preset",
+    "testEnvironment": "node",
+    "setupFilesAfterEnv": [
+      "./test/setup.js"
+    ],
+    "watchPathIgnorePatterns": [
+      "build",
+      "__file_snapshots__"
+    ]
+  },
+  "release": {},
+  "devDependencies": {
+    "@4c/cli": "^0.7.12",
+    "@4c/import-sort": "^4.3.3",
+    "@4c/jest-preset": "^1.3.0",
+    "@4c/prettier-config": "^1.1.0",
+    "css-loader": "^3.2.0",
+    "eslint": "^5.12.0",
+    "eslint-config-4catalyzer": "^0.7.0",
+    "eslint-config-4catalyzer-jest": "^1.1.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^22.1.2",
+    "eslint-plugin-prettier": "^3.0.1",
+    "husky": "^1.1.2",
+    "jest": "^24.0.0",
+    "jest-file-snapshot": "^0.3.7",
+    "lint-staged": "^8.1.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "prettier": "^1.15.3",
+    "sass": "^1.22.12",
+    "strip-ansi": "^5.2.0"
+  },
+  "dependencies": {
+    "@modular-css/processor": "^24.2.2",
+    "cssesc": "^3.0.0",
+    "fs-extra": "^8.1.0",
+    "loader-utils": "^1.2.3",
+    "memory-fs": "^0.4.1",
+    "sass-loader": "^8.0.0",
+    "webpack": "^4.40.2"
+  }
+}

package.json

@@ -0,0 +1,7 @@
+// Borrowed from less-loader, prevents webpack from complaining that the file type is unknown by ensuring any output is
+// turned into a valid JSON string
+function stringifyLoader(content) {
+  return JSON.stringify(content);
+}
+
+module.exports = stringifyLoader;

stringifyLoader.js

@@ -0,0 +1,27 @@
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["main"],{
+
+/***/ "./test/integration/common/externals.scss":
+/*!************************************************!*\
+  !*** ./test/integration/common/externals.scss ***!
+  \************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"toolbar":"externals--toolbar--3Adsi"};
+
+/***/ }),
+
+/***/ "./test/integration/externals.js":
+/*!***************************************!*\
+  !*** ./test/integration/externals.js ***!
+  \***************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+const styles = __webpack_require__(/*! ./common/externals.scss */ "./test/integration/common/externals.scss");
+
+
+/***/ })
+
+},[["./test/integration/externals.js","runtime~main"]]]);

test/__file_snapshots__/externals-js.js

@@ -0,0 +1,9 @@
+.externals--base--2HU_u {
+  color: blue;
+}
+.externals--button--3mvEh {
+  color: red;
+}
+.externals--toolbar--3Adsi > .externals--base--2HU_u.externals--button--3mvEh {
+  margin-left: 2rem;
+}