@workday/canvas-kit-styling-transform 10.1.1 → 10.1.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.
Files changed (5) hide show
  1. package/dist/commonjs/lib/styleTransform.d.ts.map +1 -1
  2. package/dist/commonjs/lib/styleTransform.js +14 -3
  3. package/dist/es6/lib/styleTransform.d.ts.map +1 -1
  4. package/dist/es6/lib/styleTransform.js +14 -3
  5. package/package.json +3 -3
package/dist/commonjs/lib/styleTransform.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styleTransform.d.ts","sourceRoot":"","sources":["../../../lib/styleTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAmZ5E,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,EAAC,MAAc,EAAE,SAAc,EAAE,aAAa,EAAC,GAAE,OAAO,CAAC,uBAAuB,CAG/E,GACA,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAgLtC;AAGD,wBAAgB,SAAS,CACvB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,UAY3C"}
1
+ {"version":3,"file":"styleTransform.d.ts","sourceRoot":"","sources":["../../../lib/styleTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AA+Z5E,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,EAAC,MAAc,EAAE,SAAc,EAAE,aAAa,EAAC,GAAE,OAAO,CAAC,uBAAuB,CAG/E,GACA,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAgLtC;AAGD,wBAAgB,SAAS,CACvB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,UAY3C"}
package/dist/commonjs/lib/styleTransform.js CHANGED
@@ -27,6 +27,17 @@ function getStyleValueFromType(node, type, checker) {
27
27
  const typeValue = checker.typeToString(type);
28
28
  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.`);
29
29
  }
30
+ /**
31
+ * Util function to fix an issue with Emotion by
32
+ * appending `EmotionIssue#3066` to end of css variable
33
+ * See issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)
34
+ */
35
+ const makeEmotionSafe = (key) => {
36
+ if (key.endsWith('label')) {
37
+ return `${key}-emotion-safe`;
38
+ }
39
+ return key;
40
+ };
30
41
  /**
31
42
  * A `PropertyExpression` is an expression with a dot in it. Like `a.b.c`. It may be nested. This
32
43
  * function will walk the AST and create a string like `a.b.c` to be passed on to variable name
@@ -198,7 +209,7 @@ function getStyleFromProperty(property, prefix, variables, checker) {
198
209
  else {
199
210
  const expressionText = getPropertyAccessExpressionText(property.name.expression);
200
211
  const [id, name] = getVariableNameParts(expressionText);
201
- return { [`--${prefix}-${canvas_kit_styling_1.slugify(id)}-${name}`]: value };
212
+ return { [`--${prefix}-${canvas_kit_styling_1.slugify(id)}-${makeEmotionSafe(name)}`]: value };
202
213
  }
203
214
  }
204
215
  }
@@ -453,7 +464,7 @@ function styleTransformer(program, { prefix = 'css', variables = {}, fallbackFil
453
464
  .map(arg => typescript_1.default.isStringLiteral(arg) && arg.text)
454
465
  .filter(Boolean);
455
466
  variables.forEach(v => {
456
- vars[`${id}-${v}`] = `--${prefix}-${id}-${v}`;
467
+ vars[`${id}-${makeEmotionSafe(v)}`] = `--${prefix}-${id}-${makeEmotionSafe(v)}`;
457
468
  });
458
469
  return typescript_1.default.factory.createCallExpression(node.expression, [], [
459
470
  typescript_1.default.factory.createObjectLiteralExpression([
@@ -539,7 +550,7 @@ function getVarsKeyFromNode(node) {
539
550
  return canvas_kit_styling_1.slugify(node.text);
540
551
  }
541
552
  if (typescript_1.default.isPropertyAccessExpression(node) && typescript_1.default.isIdentifier(node.name)) {
542
- return `${getVarsKeyFromNode(node.expression)}-${node.name.text}`;
553
+ return `${getVarsKeyFromNode(node.expression)}-${makeEmotionSafe(node.name.text)}`;
543
554
  }
544
555
  return '';
545
556
  }
package/dist/es6/lib/styleTransform.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styleTransform.d.ts","sourceRoot":"","sources":["../../../lib/styleTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AAmZ5E,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,EAAC,MAAc,EAAE,SAAc,EAAE,aAAa,EAAC,GAAE,OAAO,CAAC,uBAAuB,CAG/E,GACA,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAgLtC;AAGD,wBAAgB,SAAS,CACvB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,UAY3C"}
1
+ {"version":3,"file":"styleTransform.d.ts","sourceRoot":"","sources":["../../../lib/styleTransform.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,oBAAY,iBAAiB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,iBAAiB,CAAA;CAAC,CAAC;AA+Z5E,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,EAAC,MAAc,EAAE,SAAc,EAAE,aAAa,EAAC,GAAE,OAAO,CAAC,uBAAuB,CAG/E,GACA,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,UAAU,CAAC,CAgLtC;AAGD,wBAAgB,SAAS,CACvB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,UAY3C"}
package/dist/es6/lib/styleTransform.js CHANGED
@@ -21,6 +21,17 @@ function getStyleValueFromType(node, type, checker) {
21
21
  const typeValue = checker.typeToString(type);
22
22
  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.`);
23
23
  }
24
+ /**
25
+ * Util function to fix an issue with Emotion by
26
+ * appending `EmotionIssue#3066` to end of css variable
27
+ * See issue: [#3066](https://github.com/emotion-js/emotion/issues/3066)
28
+ */
29
+ const makeEmotionSafe = (key) => {
30
+ if (key.endsWith('label')) {
31
+ return `${key}-emotion-safe`;
32
+ }
33
+ return key;
34
+ };
24
35
  /**
25
36
  * A `PropertyExpression` is an expression with a dot in it. Like `a.b.c`. It may be nested. This
26
37
  * function will walk the AST and create a string like `a.b.c` to be passed on to variable name
@@ -192,7 +203,7 @@ function getStyleFromProperty(property, prefix, variables, checker) {
192
203
  else {
193
204
  const expressionText = getPropertyAccessExpressionText(property.name.expression);
194
205
  const [id, name] = getVariableNameParts(expressionText);
195
- return { [`--${prefix}-${slugify(id)}-${name}`]: value };
206
+ return { [`--${prefix}-${slugify(id)}-${makeEmotionSafe(name)}`]: value };
196
207
  }
197
208
  }
198
209
  }
@@ -447,7 +458,7 @@ export default function styleTransformer(program, { prefix = 'css', variables =
447
458
  .map(arg => ts.isStringLiteral(arg) && arg.text)
448
459
  .filter(Boolean);
449
460
  variables.forEach(v => {
450
- vars[`${id}-${v}`] = `--${prefix}-${id}-${v}`;
461
+ vars[`${id}-${makeEmotionSafe(v)}`] = `--${prefix}-${id}-${makeEmotionSafe(v)}`;
451
462
  });
452
463
  return ts.factory.createCallExpression(node.expression, [], [
453
464
  ts.factory.createObjectLiteralExpression([
@@ -531,7 +542,7 @@ function getVarsKeyFromNode(node) {
531
542
  return slugify(node.text);
532
543
  }
533
544
  if (ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.name)) {
534
- return `${getVarsKeyFromNode(node.expression)}-${node.name.text}`;
545
+ return `${getVarsKeyFromNode(node.expression)}-${makeEmotionSafe(node.name.text)}`;
535
546
  }
536
547
  return '';
537
548
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-styling-transform",
3
- "version": "10.1.1",
3
+ "version": "10.1.3",
4
4
  "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -41,10 +41,10 @@
41
41
  ],
42
42
  "dependencies": {
43
43
  "@emotion/serialize": "^1.0.2",
44
- "@workday/canvas-kit-styling": "^10.1.1",
44
+ "@workday/canvas-kit-styling": "^10.1.3",
45
45
  "@workday/canvas-tokens-web": "^1.0.0",
46
46
  "stylis": "4.0.13",
47
47
  "typescript": "4.2"
48
48
  },
49
- "gitHead": "3b9862b89280bd74fb5edf8a5c6c33bafce9f1c0"
49
+ "gitHead": "2936b4918f4df739c86417d45700bbde98130fe9"
50
50
  }