@dyst/react
Version:
Dynamic Css-in-Js styles engine, based on Emotion for React
712 lines (558 loc) • 16.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var serialize = require('@emotion/serialize');
var utils = require('@emotion/utils');
var clsx = require('clsx');
var createCache = require('@emotion/cache');
var ReactEmotion = require('@emotion/react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
var createCache__default = /*#__PURE__*/_interopDefaultLegacy(createCache);
var ReactEmotion__namespace = /*#__PURE__*/_interopNamespace(ReactEmotion);
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
class CssFactory {
constructor() {
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
_defineProperty(this, "key", void 0);
_defineProperty(this, "refPropertyName", 'ref');
this.key = key;
}
build(cache) {
var _this = this;
var css = function css() {
var refs = [];
var _styles = [];
for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
styles[_key] = arguments[_key];
}
for (var style of styles) {
var {
ref,
arg
} = _this.extractRef(style);
if (ref != null) refs.push(ref);
if (arg != null) _styles.push(arg);
}
var serialized = serialize.serializeStyles(_styles, cache.registered);
utils.insertStyles(cache, serialized, false);
return "".concat(cache.key, "-").concat(serialized.name).concat(refs.length > 0 ? refs.map(ref => " ".concat(ref)) : '');
};
var cx = function cx() {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return _this.merge(cache.registered, clsx__default["default"](args), css);
};
return {
css,
cx
};
}
merge(registeredCache, classNames, css) {
var registeredStyles = [];
var rawClassName = utils.getRegisteredStyles(registeredCache, registeredStyles, classNames);
if (registeredStyles.length < 2) {
return classNames;
}
return rawClassName + css(registeredStyles);
}
extractRef(arg) {
var ref = null;
if (!(arg instanceof Object) || !(this.refPropertyName in arg)) {
return {
arg,
ref
};
}
ref = arg[this.refPropertyName];
var argCopy = _objectSpread2({}, arg);
delete argCopy[this.refPropertyName];
return {
arg: argCopy,
ref
};
}
}
function useGuaranteedMemo(fn, deps) {
var ref = React__default["default"].useRef();
if (!ref.current || deps.length !== ref.current.prevDeps.length || ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0) {
ref.current = {
v: fn(),
prevDeps: [...deps]
};
}
return ref.current.v;
}
const CacheContext = React__default["default"].createContext(null);
const CacheProvider = (props) => {
const { children, value } = props;
return (React__default["default"].createElement(CacheContext.Provider, { value: value }, children));
};
var CacheProvider$1 = CacheProvider;
class StyleSheet$1 {
constructor() {
var _config$key;
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_defineProperty(this, "useTheme", void 0);
_defineProperty(this, "key", void 0);
_defineProperty(this, "cache", void 0);
this.key = (_config$key = config.key) !== null && _config$key !== void 0 ? _config$key : 'dyst';
this.useTheme = typeof config.theme !== 'function' ? () => config.theme || {} : config.theme;
this.cache = createCache__default["default"](_objectSpread2({
key: this.key,
prepend: true
}, (config === null || config === void 0 ? void 0 : config.cache) || {}));
}
withParams() {
return {
create: styles => this.createStyles(true, styles)
};
}
withoutParams() {
return {
create: styles => this.createStyles(false, styles)
};
}
create(styles) {
return this.createStyles(true, styles);
}
createStyles(withParams, styles) {
var _this = this;
var getStyles = typeof styles === 'function' ? styles : () => styles;
return function () {
var _config$styles, _config$classNames;
var paramsOrConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _config = withParams ? config : paramsOrConfig;
var _params = withParams ? paramsOrConfig : undefined;
var expandedStyles = (_config$styles = _config.styles) !== null && _config$styles !== void 0 ? _config$styles : {};
var classNames = (_config$classNames = _config.classNames) !== null && _config$classNames !== void 0 ? _config$classNames : {};
var name = _config.name;
var theme = _this.useTheme();
var {
css,
cx
} = _this.useCss();
var count = 0;
var createRef = refName => {
count += 1;
return "".concat(_this.key, "-ref_").concat(refName !== null && refName !== void 0 ? refName : 'unknown', "_").concat(count);
};
var assignRef = (refName, style) => {
return cx(refName, css(style));
};
var getStylesConfig = withParams ? {
theme,
params: _params,
createRef,
assignRef
} : {
theme,
createRef,
assignRef
};
var _styles = getStyles(getStylesConfig);
var _expandedStyles = typeof expandedStyles === 'function' ? expandedStyles(theme) : expandedStyles;
return React__default["default"].useMemo(() => {
var classes = {};
for (var key of Object.keys(_styles)) {
classes[key] = typeof _styles[key] !== 'string' ? css(_styles[key]) : _styles[key];
}
var expandedClasses = {};
for (var _key of Object.keys(_expandedStyles)) {
expandedClasses[_key] = cx(typeof _expandedStyles[_key] !== 'string' ? css(_expandedStyles[_key]) : _expandedStyles[_key], classNames);
}
return {
classes: _this.mergeClassNames(classes, expandedClasses, cx, name),
cx,
theme
};
}, [_styles, _expandedStyles, classNames, name]);
};
}
useCss() {
var cache = this.useCache();
var cssFactory = new CssFactory(this.key);
return useGuaranteedMemo(() => cssFactory.build(cache), [cache]);
}
useCache() {
var cache = React__default["default"].useContext(CacheContext);
return cache !== null && cache !== void 0 ? cache : this.cache;
}
mergeClassNames(classNames, expandingClassNames, cx, name) {
var mergedClasses = {};
for (var classKey of Object.keys(classNames)) {
var toMergeClassName = expandingClassNames[classKey];
mergedClasses[classKey] = cx(classNames[classKey], toMergeClassName || null, name ? "".concat(this.key, "-").concat(name, "-").concat(classKey) : null);
}
return mergedClasses;
}
}
// https://emotion.sh/docs/globals#gatsby-focus-wrapper
const GlobalStyles = (props) => {
const { styles } = props;
return React__default["default"].createElement(ReactEmotion__namespace.Global, { styles: ReactEmotion__namespace.css(styles) });
};
var GlobalStyles$1 = GlobalStyles;
// Based on https://necolas.github.io/normalize.css/
const styles = ReactEmotion.css `
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the \`main\` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on \`h1\` elements within \`section\` and
* \`article\` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd \`em\` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd \`em\` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent \`sub\` and \`sup\` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from \`fieldset\` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* \`fieldset\` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type='checkbox'],
[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to \`inherit\` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
`;
const NormalizeCSS = () => {
return React__default["default"].createElement(GlobalStyles$1, { styles: () => styles });
};
var NormalizeCSS$1 = NormalizeCSS;
function createStyleSheet() {
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return new StyleSheet$1(config);
}
var StyleSheet = StyleSheet$1;
Object.defineProperty(exports, 'keyframes', {
enumerable: true,
get: function () { return ReactEmotion.keyframes; }
});
exports.CacheContext = CacheContext;
exports.CacheProvider = CacheProvider$1;
exports.GlobalStyles = GlobalStyles$1;
exports.NormalizeCSS = NormalizeCSS$1;
exports.StyleSheet = StyleSheet$1;
exports.createStyleSheet = createStyleSheet;
exports["default"] = StyleSheet;
//# sourceMappingURL=index.js.map