Skip to content

Commit

Permalink
refactor: use runtime message api for @import
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Jul 11, 2018
1 parent 2f769b3 commit e20ba8e
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 124 deletions.
6 changes: 3 additions & 3 deletions .eslintrc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ rules:
array-bracket-spacing: 'off'
array-callback-return: error
arrow-body-style: error
arrow-parens: error
arrow-parens: 'off'
arrow-spacing: error
block-scoped-var: 'off'
block-spacing:
Expand Down Expand Up @@ -90,7 +90,7 @@ rules:
no-bitwise: error
no-caller: error
no-catch-shadow: error
no-confusing-arrow: error
no-confusing-arrow: 'off'
no-continue: error
no-div-regex: error
no-duplicate-imports: error
Expand Down Expand Up @@ -176,7 +176,7 @@ rules:
no-useless-constructor: error
no-useless-escape: error
no-useless-rename: error
no-useless-return: error
no-useless-return: 'off'
no-var: 'off'
no-void: error
no-warning-comments: error
Expand Down
20 changes: 0 additions & 20 deletions lib/getImportPrefix.js
View file

This file was deleted.

100 changes: 41 additions & 59 deletions lib/loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/

const loaderUtils = require("loader-utils");
const postcss = require("postcss");
const plugin = require("./plugin");
const getImportPrefix = require("./getImportPrefix");
const SyntaxError = require("./SyntaxError");

