@atlaskit/css 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/css
 
+## 0.7.0
+
+### Minor Changes
+
+- [#168289](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168289)
+  [`5fe404687ca98`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5fe404687ca98) -
+  Add a test helper to reduce issues when migrating to Compiled CSS.
+
+  Change dom `Node`'s `textContent` property to remove `Compiled CSS definitions` except for
+  `Compiled style nodes`.
+
 ## 0.6.2
 
 ### Patch Changes

package/dist/cjs/test-utils/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./inline-css");

package/dist/cjs/test-utils/inline-css.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isExtendedElement = isExtendedElement;
+exports.isStyleElement = isStyleElement;
+exports.removeCssContent = removeCssContent;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+if (typeof Node !== 'undefined') {
+  /**
+   * Before overriding `textContent` property, we need to store the original, as well as a convenience
+   * property to access the original content with CSS. Remove CSS style definitions from `textContent` for none style nodes
+   */
+  var textContentDescriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
+  Object.defineProperty(Node.prototype, 'textContentOriginal', {
+    enumerable: false,
+    get: function get() {
+      return textContentDescriptor.get.call(this);
+    },
+    set: undefined
+  });
+  Object.defineProperty(Node.prototype, 'textContentWithoutCss', {
+    enumerable: false,
+    get: function get() {
+      var _removeCssContent;
+      return (_removeCssContent = removeCssContent(this.textContentOriginal, this)) !== null && _removeCssContent !== void 0 ? _removeCssContent : '';
+    },
+    set: undefined
+  });
+  Object.defineProperty(Node.prototype, 'textContent', _objectSpread(_objectSpread({}, textContentDescriptor), {}, {
+    get: function get() {
+      return isStyleElement(this) ? this.textContentOriginal : this.textContentWithoutCss;
+    }
+  }));
+}
+
+/**
+ * Check if a node is a `style` node with type guard
+ * @param node Node
+ * @returns boolean
+ */
+function isStyleElement(node) {
+  return isExtendedElement(node) && node.tagName.toLowerCase() === 'style' && node.hasAttribute('data-cmpld');
+}
+function isExtendedElement(node) {
+  return !!node && node.nodeType === node.ELEMENT_NODE && typeof node.textContentOriginal === 'string';
+}
+
+/**
+ * Return an array of CSS style definitions as text from a node and recursively through
+ * the nodes children
+ *
+ * @param node Node
+ * @returns string[]
+ */
+function getInnerCssContent(node) {
+  if (isStyleElement(node)) {
+    return [node.textContentOriginal];
+  }
+  if (!node.hasChildNodes() || !isExtendedElement(node)) {
+    return [];
+  }
+  var output = [];
+  node.querySelectorAll('style[data-cmpld]').forEach(function (style) {
+    if (isStyleElement(style)) {
+      var text = style.textContentOriginal;
+      if (text) {
+        output.push(text);
+      }
+    }
+  });
+  return output;
+}
+
+/**
+ * Return text with the inline CSS style definitions removed
+ *
+ * @param text string
+ * @param node
+ * @returns string
+ */
+function removeCssContent(text, node) {
+  if (text === 0) {
+    return test.toString();
+  }
+  if (!text) {
+    return '';
+  }
+  return getInnerCssContent(node).reduce(function (cleanedText, cssContent) {
+    return cleanedText.replace(cssContent, '');
+  }, text.toString());
+}

package/dist/cjs/test-utils/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/es2019/test-utils/index.js

@@ -0,0 +1 @@
+import './inline-css';

package/dist/es2019/test-utils/inline-css.js

@@ -0,0 +1,83 @@
+if (typeof Node !== 'undefined') {
+  /**
+   * Before overriding `textContent` property, we need to store the original, as well as a convenience
+   * property to access the original content with CSS. Remove CSS style definitions from `textContent` for none style nodes
+   */
+  const textContentDescriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
+  Object.defineProperty(Node.prototype, 'textContentOriginal', {
+    enumerable: false,
+    get() {
+      return textContentDescriptor.get.call(this);
+    },
+    set: undefined
+  });
+  Object.defineProperty(Node.prototype, 'textContentWithoutCss', {
+    enumerable: false,
+    get() {
+      var _removeCssContent;
+      return (_removeCssContent = removeCssContent(this.textContentOriginal, this)) !== null && _removeCssContent !== void 0 ? _removeCssContent : '';
+    },
+    set: undefined
+  });
+  Object.defineProperty(Node.prototype, 'textContent', {
+    ...textContentDescriptor,
+    get() {
+      return isStyleElement(this) ? this.textContentOriginal : this.textContentWithoutCss;
+    }
+  });
+}
+
+/**
+ * Check if a node is a `style` node with type guard
+ * @param node Node
+ * @returns boolean
+ */
+export function isStyleElement(node) {
+  return isExtendedElement(node) && node.tagName.toLowerCase() === 'style' && node.hasAttribute('data-cmpld');
+}
+export function isExtendedElement(node) {
+  return !!node && node.nodeType === node.ELEMENT_NODE && typeof node.textContentOriginal === 'string';
+}
+
+/**
+ * Return an array of CSS style definitions as text from a node and recursively through
+ * the nodes children
+ *
+ * @param node Node
+ * @returns string[]
+ */
+function getInnerCssContent(node) {
+  if (isStyleElement(node)) {
+    return [node.textContentOriginal];
+  }
+  if (!node.hasChildNodes() || !isExtendedElement(node)) {
+    return [];
+  }
+  const output = [];
+  node.querySelectorAll('style[data-cmpld]').forEach(style => {
+    if (isStyleElement(style)) {
+      const text = style.textContentOriginal;
+      if (text) {
+        output.push(text);
+      }
+    }
+  });
+  return output;
+}
+
+/**
+ * Return text with the inline CSS style definitions removed
+ *
+ * @param text string
+ * @param node
+ * @returns string
+ */
+export function removeCssContent(text, node) {
+  if (text === 0) {
+    return test.toString();
+  }
+  if (!text) {
+    return '';
+  }
+  return getInnerCssContent(node).reduce((cleanedText, cssContent) => cleanedText.replace(cssContent, ''), text.toString());
+}

package/dist/esm/test-utils/index.js

@@ -0,0 +1 @@
+import './inline-css';

package/dist/esm/test-utils/inline-css.js

@@ -0,0 +1,87 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+if (typeof Node !== 'undefined') {
+  /**
+   * Before overriding `textContent` property, we need to store the original, as well as a convenience
+   * property to access the original content with CSS. Remove CSS style definitions from `textContent` for none style nodes
+   */
+  var textContentDescriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
+  Object.defineProperty(Node.prototype, 'textContentOriginal', {
+    enumerable: false,
+    get: function get() {
+      return textContentDescriptor.get.call(this);
+    },
+    set: undefined
+  });
+  Object.defineProperty(Node.prototype, 'textContentWithoutCss', {
+    enumerable: false,
+    get: function get() {
+      var _removeCssContent;
+      return (_removeCssContent = removeCssContent(this.textContentOriginal, this)) !== null && _removeCssContent !== void 0 ? _removeCssContent : '';
+    },
+    set: undefined
+  });
+  Object.defineProperty(Node.prototype, 'textContent', _objectSpread(_objectSpread({}, textContentDescriptor), {}, {
+    get: function get() {
+      return isStyleElement(this) ? this.textContentOriginal : this.textContentWithoutCss;
+    }
+  }));
+}
+
+/**
+ * Check if a node is a `style` node with type guard
+ * @param node Node
+ * @returns boolean
+ */
+export function isStyleElement(node) {
+  return isExtendedElement(node) && node.tagName.toLowerCase() === 'style' && node.hasAttribute('data-cmpld');
+}
+export function isExtendedElement(node) {
+  return !!node && node.nodeType === node.ELEMENT_NODE && typeof node.textContentOriginal === 'string';
+}
+
+/**
+ * Return an array of CSS style definitions as text from a node and recursively through
+ * the nodes children
+ *
+ * @param node Node
+ * @returns string[]
+ */
+function getInnerCssContent(node) {
+  if (isStyleElement(node)) {
+    return [node.textContentOriginal];
+  }
+  if (!node.hasChildNodes() || !isExtendedElement(node)) {
+    return [];
+  }
+  var output = [];
+  node.querySelectorAll('style[data-cmpld]').forEach(function (style) {
+    if (isStyleElement(style)) {
+      var text = style.textContentOriginal;
+      if (text) {
+        output.push(text);
+      }
+    }
+  });
+  return output;
+}
+
+/**
+ * Return text with the inline CSS style definitions removed
+ *
+ * @param text string
+ * @param node
+ * @returns string
+ */
+export function removeCssContent(text, node) {
+  if (text === 0) {
+    return test.toString();
+  }
+  if (!text) {
+    return '';
+  }
+  return getInnerCssContent(node).reduce(function (cleanedText, cssContent) {
+    return cleanedText.replace(cssContent, '');
+  }, text.toString());
+}

package/dist/types/test-utils/index.d.ts

@@ -0,0 +1 @@
+import './inline-css';

package/dist/types/test-utils/inline-css.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLElementExtended, type HTMLStyleElementExtended } from './types';
+/**
+ * Check if a node is a `style` node with type guard
+ * @param node Node
+ * @returns boolean
+ */
+export declare function isStyleElement(node: Node): node is HTMLStyleElementExtended;
+export declare function isExtendedElement(node?: Node): node is HTMLElementExtended;
+/**
+ * Return text with the inline CSS style definitions removed
+ *
+ * @param text string
+ * @param node
+ * @returns string
+ */
+export declare function removeCssContent(text: string | number | null | undefined, node: Node): string;

