scoped.js 4.6 KB

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