@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,76 +0,0 @@
|
|
|
1
|
-
import ts from 'typescript';
|
|
2
|
-
import { base, brand } from '@workday/canvas-tokens-web';
|
|
3
|
-
import { parseNodeToStaticValue } from './parseNodeToStaticValue';
|
|
4
|
-
export const handleFocusRing = (node, context) => {
|
|
5
|
-
// { ...focusRing() }
|
|
6
|
-
/**
|
|
7
|
-
* A spread assignment looks like:
|
|
8
|
-
*
|
|
9
|
-
* ```ts
|
|
10
|
-
* {
|
|
11
|
-
* ...styles
|
|
12
|
-
* }
|
|
13
|
-
* ```
|
|
14
|
-
*
|
|
15
|
-
* https://ts-ast-viewer.com/#code/MYewdgzgLgBFCmBbADjAvDA3gMxCAXDAOQBGAhgE5EC+AUKJLAigEzpYB0Xzy1QA
|
|
16
|
-
*/
|
|
17
|
-
if (ts.isSpreadAssignment(node)) {
|
|
18
|
-
// Detect `focusRing` calls. This is temporary until we figure out a better way to do focus
|
|
19
|
-
// rings that doesn't require a special entry in the transform function.
|
|
20
|
-
//
|
|
21
|
-
// TODO: implement a fully working type resolver for CSS variables or remove support for them an
|
|
22
|
-
// remove all uses of `focusRing` from new styling code
|
|
23
|
-
if (ts.isCallExpression(node.expression) &&
|
|
24
|
-
ts.isIdentifier(node.expression.expression) &&
|
|
25
|
-
node.expression.expression.text === 'focusRing') {
|
|
26
|
-
const argumentObject = node.expression.arguments[0];
|
|
27
|
-
// defaults
|
|
28
|
-
const defaults = {
|
|
29
|
-
width: ts.factory.createStringLiteral('2px'),
|
|
30
|
-
separation: ts.factory.createStringLiteral('0px'),
|
|
31
|
-
inset: ts.factory.createIdentifier('undefined'),
|
|
32
|
-
innerColor: ts.factory.createStringLiteral(base.frenchVanilla100),
|
|
33
|
-
outerColor: ts.factory.createStringLiteral(brand.common.focusOutline),
|
|
34
|
-
};
|
|
35
|
-
if (argumentObject && ts.isObjectLiteralExpression(argumentObject)) {
|
|
36
|
-
argumentObject.properties.forEach(property => {
|
|
37
|
-
if (ts.isPropertyAssignment(property) && ts.isIdentifier(property.name)) {
|
|
38
|
-
defaults[property.name.text] = property.initializer;
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
const inset = parseNodeToStaticValue(defaults.inset, context);
|
|
43
|
-
let boxShadow;
|
|
44
|
-
switch (inset) {
|
|
45
|
-
case 'outer':
|
|
46
|
-
boxShadow = createTemplateExpression('inset 0 0 0 ', defaults.separation, ' ', defaults.outerColor, ' inset 0 0 0 calc(', defaults.width, ' + ', defaults.separation, ') ', defaults.innerColor);
|
|
47
|
-
break;
|
|
48
|
-
case 'inner':
|
|
49
|
-
boxShadow = createTemplateExpression('inset 0 0 0 ', defaults.separation, ' ', defaults.innerColor, ', 0 0 0 ', defaults.width, ' ', defaults.outerColor);
|
|
50
|
-
break;
|
|
51
|
-
default:
|
|
52
|
-
boxShadow = createTemplateExpression('0 0 0 ', defaults.separation, ' ', defaults.innerColor, ', 0 0 0 calc(', defaults.width, ' + ', defaults.separation, ') ', defaults.outerColor);
|
|
53
|
-
break;
|
|
54
|
-
}
|
|
55
|
-
return ts.factory.createSpreadAssignment(ts.factory.createObjectLiteralExpression([
|
|
56
|
-
ts.factory.createPropertyAssignment(ts.factory.createIdentifier('boxShadow'), boxShadow),
|
|
57
|
-
], false));
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
return;
|
|
61
|
-
};
|
|
62
|
-
function createTemplateExpression(head, ...args) {
|
|
63
|
-
const headNode = ts.factory.createTemplateHead(head);
|
|
64
|
-
const spanNodes = args.reduce((result, value, index) => {
|
|
65
|
-
if (typeof value !== 'string') {
|
|
66
|
-
const literal = index === args.length - 1
|
|
67
|
-
? ts.factory.createTemplateTail('')
|
|
68
|
-
: index === args.length - 2
|
|
69
|
-
? ts.factory.createTemplateTail(args[index + 1])
|
|
70
|
-
: ts.factory.createTemplateMiddle(args[index + 1]);
|
|
71
|
-
result.push(ts.factory.createTemplateSpan(value, literal));
|
|
72
|
-
}
|
|
73
|
-
return result;
|
|
74
|
-
}, []);
|
|
75
|
-
return ts.factory.createTemplateExpression(headNode, spanNodes);
|
|
76
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"handleKeyframes.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handleKeyframes.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAOxC,eAAO,MAAM,eAAe,EAAE,eA+C7B,CAAC"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import ts from 'typescript';
|
|
2
|
-
import { parseNodeToStaticValue } from './parseNodeToStaticValue';
|
|
3
|
-
import { getVarName } from './getVarName';
|
|
4
|
-
import { createStyleObjectNode, getStaticCssClassName } from './createStyleObjectNode';
|
|
5
|
-
import { isImportedFromStyling } from './isImportedFromStyling';
|
|
6
|
-
import { parseObjectToStaticValue } from './parseObjectToStaticValue';
|
|
7
|
-
export const handleKeyframes = (node, context) => {
|
|
8
|
-
const { checker, keyframes } = context;
|
|
9
|
-
// keyframes`css`
|
|
10
|
-
if (ts.isTaggedTemplateExpression(node) &&
|
|
11
|
-
ts.isIdentifier(node.tag) &&
|
|
12
|
-
node.tag.text === 'keyframes' &&
|
|
13
|
-
isImportedFromStyling(node.tag, checker)) {
|
|
14
|
-
// parseNodeToStaticValue can parse templates. Pass it through there to get a single static string
|
|
15
|
-
const styleObjNode = createStyleObjectNode(parseNodeToStaticValue(node.template, context), '{hash}');
|
|
16
|
-
const identifierName = getVarName(node);
|
|
17
|
-
const name = getStaticCssClassName(styleObjNode);
|
|
18
|
-
keyframes[identifierName] = `animation-${name}`;
|
|
19
|
-
return ts.factory.createCallExpression(ts.factory.createIdentifier('keyframes'), undefined, [
|
|
20
|
-
styleObjNode,
|
|
21
|
-
]);
|
|
22
|
-
}
|
|
23
|
-
// keyframes({})
|
|
24
|
-
if (ts.isCallExpression(node) &&
|
|
25
|
-
ts.isIdentifier(node.expression) &&
|
|
26
|
-
node.expression.text === 'keyframes' &&
|
|
27
|
-
isImportedFromStyling(node.expression, checker)) {
|
|
28
|
-
if (ts.isObjectLiteralExpression(node.arguments[0])) {
|
|
29
|
-
const styleObj = parseObjectToStaticValue(node.arguments[0], context);
|
|
30
|
-
const styleObjNode = createStyleObjectNode(styleObj, '{hash}');
|
|
31
|
-
const identifierName = getVarName(node);
|
|
32
|
-
const name = getStaticCssClassName(styleObjNode);
|
|
33
|
-
keyframes[identifierName] = `animation-${name}`;
|
|
34
|
-
return ts.factory.createCallExpression(ts.factory.createIdentifier('keyframes'), undefined, [
|
|
35
|
-
styleObjNode,
|
|
36
|
-
]);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
return;
|
|
40
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"handlePx2Rem.d.ts","sourceRoot":"","sources":["../../../../lib/utils/handlePx2Rem.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,eAkB1B,CAAC"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import ts from 'typescript';
|
|
2
|
-
import { isImportedFromStyling } from './isImportedFromStyling';
|
|
3
|
-
/**
|
|
4
|
-
* Handle the CallExpression `px2rem` to do static conversion and remove the CallExpression.
|
|
5
|
-
*/
|
|
6
|
-
export const handlePx2Rem = (node, context) => {
|
|
7
|
-
if (ts.isCallExpression(node) &&
|
|
8
|
-
ts.isIdentifier(node.expression) &&
|
|
9
|
-
node.expression.text === 'px2rem' &&
|
|
10
|
-
isImportedFromStyling(node.expression, context.checker)) {
|
|
11
|
-
const [pxArgument, baseArgument] = node.arguments;
|
|
12
|
-
const base = baseArgument && ts.isNumericLiteral(baseArgument) ? parseFloat(baseArgument.text) : 16;
|
|
13
|
-
if (ts.isNumericLiteral(pxArgument)) {
|
|
14
|
-
const px = parseFloat(pxArgument.text);
|
|
15
|
-
return ts.factory.createStringLiteral(`${px / base}rem`);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
return;
|
|
19
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import ts from 'typescript';
|
|
2
|
-
/**
|
|
3
|
-
* Checks if the node was imported from '@workday/canvas-kit-styling'. This is useful if you want to
|
|
4
|
-
* limit transformation to only styling imports.
|
|
5
|
-
*/
|
|
6
|
-
export declare function isImportedFromStyling(node: ts.Node, checker: ts.TypeChecker): boolean;
|
|
7
|
-
//# sourceMappingURL=isImportedFromStyling.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isImportedFromStyling.d.ts","sourceRoot":"","sources":["../../../../lib/utils/isImportedFromStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,WAc3E"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import ts from 'typescript';
|
|
2
|
-
/**
|
|
3
|
-
* Checks if the node was imported from '@workday/canvas-kit-styling'. This is useful if you want to
|
|
4
|
-
* limit transformation to only styling imports.
|
|
5
|
-
*/
|
|
6
|
-
export function isImportedFromStyling(node, checker) {
|
|
7
|
-
const symbol = checker.getSymbolAtLocation(node);
|
|
8
|
-
const declaration = (symbol === null || symbol === void 0 ? void 0 : symbol.valueDeclaration) || (symbol === null || symbol === void 0 ? void 0 : symbol.declarations[0]);
|
|
9
|
-
if (declaration &&
|
|
10
|
-
ts.isImportSpecifier(declaration) &&
|
|
11
|
-
ts.isStringLiteral(declaration.parent.parent.parent.moduleSpecifier) &&
|
|
12
|
-
declaration.parent.parent.parent.moduleSpecifier.text === '@workday/canvas-kit-styling') {
|
|
13
|
-
return true;
|
|
14
|
-
}
|
|
15
|
-
return false;
|
|
16
|
-
}
|
|
@@ -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,11 +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 function makeEmotionSafe(key) {
|
|
7
|
-
if (key.endsWith('label')) {
|
|
8
|
-
return `${key}-emotion-safe`;
|
|
9
|
-
}
|
|
10
|
-
return key;
|
|
11
|
-
}
|
|
@@ -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,142 +0,0 @@
|
|
|
1
|
-
import ts from 'typescript';
|
|
2
|
-
import { slugify } from '@workday/canvas-kit-styling';
|
|
3
|
-
import { makeEmotionSafe } from './makeEmotionSafe';
|
|
4
|
-
import { getErrorMessage } from './getErrorMessage';
|
|
5
|
-
/**
|
|
6
|
-
* This is the workhorse of statically analyzing style values
|
|
7
|
-
*/
|
|
8
|
-
export function parseNodeToStaticValue(node, context) {
|
|
9
|
-
const { checker, variables, keyframes } = context;
|
|
10
|
-
/**
|
|
11
|
-
* String literals like 'red' or empty Template Expressions like `red`
|
|
12
|
-
*/
|
|
13
|
-
if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
|
|
14
|
-
return node.text;
|
|
15
|
-
}
|
|
16
|
-
// 12
|
|
17
|
-
if (ts.isNumericLiteral(node)) {
|
|
18
|
-
return `${node.text}px`;
|
|
19
|
-
}
|
|
20
|
-
// undefined
|
|
21
|
-
if (ts.isIdentifier(node) && node.text === 'undefined') {
|
|
22
|
-
return 'undefined';
|
|
23
|
-
}
|
|
24
|
-
// a.b
|
|
25
|
-
if (ts.isPropertyAccessExpression(node)) {
|
|
26
|
-
const varName = getCSSVariableKey(getPropertyAccessExpressionText(node));
|
|
27
|
-
if (variables[varName]) {
|
|
28
|
-
return variables[varName];
|
|
29
|
-
}
|
|
30
|
-
if (keyframes[varName]) {
|
|
31
|
-
return keyframes[varName];
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
// [a.b]
|
|
35
|
-
if (ts.isComputedPropertyName(node) && ts.isPropertyAccessExpression(node.expression)) {
|
|
36
|
-
const varName = getCSSVariableKey(getPropertyAccessExpressionText(node.expression));
|
|
37
|
-
if (variables[varName]) {
|
|
38
|
-
return variables[varName];
|
|
39
|
-
}
|
|
40
|
-
if (keyframes[varName]) {
|
|
41
|
-
return keyframes[varName];
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
/**
|
|
45
|
-
* ```ts
|
|
46
|
-
* `border 1px ${myVars.colors.border}`
|
|
47
|
-
* ```
|
|
48
|
-
*/
|
|
49
|
-
if (ts.isTemplateExpression(node)) {
|
|
50
|
-
return getStyleValueFromTemplateExpression(node, context);
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* An Identifier is a simple variable. It may represent a variable, so we'll check it before
|
|
54
|
-
* moving on. This typically happens in stencils.
|
|
55
|
-
*/
|
|
56
|
-
if (ts.isIdentifier(node)) {
|
|
57
|
-
if (variables[node.text]) {
|
|
58
|
-
return variables[node.text];
|
|
59
|
-
}
|
|
60
|
-
if (keyframes[node.text]) {
|
|
61
|
-
return keyframes[node.text];
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
if (ts.isElementAccessExpression(node)) {
|
|
65
|
-
const value = parseTypeToStaticValue(checker.getTypeAtLocation(node));
|
|
66
|
-
if (value) {
|
|
67
|
-
return value;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
// If we got here, we cannot statically analyze by the AST alone. We have to check the type of the
|
|
71
|
-
// correct AST Node
|
|
72
|
-
if (ts.isIdentifier(node) || ts.isPropertyAccessExpression(node)) {
|
|
73
|
-
const value = parseTypeToStaticValue(checker.getTypeAtLocation(node));
|
|
74
|
-
if (value) {
|
|
75
|
-
return value;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
if (ts.isComputedPropertyName(node)) {
|
|
79
|
-
const value = parseTypeToStaticValue(checker.getTypeAtLocation(node.expression));
|
|
80
|
-
if (value) {
|
|
81
|
-
return value;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
// we don't know what this is, we need to throw an error
|
|
85
|
-
const type = checker.getTypeAtLocation(node);
|
|
86
|
-
const typeValue = checker.typeToString(type);
|
|
87
|
-
throw new Error(`Unknown type at: "${node.getText()}". Received "${typeValue}"\n${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.`);
|
|
88
|
-
}
|
|
89
|
-
function parseTypeToStaticValue(type) {
|
|
90
|
-
if (type.isStringLiteral()) {
|
|
91
|
-
return type.value;
|
|
92
|
-
}
|
|
93
|
-
if (type.isNumberLiteral()) {
|
|
94
|
-
return `${type.value}px`;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
function getCSSVariableKey(text) {
|
|
98
|
-
const [id, name] = getVariableNameParts(text);
|
|
99
|
-
return `${slugify(id)}-${makeEmotionSafe(name)}`;
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* A `PropertyExpression` is an expression with a dot in it. Like `a.b.c`. It may be nested. This
|
|
103
|
-
* function will walk the AST and create a string like `a.b.c` to be passed on to variable name
|
|
104
|
-
* generation. This will be used for CSS variable lookups.
|
|
105
|
-
*/
|
|
106
|
-
function getPropertyAccessExpressionText(node) {
|
|
107
|
-
if (ts.isIdentifier(node.name)) {
|
|
108
|
-
if (ts.isIdentifier(node.expression)) {
|
|
109
|
-
return `${node.expression.text}.${node.name.text}`;
|
|
110
|
-
}
|
|
111
|
-
if (ts.isPropertyAccessExpression(node.expression)) {
|
|
112
|
-
return `${getPropertyAccessExpressionText(node.expression)}.${node.name.text}`;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
return '';
|
|
116
|
-
}
|
|
117
|
-
function getVariableNameParts(input) {
|
|
118
|
-
const parts = input.split('.');
|
|
119
|
-
// grab the last item in the array. This will also mutate the array, removing the last item
|
|
120
|
-
const variable = parts.pop();
|
|
121
|
-
return [parts.join('.').replace(/(vars|stencil|styles)/i, ''), variable];
|
|
122
|
-
}
|
|
123
|
-
/**
|
|
124
|
-
* Gets a static string value from a template expression. It could recurse.
|
|
125
|
-
*/
|
|
126
|
-
function getStyleValueFromTemplateExpression(node, context) {
|
|
127
|
-
if (!node) {
|
|
128
|
-
return '';
|
|
129
|
-
}
|
|
130
|
-
if (ts.isTemplateExpression(node)) {
|
|
131
|
-
return (getStyleValueFromTemplateExpression(node.head, context) +
|
|
132
|
-
node.templateSpans.map(value => getStyleValueFromTemplateExpression(value, context)).join(''));
|
|
133
|
-
}
|
|
134
|
-
if (ts.isTemplateHead(node) || ts.isTemplateTail(node) || ts.isTemplateMiddle(node)) {
|
|
135
|
-
return node.text;
|
|
136
|
-
}
|
|
137
|
-
if (ts.isTemplateSpan(node)) {
|
|
138
|
-
return (parseNodeToStaticValue(node.expression, context) +
|
|
139
|
-
getStyleValueFromTemplateExpression(node.literal, context));
|
|
140
|
-
}
|
|
141
|
-
return '';
|
|
142
|
-
}
|
|
@@ -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,110 +0,0 @@
|
|
|
1
|
-
import ts from 'typescript';
|
|
2
|
-
import { getFallbackVariable } from './getFallbackVariable';
|
|
3
|
-
import { parseNodeToStaticValue } from './parseNodeToStaticValue';
|
|
4
|
-
export function parseObjectToStaticValue(node, context) {
|
|
5
|
-
let styleObj = {};
|
|
6
|
-
if (ts.isObjectLiteralExpression(node)) {
|
|
7
|
-
node.properties.forEach(property => {
|
|
8
|
-
styleObj = { ...styleObj, ...parsePropertyToStaticValue(property, context) };
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
return styleObj;
|
|
12
|
-
}
|
|
13
|
-
function parsePropertyToStaticValue(node, context) {
|
|
14
|
-
const styleObj = {};
|
|
15
|
-
// { name: value }
|
|
16
|
-
if (ts.isPropertyAssignment(node)) {
|
|
17
|
-
const key = ts.isIdentifier(node.name)
|
|
18
|
-
? node.name.text
|
|
19
|
-
: parseNodeToStaticValue(node.name, context);
|
|
20
|
-
if (key) {
|
|
21
|
-
if (ts.isObjectLiteralExpression(node.initializer)) {
|
|
22
|
-
// nested
|
|
23
|
-
styleObj[key] = parseObjectToStaticValue(node.initializer, context);
|
|
24
|
-
}
|
|
25
|
-
else {
|
|
26
|
-
styleObj[key] = maybeWrapCSSVariables(parseNodeToStaticValue(node.initializer, context), context.variables);
|
|
27
|
-
parseNodeToStaticValue(node.initializer, context);
|
|
28
|
-
}
|
|
29
|
-
return styleObj;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
// { name: value } (types)
|
|
33
|
-
if (ts.isPropertySignature(node)) {
|
|
34
|
-
const key = ts.isIdentifier(node.name)
|
|
35
|
-
? node.name.text
|
|
36
|
-
: parseNodeToStaticValue(node.name, context);
|
|
37
|
-
if (key) {
|
|
38
|
-
if (key.includes('&') || key.startsWith(':')) {
|
|
39
|
-
// nested
|
|
40
|
-
styleObj[key] = parseObjectToStaticValue(node.type, context);
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
styleObj[key] =
|
|
44
|
-
maybeWrapCSSVariables(parseNodeToStaticValue(node.type, context), context.variables) ||
|
|
45
|
-
'';
|
|
46
|
-
}
|
|
47
|
-
return styleObj;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
// {...{key: 'value'}}
|
|
51
|
-
if (ts.isSpreadAssignment(node) && ts.isObjectLiteralExpression(node.expression)) {
|
|
52
|
-
// recurse to parse a nested ObjectLiteralExpression
|
|
53
|
-
return parseObjectToStaticValue(node.expression, context);
|
|
54
|
-
}
|
|
55
|
-
// { ...value }
|
|
56
|
-
if (ts.isSpreadAssignment(node)) {
|
|
57
|
-
// Spread assignments are a bit complicated to use the AST to figure out, so we'll ask the
|
|
58
|
-
// TypeScript type checker.
|
|
59
|
-
const type = context.checker.getTypeAtLocation(node.expression);
|
|
60
|
-
context.checker.typeToString(type);
|
|
61
|
-
return parseStyleObjFromType(type, context);
|
|
62
|
-
}
|
|
63
|
-
return styleObj;
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* If we're here, we have a `ts.Type` that represents a style object. We try to parse a style object
|
|
67
|
-
* from the AST, but we might have something that is more complicated like a function call or an
|
|
68
|
-
* identifier that represents an object. It could be imported from another file.
|
|
69
|
-
*/
|
|
70
|
-
export function parseStyleObjFromType(type, context) {
|
|
71
|
-
const styleObj = {};
|
|
72
|
-
// Gets all the properties of the type object
|
|
73
|
-
return type.getProperties().reduce((result, property) => {
|
|
74
|
-
const declaration = property.valueDeclaration;
|
|
75
|
-
// we might have generics, so we'll use the type of the symbol instead of the type at the
|
|
76
|
-
// declaration. This resolves generics like `T` into literal values if they exist.
|
|
77
|
-
const propType = context.checker.getTypeOfSymbolAtLocation(property, declaration);
|
|
78
|
-
if (propType.isStringLiteral()) {
|
|
79
|
-
// This isn't a component variable, it is a static CSS variable
|
|
80
|
-
result[property.name] = propType.value;
|
|
81
|
-
return result;
|
|
82
|
-
}
|
|
83
|
-
if (propType.isNumberLiteral()) {
|
|
84
|
-
result[property.name] = `${propType.value}px`;
|
|
85
|
-
return result;
|
|
86
|
-
}
|
|
87
|
-
return {
|
|
88
|
-
...result,
|
|
89
|
-
...parsePropertyToStaticValue(declaration, context),
|
|
90
|
-
};
|
|
91
|
-
}, styleObj);
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
* Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with
|
|
95
|
-
* `{padding: 'var(--foo)'}`. It also works on variables in the middle of the property.
|
|
96
|
-
*/
|
|
97
|
-
function maybeWrapCSSVariables(input, variables) {
|
|
98
|
-
// matches an string starting with `--` that isn't already wrapped in a `var()`. It tries to match
|
|
99
|
-
// any character that isn't a valid separator in CSS
|
|
100
|
-
return input.replace(/([a-z]*[ (]*)(--[^\s;,'})]+)/gi, (match, prefix, variable) => {
|
|
101
|
-
if (prefix.startsWith('var(')) {
|
|
102
|
-
return match;
|
|
103
|
-
}
|
|
104
|
-
const fallbackVariable = getFallbackVariable(variable, variables);
|
|
105
|
-
const fallback = fallbackVariable
|
|
106
|
-
? `, ${maybeWrapCSSVariables(fallbackVariable, variables)}`
|
|
107
|
-
: '';
|
|
108
|
-
return `${prefix}var(${variable}${fallback})`;
|
|
109
|
-
});
|
|
110
|
-
}
|
|
@@ -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 +0,0 @@
|
|
|
1
|
-
export {};
|