displayNameAndId.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _path = _interopRequireDefault(require("path"));
  7. var _fs = _interopRequireDefault(require("fs"));
  8. var _options = require("../utils/options");
  9. var _getName = _interopRequireDefault(require("../utils/getName"));
  10. var _prefixDigit = _interopRequireDefault(require("../utils/prefixDigit"));
  11. var _hash = _interopRequireDefault(require("../utils/hash"));
  12. var _detectors = require("../utils/detectors");
  13. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  14. var addConfig = function addConfig(t) {
  15. return function (path, displayName, componentId) {
  16. if (!displayName && !componentId) {
  17. return;
  18. }
  19. var withConfigProps = [];
  20. if (displayName) {
  21. withConfigProps.push(t.objectProperty(t.identifier('displayName'), t.stringLiteral(displayName)));
  22. }
  23. if (componentId) {
  24. withConfigProps.push(t.objectProperty(t.identifier('componentId'), t.stringLiteral(componentId)));
  25. }
  26. if (path.node.tag) {
  27. // Replace x`...` with x.withConfig({ })`...`
  28. path.node.tag = t.callExpression(t.memberExpression(path.node.tag, t.identifier('withConfig')), [t.objectExpression(withConfigProps)]);
  29. } else {
  30. path.replaceWith(t.callExpression(t.callExpression(t.memberExpression(path.node.callee, t.identifier('withConfig')), [t.objectExpression(withConfigProps)]), path.node.arguments));
  31. }
  32. };
  33. };
  34. var getBlockName = function getBlockName(file) {
  35. var name = _path.default.basename(file.opts.filename, _path.default.extname(file.opts.filename));
  36. return name !== 'index' ? name : _path.default.basename(_path.default.dirname(file.opts.filename));
  37. };
  38. var getDisplayName = function getDisplayName(t) {
  39. return function (path, state) {
  40. var file = state.file;
  41. var componentName = (0, _getName.default)(t)(path);
  42. if (file) {
  43. var blockName = getBlockName(file);
  44. if (blockName === componentName) {
  45. return componentName;
  46. }
  47. return componentName ? `${(0, _prefixDigit.default)(blockName)}__${componentName}` : (0, _prefixDigit.default)(blockName);
  48. } else {
  49. return componentName;
  50. }
  51. };
  52. };
  53. var findModuleRoot = function findModuleRoot(filename) {
  54. if (!filename) {
  55. return null;
  56. }
  57. var dir = _path.default.dirname(filename);
  58. if (_fs.default.existsSync(_path.default.join(dir, 'package.json'))) {
  59. return dir;
  60. } else if (dir !== filename) {
  61. return findModuleRoot(dir);
  62. } else {
  63. return null;
  64. }
  65. };
  66. var FILE_HASH = 'styled-components-file-hash';
  67. var COMPONENT_POSITION = 'styled-components-component-position';
  68. var separatorRegExp = new RegExp(`\\${_path.default.sep}`, 'g');
  69. var getFileHash = function getFileHash(state) {
  70. var file = state.file; // hash calculation is costly due to fs operations, so we'll cache it per file.
  71. if (file.get(FILE_HASH)) {
  72. return file.get(FILE_HASH);
  73. }
  74. var filename = file.opts.filename; // find module root directory
  75. var moduleRoot = findModuleRoot(filename);
  76. var filePath = moduleRoot && _path.default.relative(moduleRoot, filename).replace(separatorRegExp, '/');
  77. var moduleName = moduleRoot && JSON.parse(_fs.default.readFileSync(_path.default.join(moduleRoot, 'package.json'))).name;
  78. var code = file.code;
  79. var stuffToHash = [moduleName];
  80. if (filePath) {
  81. stuffToHash.push(filePath);
  82. } else {
  83. stuffToHash.push(code);
  84. }
  85. var fileHash = (0, _hash.default)(stuffToHash.join(''));
  86. file.set(FILE_HASH, fileHash);
  87. return fileHash;
  88. };
  89. var getNextId = function getNextId(state) {
  90. var id = state.file.get(COMPONENT_POSITION) || 0;
  91. state.file.set(COMPONENT_POSITION, id + 1);
  92. return id;
  93. };
  94. var getComponentId = function getComponentId(state) {
  95. // Prefix the identifier with a character because CSS classes cannot start with a number
  96. return `${(0, _prefixDigit.default)(getFileHash(state))}-${getNextId(state)}`;
  97. };
  98. var _default = function _default(t) {
  99. return function (path, state) {
  100. if (path.node.tag ? (0, _detectors.isStyled)(t)(path.node.tag, state) :
  101. /* styled()`` */
  102. (0, _detectors.isStyled)(t)(path.node.callee, state) && path.node.callee.property && path.node.callee.property.name !== 'withConfig' || // styled(x)({})
  103. (0, _detectors.isStyled)(t)(path.node.callee, state) && !t.isMemberExpression(path.node.callee.callee) || // styled(x).attrs()({})
  104. (0, _detectors.isStyled)(t)(path.node.callee, state) && t.isMemberExpression(path.node.callee.callee) && path.node.callee.callee.property && path.node.callee.callee.property.name && path.node.callee.callee.property.name !== 'withConfig') {
  105. var displayName = (0, _options.useDisplayName)(state) && getDisplayName(t)(path, (0, _options.useFileName)(state) && state);
  106. addConfig(t)(path, displayName && displayName.replace(/[^_a-zA-Z0-9-]/g, ''), (0, _options.useSSR)(state) && getComponentId(state));
  107. }
  108. };
  109. };
  110. exports.default = _default;