package/dist/types/test-utils/types.d.ts

@@ -0,0 +1,5 @@
+export type HTMLElementExtended<T extends HTMLElement = HTMLElement> = T & {
+    textContentOriginal: string;
+    textContentWithoutCss: string;
+};
+export type HTMLStyleElementExtended = HTMLElementExtended<HTMLStyleElement>;

package/dist/types-ts4.5/test-utils/index.d.ts

@@ -0,0 +1 @@
+import './inline-css';

package/dist/types-ts4.5/test-utils/inline-css.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLElementExtended, type HTMLStyleElementExtended } from './types';
+/**
+ * Check if a node is a `style` node with type guard
+ * @param node Node
+ * @returns boolean
+ */
+export declare function isStyleElement(node: Node): node is HTMLStyleElementExtended;
+export declare function isExtendedElement(node?: Node): node is HTMLElementExtended;
+/**
+ * Return text with the inline CSS style definitions removed
+ *
+ * @param text string
+ * @param node
+ * @returns string
+ */
+export declare function removeCssContent(text: string | number | null | undefined, node: Node): string;

package/dist/types-ts4.5/test-utils/types.d.ts

@@ -0,0 +1,5 @@
+export type HTMLElementExtended<T extends HTMLElement = HTMLElement> = T & {
+    textContentOriginal: string;
+    textContentWithoutCss: string;
+};
+export type HTMLStyleElementExtended = HTMLElementExtended<HTMLStyleElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/css",
-	"version": "0.6.2",
+	"version": "0.7.0",
 	"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,11 +44,13 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"af:exports": {
-		".": "./src/index.tsx"
+		".": "./src/index.tsx",
+		"./test-utils": "./src/test-utils/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/jest": "^0.10.5",
 		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
@@ -57,7 +59,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@emotion/react": "^11.7.1",

package/test-utils/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/css/test-utils",
+  "main": "../dist/cjs/test-utils/index.js",
+  "module": "../dist/esm/test-utils/index.js",
+  "module:es2019": "../dist/es2019/test-utils/index.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/test-utils/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/test-utils/index.d.ts"
+      ]
+    }
+  }
+}