index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. "use strict";
  2. const selectorParser = require("postcss-selector-parser");
  3. const hasOwnProperty = Object.prototype.hasOwnProperty;
  4. function isNestedRule(rule) {
  5. if (!rule.parent || rule.parent.type === "root") {
  6. return false;
  7. }
  8. if (rule.parent.type === "rule") {
  9. return true;
  10. }
  11. return isNestedRule(rule.parent);
  12. }
  13. function getSingleLocalNamesForComposes(root, rule) {
  14. if (isNestedRule(rule)) {
  15. throw new Error(`composition is not allowed in nested rule \n\n${rule}`);
  16. }
  17. return root.nodes.map((node) => {
  18. if (node.type !== "selector" || node.nodes.length !== 1) {
  19. throw new Error(
  20. `composition is only allowed when selector is single :local class name not in "${root}"`
  21. );
  22. }
  23. node = node.nodes[0];
  24. if (
  25. node.type !== "pseudo" ||
  26. node.value !== ":local" ||
  27. node.nodes.length !== 1
  28. ) {
  29. throw new Error(
  30. 'composition is only allowed when selector is single :local class name not in "' +
  31. root +
  32. '", "' +
  33. node +
  34. '" is weird'
  35. );
  36. }
  37. node = node.first;
  38. if (node.type !== "selector" || node.length !== 1) {
  39. throw new Error(
  40. 'composition is only allowed when selector is single :local class name not in "' +
  41. root +
  42. '", "' +
  43. node +
  44. '" is weird'
  45. );
  46. }
  47. node = node.first;
  48. if (node.type !== "class") {
  49. // 'id' is not possible, because you can't compose ids
  50. throw new Error(
  51. 'composition is only allowed when selector is single :local class name not in "' +
  52. root +
  53. '", "' +
  54. node +
  55. '" is weird'
  56. );
  57. }
  58. return node.value;
  59. });
  60. }
  61. const whitespace = "[\\x20\\t\\r\\n\\f]";
  62. const unescapeRegExp = new RegExp(
  63. "\\\\([\\da-f]{1,6}" + whitespace + "?|(" + whitespace + ")|.)",
  64. "ig"
  65. );
  66. function unescape(str) {
  67. return str.replace(unescapeRegExp, (_, escaped, escapedWhitespace) => {
  68. const high = "0x" + escaped - 0x10000;
  69. // NaN means non-codepoint
  70. // Workaround erroneous numeric interpretation of +"0x"
  71. return high !== high || escapedWhitespace
  72. ? escaped
  73. : high < 0
  74. ? // BMP codepoint
  75. String.fromCharCode(high + 0x10000)
  76. : // Supplemental Plane codepoint (surrogate pair)
  77. String.fromCharCode((high >> 10) | 0xd800, (high & 0x3ff) | 0xdc00);
  78. });
  79. }
  80. const plugin = (options = {}) => {
  81. const generateScopedName =
  82. (options && options.generateScopedName) || plugin.generateScopedName;
  83. const generateExportEntry =
  84. (options && options.generateExportEntry) || plugin.generateExportEntry;
  85. const exportGlobals = options && options.exportGlobals;
  86. return {
  87. postcssPlugin: "postcss-modules-scope",
  88. Once(root, { rule }) {
  89. const exports = Object.create(null);
  90. function exportScopedName(name, rawName, node) {
  91. const scopedName = generateScopedName(
  92. rawName ? rawName : name,
  93. root.source.input.from,
  94. root.source.input.css,
  95. node
  96. );
  97. const exportEntry = generateExportEntry(
  98. rawName ? rawName : name,
  99. scopedName,
  100. root.source.input.from,
  101. root.source.input.css,
  102. node
  103. );
  104. const { key, value } = exportEntry;
  105. exports[key] = exports[key] || [];
  106. if (exports[key].indexOf(value) < 0) {
  107. exports[key].push(value);
  108. }
  109. return scopedName;
  110. }
  111. function localizeNode(node) {
  112. switch (node.type) {
  113. case "selector":
  114. node.nodes = node.map((item) => localizeNode(item));
  115. return node;
  116. case "class":
  117. return selectorParser.className({
  118. value: exportScopedName(
  119. node.value,
  120. node.raws && node.raws.value ? node.raws.value : null,
  121. node
  122. ),
  123. });
  124. case "id": {
  125. return selectorParser.id({
  126. value: exportScopedName(
  127. node.value,
  128. node.raws && node.raws.value ? node.raws.value : null,
  129. node
  130. ),
  131. });
  132. }
  133. case "attribute": {
  134. if (node.attribute === "class" && node.operator === "=") {
  135. return selectorParser.attribute({
  136. attribute: node.attribute,
  137. operator: node.operator,
  138. quoteMark: "'",
  139. value: exportScopedName(node.value, null, null),
  140. });
  141. }
  142. }
  143. }
  144. throw new Error(
  145. `${node.type} ("${node}") is not allowed in a :local block`
  146. );
  147. }
  148. function traverseNode(node) {
  149. switch (node.type) {
  150. case "pseudo":
  151. if (node.value === ":local") {
  152. if (node.nodes.length !== 1) {
  153. throw new Error('Unexpected comma (",") in :local block');
  154. }
  155. const selector = localizeNode(node.first);
  156. // move the spaces that were around the pseudo selector to the first
  157. // non-container node
  158. selector.first.spaces = node.spaces;
  159. const nextNode = node.next();
  160. if (
  161. nextNode &&
  162. nextNode.type === "combinator" &&
  163. nextNode.value === " " &&
  164. /\\[A-F0-9]{1,6}$/.test(selector.last.value)
  165. ) {
  166. selector.last.spaces.after = " ";
  167. }
  168. node.replaceWith(selector);
  169. return;
  170. }
  171. /* falls through */
  172. case "root":
  173. case "selector": {
  174. node.each((item) => traverseNode(item));
  175. break;
  176. }
  177. case "id":
  178. case "class":
  179. if (exportGlobals) {
  180. exports[node.value] = [node.value];
  181. }
  182. break;
  183. }
  184. return node;
  185. }
  186. // Find any :import and remember imported names
  187. const importedNames = {};
  188. root.walkRules(/^:import\(.+\)$/, (rule) => {
  189. rule.walkDecls((decl) => {
  190. importedNames[decl.prop] = true;
  191. });
  192. });
  193. // Find any :local selectors
  194. root.walkRules((rule) => {
  195. let parsedSelector = selectorParser().astSync(rule);
  196. rule.selector = traverseNode(parsedSelector.clone()).toString();
  197. rule.walkDecls(/^(composes|compose-with)$/i, (decl) => {
  198. const localNames = getSingleLocalNamesForComposes(
  199. parsedSelector,
  200. decl.parent
  201. );
  202. const multiple = decl.value.split(",");
  203. multiple.forEach((value) => {
  204. const classes = value.trim().split(/\s+/);
  205. classes.forEach((className) => {
  206. const global = /^global\(([^)]+)\)$/.exec(className);
  207. if (global) {
  208. localNames.forEach((exportedName) => {
  209. exports[exportedName].push(global[1]);
  210. });
  211. } else if (hasOwnProperty.call(importedNames, className)) {
  212. localNames.forEach((exportedName) => {
  213. exports[exportedName].push(className);
  214. });
  215. } else if (hasOwnProperty.call(exports, className)) {
  216. localNames.forEach((exportedName) => {
  217. exports[className].forEach((item) => {
  218. exports[exportedName].push(item);
  219. });
  220. });
  221. } else {
  222. throw decl.error(
  223. `referenced class name "${className}" in ${decl.prop} not found`
  224. );
  225. }
  226. });
  227. });
  228. decl.remove();
  229. });
  230. // Find any :local values
  231. rule.walkDecls((decl) => {
  232. if (!/:local\s*\((.+?)\)/.test(decl.value)) {
  233. return;
  234. }
  235. let tokens = decl.value.split(/(,|'[^']*'|"[^"]*")/);
  236. tokens = tokens.map((token, idx) => {
  237. if (idx === 0 || tokens[idx - 1] === ",") {
  238. let result = token;
  239. const localMatch = /:local\s*\((.+?)\)/.exec(token);
  240. if (localMatch) {
  241. const input = localMatch.input;
  242. const matchPattern = localMatch[0];
  243. const matchVal = localMatch[1];
  244. const newVal = exportScopedName(matchVal);
  245. result = input.replace(matchPattern, newVal);
  246. } else {
  247. return token;
  248. }
  249. return result;
  250. } else {
  251. return token;
  252. }
  253. });
  254. decl.value = tokens.join("");
  255. });
  256. });
  257. // Find any :local keyframes
  258. root.walkAtRules(/keyframes$/i, (atRule) => {
  259. const localMatch = /^\s*:local\s*\((.+?)\)\s*$/.exec(atRule.params);
  260. if (!localMatch) {
  261. return;
  262. }
  263. atRule.params = exportScopedName(localMatch[1]);
  264. });
  265. root.walkAtRules(/scope$/i, (atRule) => {
  266. if (atRule.params) {
  267. atRule.params = atRule.params
  268. .split("to")
  269. .map((item) => {
  270. const selector = item.trim().slice(1, -1).trim();
  271. const localMatch = /^\s*:local\s*\((.+?)\)\s*$/.exec(selector);
  272. if (!localMatch) {
  273. return `(${selector})`;
  274. }
  275. let parsedSelector = selectorParser().astSync(selector);
  276. return `(${traverseNode(parsedSelector).toString()})`;
  277. })
  278. .join(" to ");
  279. }
  280. });
  281. // If we found any :locals, insert an :export rule
  282. const exportedNames = Object.keys(exports);
  283. if (exportedNames.length > 0) {
  284. const exportRule = rule({ selector: ":export" });
  285. exportedNames.forEach((exportedName) =>
  286. exportRule.append({
  287. prop: exportedName,
  288. value: exports[exportedName].join(" "),
  289. raws: { before: "\n " },
  290. })
  291. );
  292. root.append(exportRule);
  293. }
  294. },
  295. };
  296. };
  297. plugin.postcss = true;
  298. plugin.generateScopedName = function (name, path) {
  299. const sanitisedPath = path
  300. .replace(/\.[^./\\]+$/, "")
  301. .replace(/[\W_]+/g, "_")
  302. .replace(/^_|_$/g, "");
  303. return `_${sanitisedPath}__${name}`.trim();
  304. };
  305. plugin.generateExportEntry = function (name, scopedName) {
  306. return {
  307. key: unescape(name),
  308. value: unescape(scopedName),
  309. };
  310. };
  311. module.exports = plugin;