@atlaskit/css 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/css
 
+## 0.0.3
+
+### Patch Changes
+
+- [#62648](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62648) [`1902f30344b5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1902f30344b5) - Add a `StrictXCSSProp` to clarify the loose vs. strict implementation.
+
+## 0.0.2
+
+### Patch Changes
+
+- [#63504](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63504) [`a48de33c8536`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a48de33c8536) - Uses codegen'd token schema type definition from the tokens package
+- Updated dependencies
+
 ## 0.0.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -5,14 +5,74 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cx = exports.cssMap = exports.css = exports.XCSSProp = void 0;
+exports.cx = exports.cssMap = exports.css = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _react2 = require("@compiled/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _createStrictAPI = (0, _react2.createStrictAPI)(),
-  XCSSProp = exports.XCSSProp = _createStrictAPI.XCSSProp,
+  XCSSProp = _createStrictAPI.XCSSProp,
   css = exports.css = _createStrictAPI.css,
   cssMap = exports.cssMap = _createStrictAPI.cssMap,
-  cx = exports.cx = _createStrictAPI.cx;
+  cx = exports.cx = _createStrictAPI.cx;
+
+/**
+ * ## StrictXCSSProp
+ *
+ * Declare styles your component takes with all other styles marked as violations
+ * by the TypeScript compiler. There are two primary use cases for xcss prop:
+ *
+ * - safe style overrides
+ * - inverting style declarations
+ *
+ * Interverting style declarations is interesting for platform teams as
+ * it means products only pay for styles they use as they're now the ones who declare
+ * the styles!
+ *
+ * The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
+ * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * to enable all properties and pseudos.
+ *
+ * The third generic is used to declare what properties and pseudos should be required.
+ *
+ * ```tsx
+ * interface MyComponentProps {
+ *   // Color is accepted, all other properties / pseudos are considered violations.
+ *   xcss?: StrictXCSSProp<'color', never>;
+ *
+ *   // Only backgrond color and hover pseudo is accepted.
+ *   xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
+ *
+ *   // All properties are accepted, all pseudos are considered violations.
+ *   xcss?: StrictXCSSProp<XCSSAllProperties, never>;
+ *
+ *   // All properties are accepted, only the hover pseudo is accepted.
+ *   xcss?: StrictXCSSProp<XCSSAllProperties, '&:hover'>;
+ *
+ *   // The xcss prop is required as well as the color property. No pseudos are required.
+ *   xcss: StrictXCSSProp<
+ *     XCSSAllProperties,
+ *     '&:hover',
+ *     { requiredProperties: 'color', requiredPseudos: never }
+ *   >;
+ * }
+ *
+ * function MyComponent({ xcss }: MyComponentProps) {
+ *   return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
+ * }
+ * ```
+ *
+ * The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
+ *
+ * ```jsx
+ * // Declared as an inline object
+ * <Component xcss={{ color: 'var(--ds-text)' }} />
+ *
+ * // Declared with the cssMap API
+ * const styles = cssMap({ text: { color: 'var(--ds-text)' } });
+ * <Component xcss={styles.text} />
+ * ```
+ *
+ * To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
+ */

package/dist/es2019/index.js

@@ -8,4 +8,64 @@ const {
   cssMap,
   cx
 } = createStrictAPI();
-export { XCSSProp, css, cssMap, cx };
+export { css, cssMap, cx };
+
+/**
+ * ## StrictXCSSProp
+ *
+ * Declare styles your component takes with all other styles marked as violations
+ * by the TypeScript compiler. There are two primary use cases for xcss prop:
+ *
+ * - safe style overrides
+ * - inverting style declarations
+ *
+ * Interverting style declarations is interesting for platform teams as
+ * it means products only pay for styles they use as they're now the ones who declare
+ * the styles!
+ *
+ * The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
+ * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * to enable all properties and pseudos.
+ *
+ * The third generic is used to declare what properties and pseudos should be required.
+ *
+ * ```tsx
+ * interface MyComponentProps {
+ *   // Color is accepted, all other properties / pseudos are considered violations.
+ *   xcss?: StrictXCSSProp<'color', never>;
+ *
+ *   // Only backgrond color and hover pseudo is accepted.
+ *   xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
+ *
+ *   // All properties are accepted, all pseudos are considered violations.
+ *   xcss?: StrictXCSSProp<XCSSAllProperties, never>;
+ *
+ *   // All properties are accepted, only the hover pseudo is accepted.
+ *   xcss?: StrictXCSSProp<XCSSAllProperties, '&:hover'>;
+ *
+ *   // The xcss prop is required as well as the color property. No pseudos are required.
+ *   xcss: StrictXCSSProp<
+ *     XCSSAllProperties,
+ *     '&:hover',
+ *     { requiredProperties: 'color', requiredPseudos: never }
+ *   >;
+ * }
+ *
+ * function MyComponent({ xcss }: MyComponentProps) {
+ *   return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
+ * }
+ * ```
+ *
+ * The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
+ *
+ * ```jsx
+ * // Declared as an inline object
+ * <Component xcss={{ color: 'var(--ds-text)' }} />
+ *
+ * // Declared with the cssMap API
+ * const styles = cssMap({ text: { color: 'var(--ds-text)' } });
+ * <Component xcss={styles.text} />
+ * ```
+ *
+ * To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
+ */

package/dist/esm/index.js

@@ -7,4 +7,64 @@ var _createStrictAPI = createStrictAPI(),
   css = _createStrictAPI.css,
   cssMap = _createStrictAPI.cssMap,
   cx = _createStrictAPI.cx;
-export { XCSSProp, css, cssMap, cx };
+export { css, cssMap, cx };
+
+/**
+ * ## StrictXCSSProp
+ *
+ * Declare styles your component takes with all other styles marked as violations
+ * by the TypeScript compiler. There are two primary use cases for xcss prop:
+ *
+ * - safe style overrides
+ * - inverting style declarations
+ *
+ * Interverting style declarations is interesting for platform teams as
+ * it means products only pay for styles they use as they're now the ones who declare
+ * the styles!
+ *
+ * The {@link StrictXCSSProp} type has generics two of which must be defined — use to explicitly
+ * set want you to maintain as API. Use {@link XCSSAllProperties} and {@link XCSSAllPseudos}
+ * to enable all properties and pseudos.
+ *
+ * The third generic is used to declare what properties and pseudos should be required.
+ *
+ * ```tsx
+ * interface MyComponentProps {
+ *   // Color is accepted, all other properties / pseudos are considered violations.
+ *   xcss?: StrictXCSSProp<'color', never>;
+ *
+ *   // Only backgrond color and hover pseudo is accepted.
+ *   xcss?: StrictXCSSProp<'backgroundColor', '&:hover'>;
+ *
+ *   // All properties are accepted, all pseudos are considered violations.
+ *   xcss?: StrictXCSSProp<XCSSAllProperties, never>;
+ *
+ *   // All properties are accepted, only the hover pseudo is accepted.
+ *   xcss?: StrictXCSSProp<XCSSAllProperties, '&:hover'>;
+ *
+ *   // The xcss prop is required as well as the color property. No pseudos are required.
+ *   xcss: StrictXCSSProp<
+ *     XCSSAllProperties,
+ *     '&:hover',
+ *     { requiredProperties: 'color', requiredPseudos: never }
+ *   >;
+ * }
+ *
+ * function MyComponent({ xcss }: MyComponentProps) {
+ *   return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />
+ * }
+ * ```
+ *
+ * The xcss prop works with static inline objects and the [cssMap](https://compiledcssinjs.com/docs/api-cssmap) API.
+ *
+ * ```jsx
+ * // Declared as an inline object
+ * <Component xcss={{ color: 'var(--ds-text)' }} />
+ *
+ * // Declared with the cssMap API
+ * const styles = cssMap({ text: { color: 'var(--ds-text)' } });
+ * <Component xcss={styles.text} />
+ * ```
+ *
+ * To concatenate and conditonally apply styles use the {@link cssMap} and {@link cx} functions.
+ */