@workday/canvas-kit-styling 10.0.5 → 10.0.7

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.
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { Keyframes, SerializedStyles, CSSObject } from '@emotion/serialize';
3
+ export declare const createStylesCache: Record<string, boolean>;
3
4
  /**
4
5
  * Style properties in a JavaScript camelCase. Everything Emotion allows is also
5
6
  * allowed here.
@@ -84,8 +85,13 @@ export declare function createVars<T extends string, ID extends string>(input: {
84
85
  }): CsVars<T, ID>;
85
86
  export declare function createVars<T extends string>(...args: T[]): CsVars<T, never>;
86
87
  declare type ModifierConfig = Record<string, Record<string, CS>>;
88
+ /**
89
+ * Helper type to convert `'true'` into `true` for boolean modifiers which are a pain to type as a
90
+ * prop.
91
+ */
92
+ declare type MaybeBoolean<T> = T extends 'true' ? true : T extends 'false' ? false : T;
87
93
  declare type ModifierValues<T extends ModifierConfig> = {
88
- [P in keyof T]: keyof T[P];
94
+ [P in keyof T]: MaybeBoolean<keyof T[P]>;
89
95
  };
90
96
  declare type ModifierReturn<T extends ModifierConfig> = T & ((modifiers: Partial<ModifierValues<T>>) => string);
91
97
  /**
@@ -140,15 +146,27 @@ export interface CSProps {
140
146
  /** The `cs` prop takes in a single value or an array of values. You can pass the CSS class name
141
147
  * returned by {@link createStyles}, or the result of {@link createVars} and
142
148
  * {@link createModifiers}. If you're extending a component already using `cs`, you can merge that
143
- * prop in as well.
149
+ * prop in as well. Any style that is passed to the `cs` prop will override style props. If you
150
+ * wish to have styles that are overridden by style props, the `css` prop, or styles added via
151
+ * the `styled` API, use {@link mergeStyles} wherever `elemProps` is used.
152
+ *
144
153
  *
145
154
  * ```tsx
146
- * cs={[
147
- * cs, // from the prop list
148
- * myStyles,
149
- * myModifiers({ size: 'medium' }),
150
- * myVars({ backgroundColor: 'red' })
151
- * ]}
155
+ * import {mergeStyles} from '@workday/canvas-kit-react/layout';
156
+ *
157
+ * // ...
158
+ *
159
+ * return (
160
+ * <Element
161
+ * {...mergeStyles(elemProps, [
162
+ * myStyles,
163
+ * myModifiers({ size: 'medium' }),
164
+ * myVars({ backgroundColor: 'red' })
165
+ * ])}
166
+ * >
167
+ * {children}
168
+ * </Element>
169
+ * )
152
170
  * ```
153
171
  */
154
172
  cs?: CSToPropsInput;
