@workday/canvas-kit-styling-transform 10.3.2 → 10.3.3
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.
- package/index.ts +5 -0
- package/package.json +6 -14
- package/testing.ts +3 -0
- package/dist/commonjs/index.d.ts +0 -3
- package/dist/commonjs/index.d.ts.map +0 -1
- package/dist/commonjs/index.js +0 -7
- package/dist/commonjs/lib/styleTransform.d.ts +0 -23
- package/dist/commonjs/lib/styleTransform.d.ts.map +0 -1
- package/dist/commonjs/lib/styleTransform.js +0 -103
- package/dist/commonjs/lib/utils/createStyleObjectNode.d.ts +0 -18
- package/dist/commonjs/lib/utils/createStyleObjectNode.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/createStyleObjectNode.js +0 -47
- package/dist/commonjs/lib/utils/getCssVariables.d.ts +0 -4
- package/dist/commonjs/lib/utils/getCssVariables.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/getCssVariables.js +0 -31
- package/dist/commonjs/lib/utils/getErrorMessage.d.ts +0 -15
- package/dist/commonjs/lib/utils/getErrorMessage.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/getErrorMessage.js +0 -45
- package/dist/commonjs/lib/utils/getFallbackVariable.d.ts +0 -9
- package/dist/commonjs/lib/utils/getFallbackVariable.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/getFallbackVariable.js +0 -30
- package/dist/commonjs/lib/utils/getVarName.d.ts +0 -17
- package/dist/commonjs/lib/utils/getVarName.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/getVarName.js +0 -33
- package/dist/commonjs/lib/utils/handleCalc.d.ts +0 -19
- package/dist/commonjs/lib/utils/handleCalc.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/handleCalc.js +0 -62
- package/dist/commonjs/lib/utils/handleCreateStencil.d.ts +0 -6
- package/dist/commonjs/lib/utils/handleCreateStencil.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/handleCreateStencil.js +0 -203
- package/dist/commonjs/lib/utils/handleCreateStyles.d.ts +0 -3
- package/dist/commonjs/lib/utils/handleCreateStyles.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/handleCreateStyles.js +0 -110
- package/dist/commonjs/lib/utils/handleCreateVars.d.ts +0 -3
- package/dist/commonjs/lib/utils/handleCreateVars.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/handleCreateVars.js +0 -34
- package/dist/commonjs/lib/utils/handleCssVar.d.ts +0 -12
- package/dist/commonjs/lib/utils/handleCssVar.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/handleCssVar.js +0 -33
- package/dist/commonjs/lib/utils/handleFocusRing.d.ts +0 -3
- package/dist/commonjs/lib/utils/handleFocusRing.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/handleFocusRing.js +0 -83
- package/dist/commonjs/lib/utils/handleKeyframes.d.ts +0 -3
- package/dist/commonjs/lib/utils/handleKeyframes.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/handleKeyframes.js +0 -47
- package/dist/commonjs/lib/utils/handlePx2Rem.d.ts +0 -6
- package/dist/commonjs/lib/utils/handlePx2Rem.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/handlePx2Rem.js +0 -26
- package/dist/commonjs/lib/utils/isImportedFromStyling.d.ts +0 -7
- package/dist/commonjs/lib/utils/isImportedFromStyling.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/isImportedFromStyling.js +0 -23
- package/dist/commonjs/lib/utils/makeEmotionSafe.d.ts +0 -7
- package/dist/commonjs/lib/utils/makeEmotionSafe.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/makeEmotionSafe.js +0 -15
- package/dist/commonjs/lib/utils/parseNodeToStaticValue.d.ts +0 -7
- package/dist/commonjs/lib/utils/parseNodeToStaticValue.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/parseNodeToStaticValue.js +0 -149
- package/dist/commonjs/lib/utils/parseObjectToStaticValue.d.ts +0 -13
- package/dist/commonjs/lib/utils/parseObjectToStaticValue.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/parseObjectToStaticValue.js +0 -118
- package/dist/commonjs/lib/utils/types.d.ts +0 -16
- package/dist/commonjs/lib/utils/types.d.ts.map +0 -1
- package/dist/commonjs/lib/utils/types.js +0 -2
- package/dist/es6/index.d.ts +0 -3
- package/dist/es6/index.d.ts.map +0 -1
- package/dist/es6/index.js +0 -2
- package/dist/es6/lib/styleTransform.d.ts +0 -23
- package/dist/es6/lib/styleTransform.d.ts.map +0 -1
- package/dist/es6/lib/styleTransform.js +0 -94
- package/dist/es6/lib/utils/createStyleObjectNode.d.ts +0 -18
- package/dist/es6/lib/utils/createStyleObjectNode.d.ts.map +0 -1
- package/dist/es6/lib/utils/createStyleObjectNode.js +0 -39
- package/dist/es6/lib/utils/getCssVariables.d.ts +0 -4
- package/dist/es6/lib/utils/getCssVariables.d.ts.map +0 -1
- package/dist/es6/lib/utils/getCssVariables.js +0 -26
- package/dist/es6/lib/utils/getErrorMessage.d.ts +0 -15
- package/dist/es6/lib/utils/getErrorMessage.d.ts.map +0 -1
- package/dist/es6/lib/utils/getErrorMessage.js +0 -41
- package/dist/es6/lib/utils/getFallbackVariable.d.ts +0 -9
- package/dist/es6/lib/utils/getFallbackVariable.d.ts.map +0 -1
- package/dist/es6/lib/utils/getFallbackVariable.js +0 -26
- package/dist/es6/lib/utils/getVarName.d.ts +0 -17
- package/dist/es6/lib/utils/getVarName.d.ts.map +0 -1
- package/dist/es6/lib/utils/getVarName.js +0 -26
- package/dist/es6/lib/utils/handleCalc.d.ts +0 -19
- package/dist/es6/lib/utils/handleCalc.d.ts.map +0 -1
- package/dist/es6/lib/utils/handleCalc.js +0 -55
- package/dist/es6/lib/utils/handleCreateStencil.d.ts +0 -6
- package/dist/es6/lib/utils/handleCreateStencil.d.ts.map +0 -1
- package/dist/es6/lib/utils/handleCreateStencil.js +0 -196
- package/dist/es6/lib/utils/handleCreateStyles.d.ts +0 -3
- package/dist/es6/lib/utils/handleCreateStyles.d.ts.map +0 -1
- package/dist/es6/lib/utils/handleCreateStyles.js +0 -103
- package/dist/es6/lib/utils/handleCreateVars.d.ts +0 -3
- package/dist/es6/lib/utils/handleCreateVars.d.ts.map +0 -1
- package/dist/es6/lib/utils/handleCreateVars.js +0 -27
- package/dist/es6/lib/utils/handleCssVar.d.ts +0 -12
- package/dist/es6/lib/utils/handleCssVar.d.ts.map +0 -1
- package/dist/es6/lib/utils/handleCssVar.js +0 -26
- package/dist/es6/lib/utils/handleFocusRing.d.ts +0 -3
- package/dist/es6/lib/utils/handleFocusRing.d.ts.map +0 -1
- package/dist/es6/lib/utils/handleFocusRing.js +0 -76
- package/dist/es6/lib/utils/handleKeyframes.d.ts +0 -3
- package/dist/es6/lib/utils/handleKeyframes.d.ts.map +0 -1
- package/dist/es6/lib/utils/handleKeyframes.js +0 -40
- package/dist/es6/lib/utils/handlePx2Rem.d.ts +0 -6
- package/dist/es6/lib/utils/handlePx2Rem.d.ts.map +0 -1
- package/dist/es6/lib/utils/handlePx2Rem.js +0 -19
- package/dist/es6/lib/utils/isImportedFromStyling.d.ts +0 -7
- package/dist/es6/lib/utils/isImportedFromStyling.d.ts.map +0 -1
- package/dist/es6/lib/utils/isImportedFromStyling.js +0 -16
- package/dist/es6/lib/utils/makeEmotionSafe.d.ts +0 -7
- package/dist/es6/lib/utils/makeEmotionSafe.d.ts.map +0 -1
- package/dist/es6/lib/utils/makeEmotionSafe.js +0 -11
- package/dist/es6/lib/utils/parseNodeToStaticValue.d.ts +0 -7
- package/dist/es6/lib/utils/parseNodeToStaticValue.d.ts.map +0 -1
- package/dist/es6/lib/utils/parseNodeToStaticValue.js +0 -142
- package/dist/es6/lib/utils/parseObjectToStaticValue.d.ts +0 -13
- package/dist/es6/lib/utils/parseObjectToStaticValue.d.ts.map +0 -1
- package/dist/es6/lib/utils/parseObjectToStaticValue.js +0 -110
- package/dist/es6/lib/utils/types.d.ts +0 -16
- package/dist/es6/lib/utils/types.d.ts.map +0 -1
- 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"}
|
package/dist/es6/index.d.ts
DELETED
package/dist/es6/index.d.ts.map
DELETED
|
@@ -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,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
|
-
}
|