@workday/canvas-kit-styling-transform 10.3.2 → 10.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/index.ts +5 -0
  2. package/package.json +6 -14
  3. package/testing.ts +3 -0
  4. package/dist/commonjs/index.d.ts +0 -3
  5. package/dist/commonjs/index.d.ts.map +0 -1
  6. package/dist/commonjs/index.js +0 -7
  7. package/dist/commonjs/lib/styleTransform.d.ts +0 -23
  8. package/dist/commonjs/lib/styleTransform.d.ts.map +0 -1
  9. package/dist/commonjs/lib/styleTransform.js +0 -103
  10. package/dist/commonjs/lib/utils/createStyleObjectNode.d.ts +0 -18
  11. package/dist/commonjs/lib/utils/createStyleObjectNode.d.ts.map +0 -1
  12. package/dist/commonjs/lib/utils/createStyleObjectNode.js +0 -47
  13. package/dist/commonjs/lib/utils/getCssVariables.d.ts +0 -4
  14. package/dist/commonjs/lib/utils/getCssVariables.d.ts.map +0 -1
  15. package/dist/commonjs/lib/utils/getCssVariables.js +0 -31
  16. package/dist/commonjs/lib/utils/getErrorMessage.d.ts +0 -15
  17. package/dist/commonjs/lib/utils/getErrorMessage.d.ts.map +0 -1
  18. package/dist/commonjs/lib/utils/getErrorMessage.js +0 -45
  19. package/dist/commonjs/lib/utils/getFallbackVariable.d.ts +0 -9
  20. package/dist/commonjs/lib/utils/getFallbackVariable.d.ts.map +0 -1
  21. package/dist/commonjs/lib/utils/getFallbackVariable.js +0 -30
  22. package/dist/commonjs/lib/utils/getVarName.d.ts +0 -17
  23. package/dist/commonjs/lib/utils/getVarName.d.ts.map +0 -1
  24. package/dist/commonjs/lib/utils/getVarName.js +0 -33
  25. package/dist/commonjs/lib/utils/handleCalc.d.ts +0 -19
  26. package/dist/commonjs/lib/utils/handleCalc.d.ts.map +0 -1
  27. package/dist/commonjs/lib/utils/handleCalc.js +0 -62
  28. package/dist/commonjs/lib/utils/handleCreateStencil.d.ts +0 -6
  29. package/dist/commonjs/lib/utils/handleCreateStencil.d.ts.map +0 -1
  30. package/dist/commonjs/lib/utils/handleCreateStencil.js +0 -203
  31. package/dist/commonjs/lib/utils/handleCreateStyles.d.ts +0 -3
  32. package/dist/commonjs/lib/utils/handleCreateStyles.d.ts.map +0 -1
  33. package/dist/commonjs/lib/utils/handleCreateStyles.js +0 -110
  34. package/dist/commonjs/lib/utils/handleCreateVars.d.ts +0 -3
  35. package/dist/commonjs/lib/utils/handleCreateVars.d.ts.map +0 -1
  36. package/dist/commonjs/lib/utils/handleCreateVars.js +0 -34
  37. package/dist/commonjs/lib/utils/handleCssVar.d.ts +0 -12
  38. package/dist/commonjs/lib/utils/handleCssVar.d.ts.map +0 -1
  39. package/dist/commonjs/lib/utils/handleCssVar.js +0 -33
  40. package/dist/commonjs/lib/utils/handleFocusRing.d.ts +0 -3
  41. package/dist/commonjs/lib/utils/handleFocusRing.d.ts.map +0 -1
  42. package/dist/commonjs/lib/utils/handleFocusRing.js +0 -83
  43. package/dist/commonjs/lib/utils/handleKeyframes.d.ts +0 -3
  44. package/dist/commonjs/lib/utils/handleKeyframes.d.ts.map +0 -1
  45. package/dist/commonjs/lib/utils/handleKeyframes.js +0 -47
  46. package/dist/commonjs/lib/utils/handlePx2Rem.d.ts +0 -6
  47. package/dist/commonjs/lib/utils/handlePx2Rem.d.ts.map +0 -1
  48. package/dist/commonjs/lib/utils/handlePx2Rem.js +0 -26
  49. package/dist/commonjs/lib/utils/isImportedFromStyling.d.ts +0 -7
  50. package/dist/commonjs/lib/utils/isImportedFromStyling.d.ts.map +0 -1
  51. package/dist/commonjs/lib/utils/isImportedFromStyling.js +0 -23
  52. package/dist/commonjs/lib/utils/makeEmotionSafe.d.ts +0 -7
  53. package/dist/commonjs/lib/utils/makeEmotionSafe.d.ts.map +0 -1
  54. package/dist/commonjs/lib/utils/makeEmotionSafe.js +0 -15
  55. package/dist/commonjs/lib/utils/parseNodeToStaticValue.d.ts +0 -7
  56. package/dist/commonjs/lib/utils/parseNodeToStaticValue.d.ts.map +0 -1
  57. package/dist/commonjs/lib/utils/parseNodeToStaticValue.js +0 -149
  58. package/dist/commonjs/lib/utils/parseObjectToStaticValue.d.ts +0 -13
  59. package/dist/commonjs/lib/utils/parseObjectToStaticValue.d.ts.map +0 -1
  60. package/dist/commonjs/lib/utils/parseObjectToStaticValue.js +0 -118
  61. package/dist/commonjs/lib/utils/types.d.ts +0 -16
  62. package/dist/commonjs/lib/utils/types.d.ts.map +0 -1
  63. package/dist/commonjs/lib/utils/types.js +0 -2
  64. package/dist/es6/index.d.ts +0 -3
  65. package/dist/es6/index.d.ts.map +0 -1
  66. package/dist/es6/index.js +0 -2
  67. package/dist/es6/lib/styleTransform.d.ts +0 -23
  68. package/dist/es6/lib/styleTransform.d.ts.map +0 -1
  69. package/dist/es6/lib/styleTransform.js +0 -94
  70. package/dist/es6/lib/utils/createStyleObjectNode.d.ts +0 -18
  71. package/dist/es6/lib/utils/createStyleObjectNode.d.ts.map +0 -1
  72. package/dist/es6/lib/utils/createStyleObjectNode.js +0 -39
  73. package/dist/es6/lib/utils/getCssVariables.d.ts +0 -4
  74. package/dist/es6/lib/utils/getCssVariables.d.ts.map +0 -1
  75. package/dist/es6/lib/utils/getCssVariables.js +0 -26
  76. package/dist/es6/lib/utils/getErrorMessage.d.ts +0 -15
  77. package/dist/es6/lib/utils/getErrorMessage.d.ts.map +0 -1
  78. package/dist/es6/lib/utils/getErrorMessage.js +0 -41
  79. package/dist/es6/lib/utils/getFallbackVariable.d.ts +0 -9
  80. package/dist/es6/lib/utils/getFallbackVariable.d.ts.map +0 -1
  81. package/dist/es6/lib/utils/getFallbackVariable.js +0 -26
  82. package/dist/es6/lib/utils/getVarName.d.ts +0 -17
  83. package/dist/es6/lib/utils/getVarName.d.ts.map +0 -1
  84. package/dist/es6/lib/utils/getVarName.js +0 -26
  85. package/dist/es6/lib/utils/handleCalc.d.ts +0 -19
  86. package/dist/es6/lib/utils/handleCalc.d.ts.map +0 -1
  87. package/dist/es6/lib/utils/handleCalc.js +0 -55
  88. package/dist/es6/lib/utils/handleCreateStencil.d.ts +0 -6
  89. package/dist/es6/lib/utils/handleCreateStencil.d.ts.map +0 -1
  90. package/dist/es6/lib/utils/handleCreateStencil.js +0 -196
  91. package/dist/es6/lib/utils/handleCreateStyles.d.ts +0 -3
  92. package/dist/es6/lib/utils/handleCreateStyles.d.ts.map +0 -1
  93. package/dist/es6/lib/utils/handleCreateStyles.js +0 -103
  94. package/dist/es6/lib/utils/handleCreateVars.d.ts +0 -3
  95. package/dist/es6/lib/utils/handleCreateVars.d.ts.map +0 -1
  96. package/dist/es6/lib/utils/handleCreateVars.js +0 -27
  97. package/dist/es6/lib/utils/handleCssVar.d.ts +0 -12
  98. package/dist/es6/lib/utils/handleCssVar.d.ts.map +0 -1
  99. package/dist/es6/lib/utils/handleCssVar.js +0 -26
  100. package/dist/es6/lib/utils/handleFocusRing.d.ts +0 -3
  101. package/dist/es6/lib/utils/handleFocusRing.d.ts.map +0 -1
  102. package/dist/es6/lib/utils/handleFocusRing.js +0 -76
  103. package/dist/es6/lib/utils/handleKeyframes.d.ts +0 -3
  104. package/dist/es6/lib/utils/handleKeyframes.d.ts.map +0 -1
  105. package/dist/es6/lib/utils/handleKeyframes.js +0 -40
  106. package/dist/es6/lib/utils/handlePx2Rem.d.ts +0 -6
  107. package/dist/es6/lib/utils/handlePx2Rem.d.ts.map +0 -1
  108. package/dist/es6/lib/utils/handlePx2Rem.js +0 -19
  109. package/dist/es6/lib/utils/isImportedFromStyling.d.ts +0 -7
  110. package/dist/es6/lib/utils/isImportedFromStyling.d.ts.map +0 -1
  111. package/dist/es6/lib/utils/isImportedFromStyling.js +0 -16
  112. package/dist/es6/lib/utils/makeEmotionSafe.d.ts +0 -7
  113. package/dist/es6/lib/utils/makeEmotionSafe.d.ts.map +0 -1
  114. package/dist/es6/lib/utils/makeEmotionSafe.js +0 -11
  115. package/dist/es6/lib/utils/parseNodeToStaticValue.d.ts +0 -7
  116. package/dist/es6/lib/utils/parseNodeToStaticValue.d.ts.map +0 -1
  117. package/dist/es6/lib/utils/parseNodeToStaticValue.js +0 -142
  118. package/dist/es6/lib/utils/parseObjectToStaticValue.d.ts +0 -13
  119. package/dist/es6/lib/utils/parseObjectToStaticValue.d.ts.map +0 -1
  120. package/dist/es6/lib/utils/parseObjectToStaticValue.js +0 -110
  121. package/dist/es6/lib/utils/types.d.ts +0 -16
  122. package/dist/es6/lib/utils/types.d.ts.map +0 -1
  123. package/dist/es6/lib/utils/types.js +0 -1