@@ -1 +1 @@
1
- {"version":3,"file":"cs.d.ts","sourceRoot":"","sources":["../../../lib/cs.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"cs.d.ts","sourceRoot":"","sources":["../../../lib/cs.ts"],"names":[],"mappings":"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"}
@@ -1,11 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.handleCsProp = exports.createStyles = exports.csToProps = exports.createModifiers = exports.createVars = exports.cssVar = void 0;
4
- const uniqueId_1 = require("./uniqueId");
3
+ exports.handleCsProp = exports.createStyles = exports.csToProps = exports.createModifiers = exports.createVars = exports.cssVar = exports.createStylesCache = void 0;
5
4
  // eslint-disable-next-line @emotion/no-vanilla
6
5
  const css_1 = require("@emotion/css");
7
6
  const serialize_1 = require("@emotion/serialize");
7
+ const uniqueId_1 = require("./uniqueId");
8
8
  const slugify_1 = require("./slugify");
9
+ exports.createStylesCache = {};
9
10
  function convertProperty(value) {
10
11
  // Handle the case where the value is a variable without the `var()` wrapping function. It happens
11
12
  // enough that it makes sense to automatically wrap.
@@ -214,7 +215,9 @@ function createStyles(...args) {
214
215
  // https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/babel-plugin/src/utils/transform-expression-with-styles.js#L81-L82
215
216
  // Without this "fix", anyone using the Emotion babel plugin would get different results than
216
217
  // intended when styles are merged.
217
- return css_1.css.call(null, { name: uniqueId_1.generateUniqueId(), styles }); //?
218
+ const name = uniqueId_1.generateUniqueId();
219
+ exports.createStylesCache[`${css_1.cache.key}-${name}`] = true;
220
+ return css_1.css.call(null, { name, styles }); //?
218
221
  })
219
222
  .join(' ');
220
223
  }
@@ -252,7 +255,7 @@ exports.createStyles = createStyles;
252
255
  */
253
256
  function handleCsProp({ cs, style, className, ...props }) {
254
257
  return {
255
- ...csToProps([cs, className, style]),
258
+ ...csToProps([className, cs, style]),
256
259
  ...props,
257
260
  };
258
261
  }
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { Keyframes, SerializedStyles, CSSObject } from '@emotion/serialize';
3
+ export declare const createStylesCache: Record<string, boolean>;
3
4
  /**
4
5
  * Style properties in a JavaScript camelCase. Everything Emotion allows is also
5
6
  * allowed here.
@@ -84,8 +85,13 @@ export declare function createVars<T extends string, ID extends string>(input: {
84
85
  }): CsVars<T, ID>;
85
86
  export declare function createVars<T extends string>(...args: T[]): CsVars<T, never>;
86
87
  declare type ModifierConfig = Record<string, Record<string, CS>>;
88
+ /**
89
+ * Helper type to convert `'true'` into `true` for boolean modifiers which are a pain to type as a
90
+ * prop.
91
+ */
92
+ declare type MaybeBoolean<T> = T extends 'true' ? true : T extends 'false' ? false : T;
87
93
  declare type ModifierValues<T extends ModifierConfig> = {
88
- [P in keyof T]: keyof T[P];
94
+ [P in keyof T]: MaybeBoolean<keyof T[P]>;
89
95
  };
90
96
  declare type ModifierReturn<T extends ModifierConfig> = T & ((modifiers: Partial<ModifierValues<T>>) => string);
91
97
  /**
@@ -140,15 +146,27 @@ export interface CSProps {
140
146
  /** The `cs` prop takes in a single value or an array of values. You can pass the CSS class name
141
147
  * returned by {@link createStyles}, or the result of {@link createVars} and
142
148
  * {@link createModifiers}. If you're extending a component already using `cs`, you can merge that
143
- * prop in as well.
149
+ * prop in as well. Any style that is passed to the `cs` prop will override style props. If you
150
+ * wish to have styles that are overridden by style props, the `css` prop, or styles added via
151
+ * the `styled` API, use {@link mergeStyles} wherever `elemProps` is used.
152
+ *
144
153
  *
145
154
  * ```tsx
146
- * cs={[
147
- * cs, // from the prop list
148
- * myStyles,
149
- * myModifiers({ size: 'medium' }),
150
- * myVars({ backgroundColor: 'red' })
151
- * ]}
155
+ * import {mergeStyles} from '@workday/canvas-kit-react/layout';
156
+ *
157
+ * // ...
158
+ *
159
+ * return (
160
+ * <Element
161
+ * {...mergeStyles(elemProps, [
162
+ * myStyles,
163
+ * myModifiers({ size: 'medium' }),
164
+ * myVars({ backgroundColor: 'red' })
165
+ * ])}
166
+ * >
167
+ * {children}
168
+ * </Element>
169
+ * )
152
170
  * ```
153
171
  */
154
172
  cs?: CSToPropsInput;
@@ -1 +1 @@
1
- {"version":3,"file":"cs.d.ts","sourceRoot":"","sources":["../../../lib/cs.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"cs.d.ts","sourceRoot":"","sources":["../../../lib/cs.ts"],"names":[],"mappings":"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"}
@@ -1,8 +1,9 @@
1
- import { generateUniqueId } from './uniqueId';
2
1
  // eslint-disable-next-line @emotion/no-vanilla
3
- import { css } from '@emotion/css';
2
+ import { cache, css } from '@emotion/css';
4
3
  import { serializeStyles } from '@emotion/serialize';
4
+ import { generateUniqueId } from './uniqueId';
5
5
  import { slugify } from './slugify';
6
+ export const createStylesCache = {};
6
7
  function convertProperty(value) {
7
8
  // Handle the case where the value is a variable without the `var()` wrapping function. It happens
8
9
  // enough that it makes sense to automatically wrap.
@@ -207,7 +208,9 @@ export function createStyles(...args) {
207
208
  // https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/babel-plugin/src/utils/transform-expression-with-styles.js#L81-L82
208
209
  // Without this "fix", anyone using the Emotion babel plugin would get different results than
209
210
  // intended when styles are merged.
210
- return css.call(null, { name: generateUniqueId(), styles }); //?
211
+ const name = generateUniqueId();
212
+ createStylesCache[`${cache.key}-${name}`] = true;
213
+ return css.call(null, { name, styles }); //?
211
214
  })
212
215
  .join(' ');
213
216
  }
@@ -244,7 +247,7 @@ export function createStyles(...args) {
244
247
  */
245
248
  export function handleCsProp({ cs, style, className, ...props }) {
246
249
  return {
247
- ...csToProps([cs, className, style]),
250
+ ...csToProps([className, cs, style]),
248
251
  ...props,
249
252
  };
250
253
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-styling",
3
- "version": "10.0.5",
3
+ "version": "10.0.7",
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",
@@ -50,9 +50,12 @@
50
50
  "csstype": "^3.0.2"
51
51
  },
52
52
  "devDependencies": {
53
+ "@emotion/react": "^11.7.1",
53
54
  "@emotion/serialize": "^1.0.2",
54
55
  "@emotion/styled": "^11.6.0",
56
+ "@workday/canvas-kit-react": "^10.0.7",
57
+ "@workday/canvas-tokens-web": "^1.0.0",
55
58
  "typescript": "4.2"
56
59
  },
57
- "gitHead": "b62560cec000216312915cdc4e0acec1173d0acf"
60
+ "gitHead": "3068ffec35c5735a6f7d91e076a71e95e65e8c79"
58
61
  }