You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

99 lines
4.1 KiB

4 years ago
  1. "use strict";
  2. var __importStar = (this && this.__importStar) || function (mod) {
  3. if (mod && mod.__esModule) return mod;
  4. var result = {};
  5. if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
  6. result["default"] = mod;
  7. return result;
  8. };
  9. Object.defineProperty(exports, "__esModule", { value: true });
  10. const postcss = __importStar(require("postcss"));
  11. // postcss-selector-parser does have typings but it's problematic to work with.
  12. const selectorParser = require('postcss-selector-parser');
  13. exports.default = postcss.plugin('add-id', (options) => (root) => {
  14. const id = options;
  15. const keyframes = Object.create(null);
  16. root.each(function rewriteSelector(node) {
  17. if (!node.selector) {
  18. // handle media queries
  19. if (node.type === 'atrule') {
  20. if (node.name === 'media' || node.name === 'supports') {
  21. node.each(rewriteSelector);
  22. }
  23. else if (/-?keyframes$/.test(node.name)) {
  24. // register keyframes
  25. keyframes[node.params] = node.params = node.params + '-' + id;
  26. }
  27. }
  28. return;
  29. }
  30. node.selector = selectorParser((selectors) => {
  31. selectors.each((selector) => {
  32. let node = null;
  33. // find the last child node to insert attribute selector
  34. selector.each((n) => {
  35. // ">>>" combinator
  36. // and /deep/ alias for >>>, since >>> doesn't work in SASS
  37. if (n.type === 'combinator' &&
  38. (n.value === '>>>' || n.value === '/deep/')) {
  39. n.value = ' ';
  40. n.spaces.before = n.spaces.after = '';
  41. return false;
  42. }
  43. // in newer versions of sass, /deep/ support is also dropped, so add a ::v-deep alias
  44. if (n.type === 'pseudo' && n.value === '::v-deep') {
  45. n.value = n.spaces.before = n.spaces.after = '';
  46. return false;
  47. }
  48. if (n.type !== 'pseudo' && n.type !== 'combinator') {
  49. node = n;
  50. }
  51. });
  52. if (node) {
  53. node.spaces.after = '';
  54. }
  55. else {
  56. // For deep selectors & standalone pseudo selectors,
  57. // the attribute selectors are prepended rather than appended.
  58. // So all leading spaces must be eliminated to avoid problems.
  59. selector.first.spaces.before = '';
  60. }
  61. selector.insertAfter(node, selectorParser.attribute({
  62. attribute: id
  63. }));
  64. });
  65. }).processSync(node.selector);
  66. });
  67. // If keyframes are found in this <style>, find and rewrite animation names
  68. // in declarations.
  69. // Caveat: this only works for keyframes and animation rules in the same
  70. // <style> element.
  71. if (Object.keys(keyframes).length) {
  72. root.walkDecls(decl => {
  73. // individual animation-name declaration
  74. if (/^(-\w+-)?animation-name$/.test(decl.prop)) {
  75. decl.value = decl.value
  76. .split(',')
  77. .map(v => keyframes[v.trim()] || v.trim())
  78. .join(',');
  79. }
  80. // shorthand
  81. if (/^(-\w+-)?animation$/.test(decl.prop)) {
  82. decl.value = decl.value
  83. .split(',')
  84. .map(v => {
  85. const vals = v.trim().split(/\s+/);
  86. const i = vals.findIndex(val => keyframes[val]);
  87. if (i !== -1) {
  88. vals.splice(i, 1, keyframes[vals[i]]);
  89. return vals.join(' ');
  90. }
  91. else {
  92. return v;
  93. }
  94. })
  95. .join(',');
  96. }
  97. });
  98. }
  99. });