@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
185 lines (175 loc) • 6.13 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _typeof from "@babel/runtime/helpers/typeof";
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
import { css as cssEmotion } from '@emotion/react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
var tokensMap = {
backgroundColor: backgroundColorMap,
blockSize: dimensionMap,
borderBlockColor: borderColorMap,
borderBlockEndColor: borderColorMap,
borderBlockEndWidth: borderWidthMap,
borderBlockStartColor: borderColorMap,
borderBlockStartWidth: borderWidthMap,
borderBlockWidth: borderWidthMap,
borderBottomColor: borderColorMap,
borderBottomLeftRadius: borderRadiusMap,
borderBottomRightRadius: borderRadiusMap,
borderBottomWidth: borderWidthMap,
borderColor: borderColorMap,
borderEndEndRadius: borderRadiusMap,
borderEndStartRadius: borderRadiusMap,
borderInlineColor: borderColorMap,
borderInlineEndColor: borderColorMap,
borderInlineEndWidth: borderWidthMap,
borderInlineStartColor: borderColorMap,
borderInlineStartWidth: borderWidthMap,
borderInlineWidth: borderWidthMap,
borderLeftColor: borderColorMap,
borderLeftWidth: borderWidthMap,
borderRadius: borderRadiusMap,
borderRightColor: borderColorMap,
borderRightWidth: borderWidthMap,
borderStartEndRadius: borderRadiusMap,
borderStartStartRadius: borderRadiusMap,
borderTopColor: borderColorMap,
borderTopLeftRadius: borderRadiusMap,
borderTopRightRadius: borderRadiusMap,
borderTopWidth: borderWidthMap,
borderWidth: borderWidthMap,
bottom: spaceMap,
boxShadow: shadowMap,
color: textColorMap,
columnGap: spaceMap,
gap: spaceMap,
height: dimensionMap,
inlineSize: dimensionMap,
inset: spaceMap,
insetBlock: spaceMap,
insetBlockEnd: spaceMap,
insetBlockStart: spaceMap,
insetInline: spaceMap,
insetInlineEnd: spaceMap,
insetInlineStart: spaceMap,
left: spaceMap,
margin: spaceMap,
marginBlock: spaceMap,
marginBlockEnd: spaceMap,
marginBlockStart: spaceMap,
marginBottom: spaceMap,
marginInline: spaceMap,
marginInlineEnd: spaceMap,
marginInlineStart: spaceMap,
marginLeft: spaceMap,
marginRight: spaceMap,
marginTop: spaceMap,
maxBlockSize: dimensionMap,
maxHeight: dimensionMap,
maxInlineSize: dimensionMap,
maxWidth: dimensionMap,
minBlockSize: dimensionMap,
minHeight: dimensionMap,
minInlineSize: dimensionMap,
minWidth: dimensionMap,
opacity: opacityMap,
outlineColor: borderColorMap,
outlineOffset: spaceMap,
outlineWidth: borderWidthMap,
padding: spaceMap,
paddingBlock: spaceMap,
paddingBlockEnd: spaceMap,
paddingBlockStart: spaceMap,
paddingBottom: spaceMap,
paddingInline: spaceMap,
paddingInlineEnd: spaceMap,
paddingInlineStart: spaceMap,
paddingLeft: spaceMap,
paddingRight: spaceMap,
paddingTop: spaceMap,
right: spaceMap,
rowGap: spaceMap,
top: spaceMap,
width: dimensionMap,
zIndex: layerMap
};
var uniqueSymbol = Symbol('UNSAFE_INTERNAL_styles');
var isSafeEnvToThrow = function isSafeEnvToThrow() {
return (typeof process === "undefined" ? "undefined" : _typeof(process)) === 'object' && _typeof(process.env) === 'object' && process.env.NODE_ENV !== 'production';
};
var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
var safeSelectors = /^@media .*$|^::?.*$|^@supports .*$/;
var transformStyles = function transformStyles(styleObj) {
if (!styleObj || _typeof(styleObj) !== 'object') {
return styleObj;
}
// If styles are defined as a CSSObject[], recursively call on each element until we reach CSSObject
if (Array.isArray(styleObj)) {
return styleObj.map(transformStyles);
}
// Modifies styleObj in place. Be careful.
Object.entries(styleObj).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
// If key is a pseudo class or a pseudo element, then value should be an object.
// So, call transformStyles on the value
if (_typeof(value) === 'object' && safeSelectors.test(key)) {
styleObj[key] = transformStyles(value);
return;
}
if (isSafeEnvToThrow()) {
// We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
if (reNestedSelectors.test(key)) {
throw new Error("Styles not supported for key '".concat(key, "'."));
}
}
// We have now dealt with all the special cases, so,
// check whether what remains is a style property
// that can be transformed.
if (!(key in tokensMap)) {
return;
}
var tokenValue = tokensMap[key][value];
styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
});
return styleObj;
};
var baseXcss = function baseXcss(style) {
var transformedStyles = transformStyles(style);
return _defineProperty({}, uniqueSymbol, cssEmotion(transformedStyles));
};
/**
* @internal used in primitives
* @returns a collection of styles that can be applied to the respective primitive
*/
export var parseXcss = function parseXcss(args) {
if (Array.isArray(args)) {
return args.map(function (x) {
return x && parseXcss(x);
}).filter(Boolean);
}
var styles = args[uniqueSymbol];
if ((typeof process === "undefined" ? "undefined" : _typeof(process)) && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {
throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
}
return styles;
};
// Media queries should not contain nested media queries
// Pseudos should not contain nested pseudos, or media queries
/**
* ### xcss
*
* `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for
* CSS application.
*
* ```tsx
* const styles = xcss({
* padding: 'space.100'
* })
* ```
*/
export function xcss(style) {
return baseXcss(style);
}