prefixIds.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. 'use strict';
  2. exports.type = 'perItem';
  3. exports.active = false;
  4. exports.params = {
  5. delim: '__'
  6. };
  7. exports.description = 'prefix IDs';
  8. var path = require('path'),
  9. csstree = require('css-tree'),
  10. cssRx = require('css-url-regex'),
  11. unquote = require('unquote'),
  12. collections = require('./_collections.js'),
  13. referencesProps = collections.referencesProps,
  14. rxId = /^#(.*)$/, // regular expression for matching an ID + extracing its name
  15. addPrefix = null;
  16. // Escapes a string for being used as ID
  17. var escapeIdentifierName = function(str) {
  18. return str.replace(/[\. ]/g, '_');
  19. };
  20. // Matches an #ID value, captures the ID name
  21. var matchId = function(urlVal) {
  22. var idUrlMatches = urlVal.match(rxId);
  23. if (idUrlMatches === null) {
  24. return false;
  25. }
  26. return idUrlMatches[1];
  27. };
  28. // Matches an url(...) value, captures the URL
  29. var matchUrl = function(val) {
  30. var urlMatches = cssRx().exec(val);
  31. if (urlMatches === null) {
  32. return false;
  33. }
  34. return urlMatches[1];
  35. };
  36. // Checks if attribute is empty
  37. var attrNotEmpty = function(attr) {
  38. return (attr && attr.value && attr.value.length > 0);
  39. };
  40. // prefixes an #ID
  41. var prefixId = function(val) {
  42. var idName = matchId(val);
  43. if (!idName) {
  44. return false;
  45. }
  46. return '#' + addPrefix(idName);
  47. };
  48. // attr.value helper methods
  49. // prefixes a class attribute value
  50. var addPrefixToClassAttr = function(attr) {
  51. if (!attrNotEmpty(attr)) {
  52. return;
  53. }
  54. attr.value = attr.value.split(/\s+/).map(addPrefix).join(' ');
  55. };
  56. // prefixes an ID attribute value
  57. var addPrefixToIdAttr = function(attr) {
  58. if (!attrNotEmpty(attr)) {
  59. return;
  60. }
  61. attr.value = addPrefix(attr.value);
  62. };
  63. // prefixes a href attribute value
  64. var addPrefixToHrefAttr = function(attr) {
  65. if (!attrNotEmpty(attr)) {
  66. return;
  67. }
  68. var idPrefixed = prefixId(attr.value);
  69. if (!idPrefixed) {
  70. return;
  71. }
  72. attr.value = idPrefixed;
  73. };
  74. // prefixes an URL attribute value
  75. var addPrefixToUrlAttr = function(attr) {
  76. if (!attrNotEmpty(attr)) {
  77. return;
  78. }
  79. // url(...) in value
  80. var urlVal = matchUrl(attr.value);
  81. if (!urlVal) {
  82. return;
  83. }
  84. var idPrefixed = prefixId(urlVal);
  85. if (!idPrefixed) {
  86. return;
  87. }
  88. attr.value = 'url(' + idPrefixed + ')';
  89. };
  90. /**
  91. * Prefixes identifiers
  92. *
  93. * @param {Object} node node
  94. * @param {Object} opts plugin params
  95. * @param {Object} extra plugin extra information
  96. *
  97. * @author strarsis <strarsis@gmail.com>
  98. */
  99. exports.fn = function(node, opts, extra) {
  100. // prefix, from file name or option
  101. var prefix = 'prefix';
  102. if (opts.prefix) {
  103. if (typeof opts.prefix === 'function') {
  104. prefix = opts.prefix(node, extra);
  105. } else {
  106. prefix = opts.prefix;
  107. }
  108. } else if (opts.prefix === false) {
  109. prefix = false;
  110. } else if (extra && extra.path && extra.path.length > 0) {
  111. var filename = path.basename(extra.path);
  112. prefix = filename;
  113. }
  114. // prefixes a normal value
  115. addPrefix = function(name) {
  116. if(prefix === false){
  117. return escapeIdentifierName(name);
  118. }
  119. return escapeIdentifierName(prefix + opts.delim + name);
  120. };
  121. // <style/> property values
  122. if (node.elem === 'style') {
  123. if (node.isEmpty()) {
  124. // skip empty <style/>s
  125. return node;
  126. }
  127. var cssStr = node.content[0].text || node.content[0].cdata || [];
  128. var cssAst = {};
  129. try {
  130. cssAst = csstree.parse(cssStr, {
  131. parseValue: true,
  132. parseCustomProperty: false
  133. });
  134. } catch (parseError) {
  135. console.warn('Warning: Parse error of styles of <style/> element, skipped. Error details: ' + parseError);
  136. return node;
  137. }
  138. var idPrefixed = '';
  139. csstree.walk(cssAst, function(node) {
  140. // #ID, .class
  141. if ((node.type === 'IdSelector' ||
  142. node.type === 'ClassSelector') &&
  143. node.name) {
  144. node.name = addPrefix(node.name);
  145. return;
  146. }
  147. // url(...) in value
  148. if (node.type === 'Url' &&
  149. node.value.value && node.value.value.length > 0) {
  150. idPrefixed = prefixId(unquote(node.value.value));
  151. if (!idPrefixed) {
  152. return;
  153. }
  154. node.value.value = idPrefixed;
  155. }
  156. });
  157. // update <style>s
  158. node.content[0].text = csstree.generate(cssAst);
  159. return node;
  160. }
  161. // element attributes
  162. if (!node.attrs) {
  163. return node;
  164. }
  165. // ID
  166. addPrefixToIdAttr(node.attrs.id);
  167. // Class
  168. addPrefixToClassAttr(node.attrs.class);
  169. // href
  170. addPrefixToHrefAttr(node.attrs.href);
  171. // (xlink:)href (deprecated, must be still supported)
  172. addPrefixToHrefAttr(node.attrs['xlink:href']);
  173. // referenceable properties
  174. for (var referencesProp of referencesProps) {
  175. addPrefixToUrlAttr(node.attrs[referencesProp]);
  176. }
  177. return node;
  178. };