@@ -1,7 +0,0 @@
1
- /**
2
- * Util function to fix an issue with Emotion by
3
- * appending `EmotionIssue#3066` to end of css variable
4
- * See issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)
5
- */
6
- export declare function makeEmotionSafe(key: string): string;
7
- //# sourceMappingURL=makeEmotionSafe.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"makeEmotionSafe.d.ts","sourceRoot":"","sources":["../../../../lib/utils/makeEmotionSafe.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAKnD"}
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.makeEmotionSafe = void 0;
4
- /**
5
- * Util function to fix an issue with Emotion by
6
- * appending `EmotionIssue#3066` to end of css variable
7
- * See issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)
8
- */
9
- function makeEmotionSafe(key) {
10
- if (key.endsWith('label')) {
11
- return `${key}-emotion-safe`;
12
- }
13
- return key;
14
- }
15
- exports.makeEmotionSafe = makeEmotionSafe;
@@ -1,7 +0,0 @@
1
- import ts from 'typescript';
2
- import { TransformerContext } from './types';
3
- /**
4
- * This is the workhorse of statically analyzing style values
5
- */
6
- export declare function parseNodeToStaticValue(node: ts.Node, context: TransformerContext): string;
7
- //# sourceMappingURL=parseNodeToStaticValue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"parseNodeToStaticValue.d.ts","sourceRoot":"","sources":["../../../../lib/utils/parseNodeToStaticValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAM5B,OAAO,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,kBAAkB,GAAG,MAAM,CAuGzF"}
@@ -1,149 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.parseNodeToStaticValue = void 0;
7
- const typescript_1 = __importDefault(require("typescript"));
8
- const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
9
- const makeEmotionSafe_1 = require("./makeEmotionSafe");
10
- const getErrorMessage_1 = require("./getErrorMessage");
11
- /**
12
- * This is the workhorse of statically analyzing style values
13
- */
14
- function parseNodeToStaticValue(node, context) {
15
- const { checker, variables, keyframes } = context;
16
- /**
17
- * String literals like 'red' or empty Template Expressions like `red`
18
- */
19
- if (typescript_1.default.isStringLiteral(node) || typescript_1.default.isNoSubstitutionTemplateLiteral(node)) {
20
- return node.text;
21
- }
22
- // 12
23
- if (typescript_1.default.isNumericLiteral(node)) {
24
- return `${node.text}px`;
25
- }
26
- // undefined
27
- if (typescript_1.default.isIdentifier(node) && node.text === 'undefined') {
28
- return 'undefined';
29
- }
30
- // a.b
31
- if (typescript_1.default.isPropertyAccessExpression(node)) {
32
- const varName = getCSSVariableKey(getPropertyAccessExpressionText(node));
33
- if (variables[varName]) {
34
- return variables[varName];
35
- }
36
- if (keyframes[varName]) {
37
- return keyframes[varName];
38
- }
39
- }
40
- // [a.b]
41
- if (typescript_1.default.isComputedPropertyName(node) && typescript_1.default.isPropertyAccessExpression(node.expression)) {
42
- const varName = getCSSVariableKey(getPropertyAccessExpressionText(node.expression));
43
- if (variables[varName]) {
44
- return variables[varName];
45
- }
46
- if (keyframes[varName]) {
47
- return keyframes[varName];
48
- }
49
- }
50
- /**
51
- * ```ts
52
- * `border 1px ${myVars.colors.border}`
53
- * ```
54
- */
55
- if (typescript_1.default.isTemplateExpression(node)) {
56
- return getStyleValueFromTemplateExpression(node, context);
57
- }
58
- /**
59
- * An Identifier is a simple variable. It may represent a variable, so we'll check it before
60
- * moving on. This typically happens in stencils.
61
- */
62
- if (typescript_1.default.isIdentifier(node)) {
63
- if (variables[node.text]) {
64
- return variables[node.text];
65
- }
66
- if (keyframes[node.text]) {
67
- return keyframes[node.text];
68
- }
69
- }
70
- if (typescript_1.default.isElementAccessExpression(node)) {
71
- const value = parseTypeToStaticValue(checker.getTypeAtLocation(node));
72
- if (value) {
73
- return value;
74
- }
75
- }
76
- // If we got here, we cannot statically analyze by the AST alone. We have to check the type of the
77
- // correct AST Node
78
- if (typescript_1.default.isIdentifier(node) || typescript_1.default.isPropertyAccessExpression(node)) {
79
- const value = parseTypeToStaticValue(checker.getTypeAtLocation(node));
80
- if (value) {
81
- return value;
82
- }
83
- }
84
- if (typescript_1.default.isComputedPropertyName(node)) {
85
- const value = parseTypeToStaticValue(checker.getTypeAtLocation(node.expression));
86
- if (value) {
87
- return value;
88
- }
89
- }
90
- // we don't know what this is, we need to throw an error
91
- const type = checker.getTypeAtLocation(node);
92
- const typeValue = checker.typeToString(type);
93
- throw new Error(`Unknown type at: "${node.getText()}". Received "${typeValue}"\n${getErrorMessage_1.getErrorMessage(node)}\nFor static analysis of styles, please make sure all types resolve to string or numeric literals. Please use 'const' instead of 'let'. If using an object, cast using "as const" or use an interface with string or numeric literals.`);
94
- }
95
- exports.parseNodeToStaticValue = parseNodeToStaticValue;
96
- function parseTypeToStaticValue(type) {
97
- if (type.isStringLiteral()) {
98
- return type.value;
99
- }
100
- if (type.isNumberLiteral()) {
101
- return `${type.value}px`;
102
- }
103
- }
104
- function getCSSVariableKey(text) {
105
- const [id, name] = getVariableNameParts(text);
106
- return `${canvas_kit_styling_1.slugify(id)}-${makeEmotionSafe_1.makeEmotionSafe(name)}`;
107
- }
108
- /**
109
- * A `PropertyExpression` is an expression with a dot in it. Like `a.b.c`. It may be nested. This
110
- * function will walk the AST and create a string like `a.b.c` to be passed on to variable name
111
- * generation. This will be used for CSS variable lookups.
112
- */
113
- function getPropertyAccessExpressionText(node) {
114
- if (typescript_1.default.isIdentifier(node.name)) {
115
- if (typescript_1.default.isIdentifier(node.expression)) {
116
- return `${node.expression.text}.${node.name.text}`;
117
- }
118
- if (typescript_1.default.isPropertyAccessExpression(node.expression)) {
119
- return `${getPropertyAccessExpressionText(node.expression)}.${node.name.text}`;
120
- }
121
- }
122
- return '';
123
- }
124
- function getVariableNameParts(input) {
125
- const parts = input.split('.');
126
- // grab the last item in the array. This will also mutate the array, removing the last item
127
- const variable = parts.pop();
128
- return [parts.join('.').replace(/(vars|stencil|styles)/i, ''), variable];
129
- }
130
- /**
131
- * Gets a static string value from a template expression. It could recurse.
132
- */
133
- function getStyleValueFromTemplateExpression(node, context) {
134
- if (!node) {
135
- return '';
136
- }
137
- if (typescript_1.default.isTemplateExpression(node)) {
138
- return (getStyleValueFromTemplateExpression(node.head, context) +
139
- node.templateSpans.map(value => getStyleValueFromTemplateExpression(value, context)).join(''));
140
- }
141
- if (typescript_1.default.isTemplateHead(node) || typescript_1.default.isTemplateTail(node) || typescript_1.default.isTemplateMiddle(node)) {
142
- return node.text;
143
- }
144
- if (typescript_1.default.isTemplateSpan(node)) {
145
- return (parseNodeToStaticValue(node.expression, context) +
146
- getStyleValueFromTemplateExpression(node.literal, context));
147
- }
148
- return '';
149
- }
@@ -1,13 +0,0 @@
1
- import ts from 'typescript';
2
- import { TransformerContext } from './types';
3
- export declare type NestedStyleObject = {
4
- [key: string]: string | NestedStyleObject;
5
- };
6
- export declare function parseObjectToStaticValue(node: ts.Node, context: TransformerContext): NestedStyleObject;
7
- /**
8
- * If we're here, we have a `ts.Type` that represents a style object. We try to parse a style object
9
- * from the AST, but we might have something that is more complicated like a function call or an
10
- * identifier that represents an object. It could be imported from another file.
11
- */
12
- export declare function parseStyleObjFromType(type: ts.Type, context: TransformerContext): Record<string, any>;
13
- //# sourceMappingURL=parseObjectToStaticValue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"parseObjectToStaticValue.d.ts","sourceRoot":"","sources":["../../../../lib/utils/parseObjectToStaticValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAI5B,OAAO,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAE3C,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAE5E,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,OAAO,EAAE,kBAAkB,GAC1B,iBAAiB,CAUnB;AA+DD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,kBAAkB,uBA0B/E"}
@@ -1,118 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.parseStyleObjFromType = exports.parseObjectToStaticValue = void 0;
7
- const typescript_1 = __importDefault(require("typescript"));
8
- const getFallbackVariable_1 = require("./getFallbackVariable");
9
- const parseNodeToStaticValue_1 = require("./parseNodeToStaticValue");
10
- function parseObjectToStaticValue(node, context) {
11
- let styleObj = {};
12
- if (typescript_1.default.isObjectLiteralExpression(node)) {
13
- node.properties.forEach(property => {
14
- styleObj = { ...styleObj, ...parsePropertyToStaticValue(property, context) };
15
- });
16
- }
17
- return styleObj;
18
- }
19
- exports.parseObjectToStaticValue = parseObjectToStaticValue;
20
- function parsePropertyToStaticValue(node, context) {
21
- const styleObj = {};
22
- // { name: value }
23
- if (typescript_1.default.isPropertyAssignment(node)) {
24
- const key = typescript_1.default.isIdentifier(node.name)
25
- ? node.name.text
26
- : parseNodeToStaticValue_1.parseNodeToStaticValue(node.name, context);
27
- if (key) {
28
- if (typescript_1.default.isObjectLiteralExpression(node.initializer)) {
29
- // nested
30
- styleObj[key] = parseObjectToStaticValue(node.initializer, context);
31
- }
32
- else {
33
- styleObj[key] = maybeWrapCSSVariables(parseNodeToStaticValue_1.parseNodeToStaticValue(node.initializer, context), context.variables);
34
- parseNodeToStaticValue_1.parseNodeToStaticValue(node.initializer, context);
35
- }
36
- return styleObj;
37
- }
38
- }
39
- // { name: value } (types)
40
- if (typescript_1.default.isPropertySignature(node)) {
41
- const key = typescript_1.default.isIdentifier(node.name)
42
- ? node.name.text
43
- : parseNodeToStaticValue_1.parseNodeToStaticValue(node.name, context);
44
- if (key) {
45
- if (key.includes('&') || key.startsWith(':')) {
46
- // nested
47
- styleObj[key] = parseObjectToStaticValue(node.type, context);
48
- }
49
- else {
50
- styleObj[key] =
51
- maybeWrapCSSVariables(parseNodeToStaticValue_1.parseNodeToStaticValue(node.type, context), context.variables) ||
52
- '';
53
- }
54
- return styleObj;
55
- }
56
- }
57
- // {...{key: 'value'}}
58
- if (typescript_1.default.isSpreadAssignment(node) && typescript_1.default.isObjectLiteralExpression(node.expression)) {
59
- // recurse to parse a nested ObjectLiteralExpression
60
- return parseObjectToStaticValue(node.expression, context);
61
- }
62
- // { ...value }
63
- if (typescript_1.default.isSpreadAssignment(node)) {
64
- // Spread assignments are a bit complicated to use the AST to figure out, so we'll ask the
65
- // TypeScript type checker.
66
- const type = context.checker.getTypeAtLocation(node.expression);
67
- context.checker.typeToString(type);
68
- return parseStyleObjFromType(type, context);
69
- }
70
- return styleObj;
71
- }
72
- /**
73
- * If we're here, we have a `ts.Type` that represents a style object. We try to parse a style object
74
- * from the AST, but we might have something that is more complicated like a function call or an
75
- * identifier that represents an object. It could be imported from another file.
76
- */
77
- function parseStyleObjFromType(type, context) {
78
- const styleObj = {};
79
- // Gets all the properties of the type object
80
- return type.getProperties().reduce((result, property) => {
81
- const declaration = property.valueDeclaration;
82
- // we might have generics, so we'll use the type of the symbol instead of the type at the
83
- // declaration. This resolves generics like `T` into literal values if they exist.
84
- const propType = context.checker.getTypeOfSymbolAtLocation(property, declaration);
85
- if (propType.isStringLiteral()) {
86
- // This isn't a component variable, it is a static CSS variable
87
- result[property.name] = propType.value;
88
- return result;
89
- }
90
- if (propType.isNumberLiteral()) {
91
- result[property.name] = `${propType.value}px`;
92
- return result;
93
- }
94
- return {
95
- ...result,
96
- ...parsePropertyToStaticValue(declaration, context),
97
- };
98
- }, styleObj);
99
- }
100
- exports.parseStyleObjFromType = parseStyleObjFromType;
101
- /**
102
- * Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with
103
- * `{padding: 'var(--foo)'}`. It also works on variables in the middle of the property.
104
- */
105
- function maybeWrapCSSVariables(input, variables) {
106
- // matches an string starting with `--` that isn't already wrapped in a `var()`. It tries to match
107
- // any character that isn't a valid separator in CSS
108
- return input.replace(/([a-z]*[ (]*)(--[^\s;,'})]+)/gi, (match, prefix, variable) => {
109
- if (prefix.startsWith('var(')) {
110
- return match;
111
- }
112
- const fallbackVariable = getFallbackVariable_1.getFallbackVariable(variable, variables);
113
- const fallback = fallbackVariable
114
- ? `, ${maybeWrapCSSVariables(fallbackVariable, variables)}`
115
- : '';
116
- return `${prefix}var(${variable}${fallback})`;
117
- });
118
- }
@@ -1,16 +0,0 @@
1
- import ts from 'typescript';
2
- export declare type TransformerContext = {
3
- checker: ts.TypeChecker;
4
- prefix: string;
5
- variables: Record<string, string>;
6
- keyframes: Record<string, string>;
7
- };
8
- /**
9
- * Transformer function type. A transformer will be called by the TypeScript AST transformer visitor
10
- * from the bottom of the tree to the top (inside-out/leaf first, root last). If a transformer knows
11
- * how to handle the AST node, a node should be returned. Even if no transformation is desired,
12
- * returning a node shortcuts processing. The visitor will call all NodeTransformers until a match
13
- * is met.
14
- */
15
- export declare type NodeTransformer = (node: ts.Node, context: TransformerContext) => ts.Node | void;
16
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../lib/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,oBAAY,kBAAkB,GAAG;IAC/B,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC,CAAC;AAEF;;;;;;GAMG;AACH,oBAAY,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,kBAAkB,KAAK,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC"}
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,3 +0,0 @@
1
- import styleTransformer from './lib/styleTransform';
2
- export default styleTransformer;
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAEpD,eAAe,gBAAgB,CAAC"}
package/dist/es6/index.js DELETED
@@ -1,2 +0,0 @@
1
- import styleTransformer from './lib/styleTransform';
2
- export default styleTransformer;
@@ -1,23 +0,0 @@
1
- import ts from 'typescript';
2
- import { NodeTransformer, TransformerContext } from './utils/types';
3
- export declare type NestedStyleObject = {
4
- [key: string]: string | NestedStyleObject;
5
- };
6
- export interface StyleTransformerOptions {
7
- prefix: string;
8
- variables: TransformerContext['variables'];
9
- keyframes: TransformerContext['keyframes'];
10
- fallbackFiles?: string[];
11
- transformers?: NodeTransformer[];
12
- }
13
- /**
14
- * The reset is used in tests and should not be called normally.
15
- */
16
- export declare function _reset(): void;
17
- export default function styleTransformer(program: ts.Program, { variables, fallbackFiles, transformers, ...transformContext }?: Partial<StyleTransformerOptions>): ts.TransformerFactory<ts.SourceFile>;
18
- /**
19
- * This function is useful for tests or a custom build. The `styleTransformer` function is used by
20
- * the https://www.npmjs.com/package/ttypescript package.
21
- */
22
- export declare function transform(program: ts.Program, fileName: string, options?: Partial<StyleTransformerOptions>): string;
23
- //# sourceMappingURL=styleTransform.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styleTransform.d.ts","sourceRoot":"","sources":["../../../lib/styleTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAW5B,OAAO,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGlE,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAE5E,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;CAClC;AAMD;;GAEG;AACH,wBAAgB,MAAM,SAIrB;AAgBD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,EACE,SAAc,EACd,aAAkB,EAClB,YAAkC,EAClC,GAAG,gBAAgB,EACpB,GAAE,OAAO,CAAC,uBAAuB,CAKjC,GACA,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAsCtC;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,UAY3C"}
@@ -1,94 +0,0 @@
1
- /// <reference types="node" />
2
- import ts from 'typescript';
3
- import path from 'node:path';
4
- import { getVariablesFromFiles } from './utils/getCssVariables';
5
- import { handleCreateVars } from './utils/handleCreateVars';
6
- import { handleCreateStyles } from './utils/handleCreateStyles';
7
- import { handleCreateStencil } from './utils/handleCreateStencil';
8
- import { handleCalc } from './utils/handleCalc';
9
- import { handlePx2Rem } from './utils/handlePx2Rem';
10
- import { handleFocusRing } from './utils/handleFocusRing';
11
- import { handleCssVar } from './utils/handleCssVar';
12
- import { handleKeyframes } from './utils/handleKeyframes';
13
- let vars = {};
14
- let keyframes = {};
15
- let loadedFallbacks = false;
16
- /**
17
- * The reset is used in tests and should not be called normally.
18
- */
19
- export function _reset() {
20
- vars = {};
21
- keyframes = {};
22
- loadedFallbacks = false;
23
- }
24
- /**
25
- * Optional list of transformers. Useful to override for tests
26
- */
27
- const defaultTransformers = [
28
- handleCssVar,
29
- handleFocusRing,
30
- handleCalc,
31
- handlePx2Rem,
32
- handleKeyframes,
33
- handleCreateVars,
34
- handleCreateStyles,
35
- handleCreateStencil,
36
- ];
37
- export default function styleTransformer(program, { variables = {}, fallbackFiles = [], transformers = defaultTransformers, ...transformContext } = {
38
- prefix: 'css',
39
- variables: {},
40
- keyframes: {},
41
- transformers: defaultTransformers,
42
- }) {
43
- if (!loadedFallbacks) {
44
- const files = fallbackFiles
45
- .filter(file => file) // don't process empty files
46
- .map(file => {
47
- // Find the fully-qualified path name. This could error which should give "module not found" errors
48
- return file.startsWith('.') ? path.resolve(process.cwd(), file) : require.resolve(file);
49
- })
50
- .map(file => {
51
- console.log(`Loading CSS variable fallback file: ${file}`);
52
- return ts.sys.readFile(file) || '';
53
- });
54
- const fallbackVars = getVariablesFromFiles(files);
55
- console.log(`Found ${Object.keys(fallbackVars).length} variables.`);
56
- // eslint-disable-next-line no-param-reassign
57
- vars = { ...variables, ...fallbackVars };
58
- loadedFallbacks = true;
59
- }
60
- const checker = program.getTypeChecker();
61
- return context => {
62
- const visit = node => {
63
- // eslint-disable-next-line no-param-reassign
64
- node = ts.visitEachChild(node, visit, context);
65
- return handleTransformers(node, {
66
- checker,
67
- prefix: 'css',
68
- variables: vars,
69
- keyframes,
70
- ...transformContext,
71
- })(transformers);
72
- };
73
- return node => ts.visitNode(node, visit);
74
- };
75
- }
76
- /**
77
- * This function is useful for tests or a custom build. The `styleTransformer` function is used by
78
- * the https://www.npmjs.com/package/ttypescript package.
79
- */
80
- export function transform(program, fileName, options) {
81
- const source = program.getSourceFile(fileName) || ts.createSourceFile(fileName, '', ts.ScriptTarget.ES2019);
82
- const printer = ts.createPrinter();
83
- return printer.printFile(ts
84
- .transform(source, [styleTransformer(program, options)])
85
- .transformed.find(s => s.fileName === fileName) || source);
86
- }
87
- const handleTransformers = (node, context) => (transformers) => {
88
- return (transformers.reduce((result, transformer) => {
89
- if (result) {
90
- return result;
91
- }
92
- return transformer(node, context);
93
- }, undefined) || node);
94
- };
@@ -1,18 +0,0 @@
1
- import ts from 'typescript';
2
- import { NestedStyleObject } from './parseObjectToStaticValue';
3
- /**
4
- * Creates an AST node representation of the passed in `styleObj`, but in the format of `{name:
5
- * string, styles: serializedStyles}`. The `name` is hard-coded here to work with both server-side
6
- * and client-side style injection. This results in a stable style key for Emotion while also
7
- * optimizing style serialization.
8
- *
9
- * If `name` is provided, the name will be whatever `name` is, replacing "{hash}" with the hash
10
- * created via `serializeStyles`. For example: 'animation-{hash}' will be converted into
11
- * 'animation-abc123'
12
- */
13
- export declare function createStyleObjectNode(styleObj: NestedStyleObject | string, name?: string): ts.ObjectLiteralExpression;
14
- /**
15
- * Returns the name created by `createStyleObjectNode`
16
- */
17
- export declare function getStaticCssClassName(node: ts.Node): string;
18
- //# sourceMappingURL=createStyleObjectNode.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createStyleObjectNode.d.ts","sourceRoot":"","sources":["../../../../lib/utils/createStyleObjectNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAK5B,OAAO,EAAC,iBAAiB,EAAC,MAAM,4BAA4B,CAAC;AAE7D;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,8BAuBxF;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,MAAM,CAS3D"}
@@ -1,39 +0,0 @@
1
- import ts from 'typescript';
2
- import { serializeStyles } from '@emotion/serialize';
3
- import { generateUniqueId } from '@workday/canvas-kit-styling';
4
- /**
5
- * Creates an AST node representation of the passed in `styleObj`, but in the format of `{name:
6
- * string, styles: serializedStyles}`. The `name` is hard-coded here to work with both server-side
7
- * and client-side style injection. This results in a stable style key for Emotion while also
8
- * optimizing style serialization.
9
- *
10
- * If `name` is provided, the name will be whatever `name` is, replacing "{hash}" with the hash
11
- * created via `serializeStyles`. For example: 'animation-{hash}' will be converted into
12
- * 'animation-abc123'
13
- */
14
- export function createStyleObjectNode(styleObj, name) {
15
- const serialized = serializeStyles([styleObj]);
16
- const styleText = serialized.styles;
17
- const styleExpression = ts.factory.createStringLiteral(styleText);
18
- // create an emotion-optimized object: https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/serialize/src/index.js#L315-L322
19
- // Looks like: `{name: $hash, styles: $styleText }`
20
- return ts.factory.createObjectLiteralExpression([
21
- ts.factory.createPropertyAssignment(ts.factory.createIdentifier('name'),
22
- // TODO - we may need this to be a static variable for the CSS package
23
- ts.factory.createStringLiteral(name ? name.replace('{hash}', serialized.name) : generateUniqueId()) // We might be using values that are resolved at runtime, but should still be static. We're only supporting the `cs` function running once per file, so a stable id based on a hash is not necessary
24
- ),
25
- ts.factory.createPropertyAssignment(ts.factory.createIdentifier('styles'), styleExpression // In the future we can extract CSS from here by running the `stylis` compiler directly. Emotion does this here: https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/cache/src/index.js#L188-L245
26
- ),
27
- ], false);
28
- }
29
- /**
30
- * Returns the name created by `createStyleObjectNode`
31
- */
32
- export function getStaticCssClassName(node) {
33
- if (ts.isObjectLiteralExpression(node) &&
34
- ts.isPropertyAssignment(node.properties[0]) &&
35
- ts.isStringLiteral(node.properties[0].initializer)) {
36
- return node.properties[0].initializer.text;
37
- }
38
- return '';
39
- }
@@ -1,4 +0,0 @@
1
- import { Element } from 'stylis';
2
- export declare function getVariablesFromFiles(files: string[]): Record<string, string>;
3
- export declare function extractVariables(blocks: Element[] | string, variables?: Record<string, string>): Record<string, string>;
4
- //# sourceMappingURL=getCssVariables.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"getCssVariables.d.ts","sourceRoot":"","sources":["../../../../lib/utils/getCssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,OAAO,EAAC,MAAM,QAAQ,CAAC;AAExC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK7E;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACrC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAuBxB"}
@@ -1,26 +0,0 @@
1
- import { compile } from 'stylis';
2
- export function getVariablesFromFiles(files) {
3
- return files.reduce((result, file) => {
4
- extractVariables(compile(file));
5
- return { ...result, ...extractVariables(compile(file)) };
6
- }, {});
7
- }
8
- export function extractVariables(blocks, variables = {}) {
9
- if (typeof blocks === 'string') {
10
- return variables;
11
- }
12
- return blocks
13
- .filter(block => block.type === 'rule')
14
- .reduce((result, rule) => {
15
- if (Array.isArray(rule.children)) {
16
- rule.children.forEach(child => {
17
- if (typeof child.props === 'string' &&
18
- child.props.startsWith('--') &&
19
- typeof child.children === 'string') {
20
- result[child.props] = child.children;
21
- }
22
- });
23
- }
24
- return result;
25
- }, { ...variables });
26
- }
@@ -1,15 +0,0 @@
1
- import ts from 'typescript';
2
- /**
3
- * Creates an error message around a node. It will look something like:
4
- *
5
- * ```
6
- * Unknown type at: "fontSize".
7
- * File: test.ts, Line: 6, Character: 17.
8
- * const styles = createStyles({
9
- * fontSize: fontSize
10
- * ========
11
- * })
12
- * ```
13
- */
14
- export declare function getErrorMessage(node: ts.Node): string;
15
- //# sourceMappingURL=getErrorMessage.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"getErrorMessage.d.ts","sourceRoot":"","sources":["../../../../lib/utils/getErrorMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,UAuC5C"}
@@ -1,41 +0,0 @@
1
- /**
2
- * Creates an error message around a node. It will look something like:
3
- *
4
- * ```
5
- * Unknown type at: "fontSize".
6
- * File: test.ts, Line: 6, Character: 17.
7
- * const styles = createStyles({
8
- * fontSize: fontSize
9
- * ========
10
- * })
11
- * ```
12
- */
13
- export function getErrorMessage(node) {
14
- const sourceFile = node.getSourceFile();
15
- const { line } = node.getSourceFile().getLineAndCharacterOfPosition(node.pos);
16
- const lineStarts = sourceFile.getLineStarts();
17
- const lineStartIndex = lineStarts.findIndex(s => s >= node.pos) - 1;
18
- // get a whole line's text given a lineStarts index
19
- function getLine(sourceFile, startIndex) {
20
- const lineStarts = sourceFile.getLineStarts();
21
- return sourceFile.text.substring(lineStarts[Math.max(0, startIndex)], startIndex + 1 >= lineStarts.length ? undefined : lineStarts[startIndex + 1]);
22
- }
23
- // Create a full context message with source code and highlighting
24
- const lineBefore = getLine(sourceFile, lineStartIndex - 1);
25
- const lineCurrent = getLine(sourceFile, lineStartIndex);
26
- const lineAfter = getLine(sourceFile, lineStartIndex + 1);
27
- const highlightedLine = ''
28
- .padStart(node.getStart() - lineStarts[lineStartIndex], ' ')
29
- .padEnd(node.getStart() - lineStarts[lineStartIndex] + node.getWidth(), '=') + '\n';
30
- /** This should look something like:
31
- * ```
32
- * const styles = createStyles({
33
- * fontSize: fontSize
34
- * ========
35
- * })
36
- * ```
37
- */
38
- const fullContext = lineBefore + lineCurrent + highlightedLine + lineAfter;
39
- const character = node.getStart() - lineStarts[lineStartIndex];
40
- return `File: ${sourceFile.fileName}:${line + 1}:${character}.\n${fullContext}`;
41
- }