Dashboard sipadu mbip
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.

serialize.esm.js 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. import hashString from '@emotion/hash';
  2. import unitless from '@emotion/unitless';
  3. import memoize from '@emotion/memoize';
  4. var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
  5. var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
  6. var hyphenateRegex = /[A-Z]|^ms/g;
  7. var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
  8. var isCustomProperty = function isCustomProperty(property) {
  9. return property.charCodeAt(1) === 45;
  10. };
  11. var isProcessableValue = function isProcessableValue(value) {
  12. return value != null && typeof value !== 'boolean';
  13. };
  14. var processStyleName = memoize(function (styleName) {
  15. return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
  16. });
  17. var processStyleValue = function processStyleValue(key, value) {
  18. switch (key) {
  19. case 'animation':
  20. case 'animationName':
  21. {
  22. if (typeof value === 'string') {
  23. return value.replace(animationRegex, function (match, p1, p2) {
  24. cursor = {
  25. name: p1,
  26. styles: p2,
  27. next: cursor
  28. };
  29. return p1;
  30. });
  31. }
  32. }
  33. }
  34. if (unitless[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
  35. return value + 'px';
  36. }
  37. return value;
  38. };
  39. if (process.env.NODE_ENV !== 'production') {
  40. var contentValuePattern = /(attr|calc|counters?|url)\(/;
  41. var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
  42. var oldProcessStyleValue = processStyleValue;
  43. var msPattern = /^-ms-/;
  44. var hyphenPattern = /-(.)/g;
  45. var hyphenatedCache = {};
  46. processStyleValue = function processStyleValue(key, value) {
  47. if (key === 'content') {
  48. if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
  49. console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
  50. }
  51. }
  52. var processed = oldProcessStyleValue(key, value);
  53. if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
  54. hyphenatedCache[key] = true;
  55. console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
  56. return _char.toUpperCase();
  57. }) + "?");
  58. }
  59. return processed;
  60. };
  61. }
  62. var shouldWarnAboutInterpolatingClassNameFromCss = true;
  63. function handleInterpolation(mergedProps, registered, interpolation, couldBeSelectorInterpolation) {
  64. if (interpolation == null) {
  65. return '';
  66. }
  67. if (interpolation.__emotion_styles !== undefined) {
  68. if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
  69. throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
  70. }
  71. return interpolation;
  72. }
  73. switch (typeof interpolation) {
  74. case 'boolean':
  75. {
  76. return '';
  77. }
  78. case 'object':
  79. {
  80. if (interpolation.anim === 1) {
  81. cursor = {
  82. name: interpolation.name,
  83. styles: interpolation.styles,
  84. next: cursor
  85. };
  86. return interpolation.name;
  87. }
  88. if (interpolation.styles !== undefined) {
  89. var next = interpolation.next;
  90. if (next !== undefined) {
  91. // not the most efficient thing ever but this is a pretty rare case
  92. // and there will be very few iterations of this generally
  93. while (next !== undefined) {
  94. cursor = {
  95. name: next.name,
  96. styles: next.styles,
  97. next: cursor
  98. };
  99. next = next.next;
  100. }
  101. }
  102. var styles = interpolation.styles + ";";
  103. if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {
  104. styles += interpolation.map;
  105. }
  106. return styles;
  107. }
  108. return createStringFromObject(mergedProps, registered, interpolation);
  109. }
  110. case 'function':
  111. {
  112. if (mergedProps !== undefined) {
  113. var previousCursor = cursor;
  114. var result = interpolation(mergedProps);
  115. cursor = previousCursor;
  116. return handleInterpolation(mergedProps, registered, result, couldBeSelectorInterpolation);
  117. } else if (process.env.NODE_ENV !== 'production') {
  118. console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
  119. }
  120. break;
  121. }
  122. case 'string':
  123. if (process.env.NODE_ENV !== 'production') {
  124. var matched = [];
  125. var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
  126. var fakeVarName = "animation" + matched.length;
  127. matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
  128. return "${" + fakeVarName + "}";
  129. });
  130. if (matched.length) {
  131. console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
  132. }
  133. }
  134. break;
  135. } // finalize string values (regular strings and functions interpolated into css calls)
  136. if (registered == null) {
  137. return interpolation;
  138. }
  139. var cached = registered[interpolation];
  140. if (process.env.NODE_ENV !== 'production' && couldBeSelectorInterpolation && shouldWarnAboutInterpolatingClassNameFromCss && cached !== undefined) {
  141. console.error('Interpolating a className from css`` is not recommended and will cause problems with composition.\n' + 'Interpolating a className from css`` will be completely unsupported in a future major version of Emotion');
  142. shouldWarnAboutInterpolatingClassNameFromCss = false;
  143. }
  144. return cached !== undefined && !couldBeSelectorInterpolation ? cached : interpolation;
  145. }
  146. function createStringFromObject(mergedProps, registered, obj) {
  147. var string = '';
  148. if (Array.isArray(obj)) {
  149. for (var i = 0; i < obj.length; i++) {
  150. string += handleInterpolation(mergedProps, registered, obj[i], false);
  151. }
  152. } else {
  153. for (var _key in obj) {
  154. var value = obj[_key];
  155. if (typeof value !== 'object') {
  156. if (registered != null && registered[value] !== undefined) {
  157. string += _key + "{" + registered[value] + "}";
  158. } else if (isProcessableValue(value)) {
  159. string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
  160. }
  161. } else {
  162. if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {
  163. throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
  164. }
  165. if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
  166. for (var _i = 0; _i < value.length; _i++) {
  167. if (isProcessableValue(value[_i])) {
  168. string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
  169. }
  170. }
  171. } else {
  172. var interpolated = handleInterpolation(mergedProps, registered, value, false);
  173. switch (_key) {
  174. case 'animation':
  175. case 'animationName':
  176. {
  177. string += processStyleName(_key) + ":" + interpolated + ";";
  178. break;
  179. }
  180. default:
  181. {
  182. if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {
  183. console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
  184. }
  185. string += _key + "{" + interpolated + "}";
  186. }
  187. }
  188. }
  189. }
  190. }
  191. }
  192. return string;
  193. }
  194. var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;
  195. var sourceMapPattern;
  196. if (process.env.NODE_ENV !== 'production') {
  197. sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//;
  198. } // this is the cursor for keyframes
  199. // keyframes are stored on the SerializedStyles object as a linked list
  200. var cursor;
  201. var serializeStyles = function serializeStyles(args, registered, mergedProps) {
  202. if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
  203. return args[0];
  204. }
  205. var stringMode = true;
  206. var styles = '';
  207. cursor = undefined;
  208. var strings = args[0];
  209. if (strings == null || strings.raw === undefined) {
  210. stringMode = false;
  211. styles += handleInterpolation(mergedProps, registered, strings, false);
  212. } else {
  213. if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {
  214. console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
  215. }
  216. styles += strings[0];
  217. } // we start at 1 since we've already handled the first arg
  218. for (var i = 1; i < args.length; i++) {
  219. styles += handleInterpolation(mergedProps, registered, args[i], styles.charCodeAt(styles.length - 1) === 46);
  220. if (stringMode) {
  221. if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {
  222. console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
  223. }
  224. styles += strings[i];
  225. }
  226. }
  227. var sourceMap;
  228. if (process.env.NODE_ENV !== 'production') {
  229. styles = styles.replace(sourceMapPattern, function (match) {
  230. sourceMap = match;
  231. return '';
  232. });
  233. } // using a global regex with .exec is stateful so lastIndex has to be reset each time
  234. labelPattern.lastIndex = 0;
  235. var identifierName = '';
  236. var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
  237. while ((match = labelPattern.exec(styles)) !== null) {
  238. identifierName += '-' + // $FlowFixMe we know it's not null
  239. match[1];
  240. }
  241. var name = hashString(styles) + identifierName;
  242. if (process.env.NODE_ENV !== 'production') {
  243. // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
  244. return {
  245. name: name,
  246. styles: styles,
  247. map: sourceMap,
  248. next: cursor,
  249. toString: function toString() {
  250. return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
  251. }
  252. };
  253. }
  254. return {
  255. name: name,
  256. styles: styles,
  257. next: cursor
  258. };
  259. };
  260. export { serializeStyles };