module.exports = function(content, map, meta) {
Expand Down Expand Up @@ -42,7 +42,9 @@ module.exports = function(content, map, meta) {
const plugins = [
plugin({
url: options.url !== false,
import: options.import !== false
import: options.import !== false,
loaderContext: this,
importLoaders: options.importLoaders
})
];

Expand Down Expand Up @@ -71,52 +73,13 @@ module.exports = function(content, map, meta) {
postcss(plugins)
.process(content, postcssOptions)
.then(result => {
if (meta && meta.messages) {
result.messages = result.messages.concat(meta.messages);
}

let cssAsString = JSON.stringify(result.css);
let imports = "";
let exports = "";
let urlEscapeHelperCode = "";

if (options.import !== false) {
const alreadyImported = {};
imports = result.messages
.filter(message => message.type === "at-rule-import")
.filter(message => {
if (!message.mediaQuery) {
if (alreadyImported[message.url]) {
return false;
}

alreadyImported[message.url] = true;
}

return true;
})
.map(message => {
if (!loaderUtils.isUrlRequest(message.url)) {
return (
"exports.push([module.id, " +
JSON.stringify("@import url(" + message.url + ");") +
", " +
JSON.stringify(message.mediaQuery) +
"]);"
);
}

// for importing CSS
var importUrlPrefix = getImportPrefix(this, options);
var importUrl = importUrlPrefix + message.url;

return (
"exports.i(require(" +
loaderUtils.stringifyRequest(this, importUrl) +
"), " +
JSON.stringify(message.mediaQuery) +
");"
);
})
.join("\n");
}

if (options.url !== false) {
urlEscapeHelperCode =
"var runtimeEscape = require(" +
Expand All @@ -142,6 +105,27 @@ module.exports = function(content, map, meta) {
});
}

let runtime = "";

if (result.messages && result.messages.length > 0) {
runtime = result.messages
.filter(message => (message.type === "runtime" ? message : false))
.reduce((initialValue, message) => {
try {
message =
typeof message.runtimeCode === "function"
? message.runtimeCode(this)
: message.runtimeCode;

initialValue += message;
} catch (err) {
this.emitError(err);
}

return initialValue;
}, "");
}

if (sourceMap && result.map) {
map = result.map.toJSON();

Expand All @@ -162,33 +146,31 @@ module.exports = function(content, map, meta) {
map = JSON.stringify(map);
}

const runtimeCode = `module.exports = exports = require(${loaderUtils.stringifyRequest(
this,
require.resolve("./runtime.js")
)})(${!!sourceMap});\n`;
const moduleCode = `// CSS Module\nexports.push([module.id, ${cssAsString}, ""${
map ? `,${map}` : ""
}]);\n`;
const importsCode = imports ? `// CSS Imports\n${imports}\n` : "";
// Todo need save backward compatibility with old `style-loader` and exports.locals
const exportsCode = exports ? `// CSS Exports\n${exports}\n` : false;

cb(
null,
[
urlEscapeHelperCode,
runtimeCode,
importsCode,
moduleCode,
exportsCode
`module.exports = exports = require(${loaderUtils.stringifyRequest(
this,
require.resolve("./runtime.js")
)})(${!!sourceMap});\n`,
runtime ? `// CSS Exports\n${runtime}\n` : "",
`// CSS Module\nexports.push([module.id, ${cssAsString}, ""${
map ? `,${map}` : ""
}]);\n`
].join("\n")
);

return;
})
.catch(err => {
if (err.file) {
this.addDependency(err.file);
}

cb(err.name === "CssSyntaxError" ? new SyntaxError(err) : err);

return;
});
};
61 changes: 50 additions & 11 deletions lib/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,28 @@ const loaderUtils = require("loader-utils");

const pluginName = "postcss-css-loader";

function getImportPrefix(loaderContext, importLoaders) {
if (importLoaders === false) {
return "";
}

const importLoadersValue = parseInt(importLoaders, 10) || 0;
const loadersRequest = loaderContext.loaders
.slice(
loaderContext.loaderIndex,
loaderContext.loaderIndex + 1 + importLoadersValue
)
.map(x => x.request)
.join("!");

return "-!" + loadersRequest + "!";
}

module.exports = postcss.plugin(pluginName, function(options) {
return function(css, result) {
if (options.import) {
const alreadyImported = {};

css.walkAtRules(/^import$/i, function(rule) {
const parsedValue = valueParser(rule.params);

Expand Down Expand Up @@ -35,20 +54,39 @@ module.exports = postcss.plugin(pluginName, function(options) {
return;
}

const mediaQuery = valueParser
.stringify(parsedValue.nodes.slice(1))
.trim();

let runtimeCode = "";

if (loaderUtils.isUrlRequest(url)) {
url = loaderUtils.urlToRequest(url);

const importUrlPrefix = getImportPrefix(
options.loaderContext,
options.importLoaders
);

runtimeCode = `exports.i(require(${loaderUtils.stringifyRequest(
options.loaderContext,
importUrlPrefix + url
)}), ${JSON.stringify(mediaQuery)});\n`;
} else {
runtimeCode = `exports.push([module.id, ${JSON.stringify(
"@import url(" + url + ");"
)}, ${JSON.stringify(mediaQuery)}]);`;
}

const mediaQuery = valueParser
.stringify(parsedValue.nodes.slice(1))
.trim();
if (!alreadyImported[url]) {
result.messages.push({
pluginName,
type: "runtime",
runtimeCode
});

result.messages.push({
pluginName,
type: "at-rule-import",
url: url,
mediaQuery: mediaQuery
});
alreadyImported[url] = true;
}

rule.remove();
});
Expand Down Expand Up @@ -92,7 +130,8 @@ module.exports = postcss.plugin(pluginName, function(options) {
node.after = "";

const requestedURL = loaderUtils.urlToRequest(URLValue);
const placeholder = "___CSS_LOADER_IMPORT_URL_PLACEHOLDER___" + index + "___";
const placeholder =
"___CSS_LOADER_IMPORT_URL_PLACEHOLDER___" + index + "___";

URLNode.value = placeholder;
// Strip quotes, they will be re-added if the module needs them
Expand All @@ -105,7 +144,7 @@ module.exports = postcss.plugin(pluginName, function(options) {
url: requestedURL
});

index++;
index += 1;

return false;
})
Expand Down
Loading

0 comments on commit e20ba8e

Please sign in to comment.