Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

@fower/core

Package Overview
Dependencies
Maintainers
1
Versions
108
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fower/core - npm Package Compare versions

Comparing version 1.36.0 to 1.37.0

dist/atom.d.ts
dist/atom.types.d.ts
dist/isUnitProp.d.ts
dist/parser.d.ts
dist/sheet.d.ts
dist/store.d.ts
dist/typings.d.ts

1339

dist/core.cjs.development.js

@@ -5,23 +5,24 @@ 'use strict';

var store = require('@fower/store');
var parser = require('@fower/parser');
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var deepmerge = _interopDefault(require('deepmerge'));
var utils = require('@fower/utils');
var sheet = require('@fower/sheet');
var atom = require('@fower/atom');
var hash = _interopDefault(require('string-hash'));
var colorHelper = require('@fower/color-helper');
var cssObjectProcessor = require('@fower/css-object-processor');
/**
* convert atomic props to classNames
* @param args
* @returns classNames
*/
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
if (!args.length) return '';
var parser$1 = new parser.Parser(utils.argsToProps(args));
parser$1.insertRules();
return parser$1.getClassNames().join(' ');
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}

@@ -47,2 +48,1270 @@

function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it) return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var modeCacheKey = 'fower-mode';
var Store = /*#__PURE__*/function () {
function Store() {
var _this = this;
this.config = {
unit: 'px',
inline: false,
important: false,
mode: {
currentMode: 'light',
autoDarkMode: {
enabled: false,
mappings: {
white: 'black',
black: 'white',
'50': '900',
'100': '800',
'200': '700',
'300': '600',
'400': '500',
'500': '400',
'600': '300',
'700': '200',
'800': '100',
'900': '50'
}
},
modeList: ['light', 'dark'],
classPrefix: ''
},
prefix: '',
pseudos: ['active', 'checked', 'disabled', 'enabled', 'default', 'empty', 'focus', 'focus-within', 'invalid', 'hover', 'link', 'visited', 'first-child', 'last-child', 'after', 'before', 'placeholder', 'selection'],
theme: {
breakpoints: {}
},
plugins: []
};
this.atomCache = new Map();
this.getAtomIds = function () {
return Array.from(_this.atomCache.keys());
}; // composed atomic props
this.compositions = new Map();
this.getConfig = function () {
return _this.config;
}; // user config
this.setConfig = function (config, strategy) {
if (strategy === void 0) {
strategy = 'deepmerge';
}
if (strategy === 'replace') {
_this.config = config;
} else if (strategy === 'merge') {
_this.config = _extends({}, _this.config, config);
} else {
_this.config = deepmerge(_this.config, config);
}
};
this.getTheme = function () {
return _this.config.theme;
};
this.setTheme = function (partialThemeConfig) {
_this.config.theme = deepmerge(_this.config.theme || {}, partialThemeConfig);
};
this.getMode = function () {
var _this$config$mode;
return ((_this$config$mode = _this.config.mode) == null ? void 0 : _this$config$mode.currentMode) || '';
};
this.setMode = function (mode) {
if (!utils.isBrowser) return;
var currentMode = _this.config.mode.currentMode;
if (currentMode) {
document.documentElement.classList.remove(currentMode);
}
if (mode) {
document.documentElement.classList.add(mode);
}
localStorage.setItem(modeCacheKey, mode);
_this.setConfig({
mode: {
currentMode: mode
}
});
};
this.use = function () {
var _this$config$plugins;
(_this$config$plugins = _this.config.plugins).push.apply(_this$config$plugins, arguments);
};
this.addAtom = function (matcher, handleAtomOrStyleObject) {
var plugin = {
isMatch: function isMatch(key) {
if (typeof matcher === 'string') return key === matcher;
if (matcher instanceof RegExp) return matcher.test(key);
return false;
},
handleAtom: typeof handleAtomOrStyleObject === 'function' ? handleAtomOrStyleObject : function (atom) {
atom.style = handleAtomOrStyleObject;
return atom;
}
};
_this.use(plugin);
return plugin;
};
this.composeAtom = function (atomName, cssObject) {
_this.compositions.set(atomName, cssObject);
};
}
_createClass(Store, [{
key: "theme",
get: function get() {
return this.config.theme;
}
}]);
return Store;
}();
var store = /*#__PURE__*/new Store();
globalThis.__fower_store__ = store;
var invalidProps = ['excludedProps'];
/**
* @example p2,mx4,left10,spaceX4...
* @example p-20,opacity-80
*/
var digitReg = /^(m[xytrbl]?-?|p[xytrbl]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border[trbl]?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i;
var Atom = /*#__PURE__*/function () {
function Atom(options) {
var _this = this;
this.options = options;
/**
* atom value, get it from PropValue or propKey
* @example
* <Box toCenter></Box> -> true
* <Box m={4}></Box> -> 4
* <Box m-4></Box> -> 4
* <Box m4></Box> -> 16
*/
this.value = '';
/**
* unique id for cache
*/
this.id = '';
this.type = '';
this.setId = function () {
var meta = _this.meta,
key = _this.key,
value = _this.value;
var important = meta.important,
rest = _objectWithoutPropertiesLoose(meta, ["pseudoPrefix", "childSelector", "important"]);
var values = Object.values(rest).sort();
if (important) values.push('i');
var id; // is global style
if (meta.global) {
id = hash(JSON.stringify(value)).toString();
_this.id = id;
return id;
}
if (typeof value === 'boolean' && value === true) {
id = key;
} else if (Array.isArray(value)) {
var valueStr = value.join('-');
id = key + "-" + valueStr;
} else {
id = key + "-" + String(value);
}
if (values.length) id = id + '--' + values.join('--'); // handle special charactor
id = id.replace(/[#().]/g, '').replace(/\%/g, 'p').replace(/\s+/g, '-');
var isValid = /^[a-zA-Z0-9-]+$/.test(id);
id = isValid ? id : "css-" + hash(id);
if (_this.isFalsePropValue) id = id + '--false';
_this.id = id;
return id;
};
this.propKey = options.propKey;
this.propValue = options.propValue;
this.key = options.key || this.propKey;
this.value = options.value || this.propValue;
this.style = options.style;
this.handled = this.getInitialHandled();
this.isValid = this.getIsValid();
this.inserted = false; // shallow clone it
this.meta = _extends({}, options.meta) || {};
this.preprocessAtom();
}
/**
* string or number prop
* @readonly
* @memberof Atom
*/
var _proto = Atom.prototype;
/**
*
* @param config fower config
* @returns
*/
_proto.preprocessAtom = function preprocessAtom() {
var newAtom = this.postfixPreprocessor();
this.setId();
return newAtom;
};
_proto.postfixPreprocessor = function postfixPreprocessor() {
var connector = '--';
var specialPseudos = ['after', 'before', 'placeholder', 'selection'];
var _store$config = store.config,
_store$config$pseudos = _store$config.pseudos,
pseudos = _store$config$pseudos === void 0 ? [] : _store$config$pseudos,
theme = _store$config.theme,
mode = _store$config.mode;
var modeList = mode.modeList;
var breakpoints = theme.breakpoints;
var propKey = this.propKey,
propValue = this.propValue;
var breakpointKeys = Object.keys(breakpoints);
var modeKeys = modeList || [];
var pseudoKeys = pseudos;
var regResponsiveStr = connector + "(" + breakpointKeys.join('|') + ")";
var regModeStr = connector + "(" + modeKeys.join('|') + ")";
var regPseudoStr = connector + "(" + pseudoKeys.join('|') + ")";
var regMode = new RegExp(regModeStr);
var regPseudo = new RegExp(regPseudoStr);
var regResponsive = new RegExp(regResponsiveStr);
var regImportant = /--i/i;
var regColorPostfix = /--[told](\d{1,2}|100)($|--)/i;
var regParentSelector = /--\$\w+/i;
/** handle value like: red500--T40, #666--O30 */
if (regColorPostfix.test(propValue)) {
var _propValue$split = propValue.split('--'),
colorName = _propValue$split[0],
postfix = _propValue$split[1];
this.value = colorName;
this.meta.colorPostfix = postfix;
}
var isMode = regMode.test(propKey);
var isPseudo = regPseudo.test(propKey);
var isResponsive = regResponsive.test(propKey);
var isImportant = regImportant.test(propKey);
var isColorPostfix = regColorPostfix.test(propKey);
var isParentSelector = regParentSelector.test(propKey);
var hasPostfix = isMode || isPseudo || isResponsive || isImportant || isColorPostfix;
if (!hasPostfix) return this.digitPreprocessor();
var result = propKey.split(connector);
this.key = result[0]; // key that already removed postfix
if (isMode) {
this.meta.mode = result.find(function (i) {
return modeKeys.includes(i);
});
}
if (isPseudo) {
var pseudo = result.find(function (i) {
return pseudoKeys.includes(i);
});
this.meta.pseudoPrefix = specialPseudos.includes(pseudo) ? '::' : ':';
this.meta.pseudo = pseudo;
}
if (isResponsive) {
var breakpointType = result.find(function (i) {
return breakpointKeys.includes(i);
});
this.meta.breakpoint = breakpointType;
}
if (isImportant) {
this.meta.important = !!result.find(function (i) {
return i === 'i';
});
}
if (isColorPostfix) {
this.meta.colorPostfix = result.find(function (i) {
return regColorPostfix.test("--" + i);
});
}
if (isParentSelector) {
var _result$find;
this.meta.parentClass = (_result$find = result.find(function (i) {
return i.startsWith('$');
})) == null ? void 0 : _result$find.replace(/^\$/, '');
} // check is theme space key, if yes, preprocess it
this.digitPreprocessor();
return this;
};
_proto.digitPreprocessor = function digitPreprocessor() {
if (!digitReg.test(this.key)) return this;
var spacings = store.config.theme.spacings; // is theme space key
var isSpace = /^([a-z]+)(\d+)$/i.test(this.key);
/**
* match props link: m4,mx2,mt9, spaceX4...
* to m4 -> [ key: m, value: 4 ]
* to m-20 -> [ key: m, value: 20 ]
* to m-20px -> [ key: m, value: '20px' ]
*/
var keyStr = this.key.toString();
var result = keyStr.match(/^([a-z]+)(\d+)$/i) || keyStr.match(/^([a-z]*)-(-?\d+[a-z]*?)$/i) || keyStr.match(/^([a-z]+)-(auto)$/i);
if (!result) return this;
var newKey = result[1],
newPropValue = result[2];
this.key = newKey;
this.value = isSpace ? spacings["" + newPropValue.toLowerCase()] : newPropValue;
return this;
};
_proto.getInitialHandled = function getInitialHandled() {
if (this.options.handled) return this.options.handled;
if (this.isFalsePropValue) return true;
if (invalidProps.includes(this.propKey)) return true;
return false;
};
_proto.getIsValid = function getIsValid() {
if (this.isFalsePropValue) return false;
if (invalidProps.includes(this.propKey)) return false;
return true;
};
_createClass(Atom, [{
key: "isValueProp",
get: function get() {
return typeof this.propValue === 'string' || typeof this.propValue == 'number';
}
/**
* get style keys string
* @readonlyReactElement
* @memberof Atom
* @example
* { color: "#999"} -> color
* { paddingTop: 10, paddingBottom: 10} -> paddingTop-paddingTop
*/
}, {
key: "styleKeys",
get: function get() {
return Object.keys(this.style || {}).join('-');
}
/**
* get style key hash
* @readonly
* @memberof Atom
* @example
* { color: "#999"} -> color + hashed meta
* { paddingTop: 10, paddingBottom: 10} -> paddingTop-paddingTop + hashed meta
*/
}, {
key: "styleKeysHash",
get: function get() {
var _this$meta = this.meta,
rest = _objectWithoutPropertiesLoose(_this$meta, ["colorPostfix"]); // omit colorPostfix
return Object.keys(this.style || {}).join('-') + JSON.stringify(rest);
}
}, {
key: "isFalsePropValue",
get: function get() {
return typeof this.propValue === 'boolean' && !this.propValue;
}
}, {
key: "isTruePropValue",
get: function get() {
return typeof this.propValue === 'boolean' && this.propValue;
}
}]);
return Atom;
}();
var StyleSheet = /*#__PURE__*/function () {
function StyleSheet() {
var _globalThis$document;
this.$style = (_globalThis$document = globalThis.document) == null ? void 0 : _globalThis$document.querySelector == null ? void 0 : _globalThis$document.querySelector('[data-fower]');
this.cssString = '';
this.ssrAtomIds = null;
}
var _proto = StyleSheet.prototype;
_proto.createStyleElement = function createStyleElement() {
var $style = document.createElement('style');
$style.dataset.fower = '';
document.head.append($style);
return $style;
};
_proto.getSsrAtomIds = function getSsrAtomIds() {
var _this$$style, _this$$style$dataset$;
if (!this.$style) return [];
if (this.ssrAtomIds) return this.ssrAtomIds;
return ((_this$$style = this.$style) == null ? void 0 : (_this$$style$dataset$ = _this$$style.dataset.fower) == null ? void 0 : _this$$style$dataset$.split(',')) || [];
};
_proto.insertStyleToHtml = function insertStyleToHtml(rules) {
if (!this.$style) {
this.$style = this.createStyleElement();
} // const str = rules.join('\n')
// this.$style.innerHTML += str
// return
for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
var rule = _step.value;
try {
this.$style.sheet.insertRule(rule);
} catch (error) {
console.warn(error);
}
}
};
_proto.insertStyles = function insertStyles(rules) {
if (rules === void 0) {
rules = [];
}
if (!rules.length) return;
if (utils.isBrowser) return this.insertStyleToHtml(rules);
this.cssString = this.cssString + ' ' + rules.join(' ');
};
_proto.getStyle = function getStyle() {
return this.cssString;
};
return StyleSheet;
}();
var styleSheet = /*#__PURE__*/new StyleSheet();
// from https://github.com/modulz/stitches/blob/canary/packages/core/src/unitOnlyProps.js
var reg = /(-columns|(^|[^e]-)padding|[^t]-spacing|l-align|rows|(^|(^border|[dkmnptx]|le|ne)-)width|^border|tom|[ek]-start|(o|[^e]-du)ration|us|(^|[^tv]-)left|(^|-)top|tance|rgin|e-offset|(er|g|n|t)-block|(^|[^tv]-)right|basis|[gnt]-inline|gap|(^|[^e]-)height|ness|(^|[^p]-)inset|[ek]-end|elay|tline|ve|dent|-rotate|n-rule|(c|ck|d|ne|t)-size)$/;
/**
* check css need unit
* @param cssKey css key, eg: border-width
* @returns
*/
function isUnitProp(cssKey) {
return reg.test(cssKey);
}
var colorKeys = ['color', 'backgroundColor', 'borderColor'];
var reactProps = ['children', 'onClick', 'onChange', 'onBlur', 'className', 'placeholder'];
/**
* An Abstract tool to handle atomic props
*/
var Parser = /*#__PURE__*/function () {
function Parser(props) {
var _store$config$mode, _store$config$mode$au;
if (props === void 0) {
props = {};
}
this.props = props;
/**
* atom parsed from props
*/
this.atoms = [];
this.getClassNameById = function (id) {
return store.config.prefix + id;
};
this.traverseProps(props);
if ((_store$config$mode = store.config.mode) != null && (_store$config$mode$au = _store$config$mode.autoDarkMode) != null && _store$config$mode$au.enabled) {
this.autoDarkMode();
}
}
var _proto = Parser.prototype;
/**
* traverse Props to init atoms
*/
_proto.traverseProps = function traverseProps(props) {
if (utils.isEmptyObj(props)) return;
var _this$config = this.config,
_this$config$pseudos = _this$config.pseudos,
pseudos = _this$config$pseudos === void 0 ? [] : _this$config$pseudos,
theme = _this$config.theme,
mode = _this$config.mode;
var modeList = mode.modeList;
var breakpoints = theme.breakpoints || {};
var breakpointKeys = Object.keys(breakpoints);
var modeKeys = modeList || [];
var pseudoKeys = pseudos;
var _props$excludedProps = props.excludedProps,
excludedProps = _props$excludedProps === void 0 ? [] : _props$excludedProps;
var entries = Object.entries(props);
for (var _iterator = _createForOfIteratorHelperLoose(this.plugins), _step; !(_step = _iterator()).done;) {
var plugin = _step.value;
if (plugin.init) {
plugin.init(props);
}
}
if (props != null && props.className) {
for (var _iterator2 = _createForOfIteratorHelperLoose(props.className.split(/\s+/)), _step2; !(_step2 = _iterator2()).done;) {
var item = _step2.value;
entries.push([item, true]);
}
} // traverse Props
for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
var _entries$_i = _entries[_i],
propKey = _entries$_i[0],
propValue = _entries$_i[1];
// the prop should be excluded by user setting
if (excludedProps.includes(propKey)) continue;
if (reactProps.includes(propKey)) continue;
if (!this.isValidProp(propKey, propValue)) continue; // parse css prop
if (propKey === 'css') {
this.parseCSSObject(propValue, {});
continue;
}
/** handle _hover, _sm, _dark... */
if (propKey.startsWith('_')) {
var postfix = propKey.replace(/^_/, '');
var obj = Array.isArray(propValue) ? propValue.reduce(function (r, cur) {
var _extends2;
return _extends({}, r, (_extends2 = {}, _extends2[cur] = true, _extends2));
}, {}) : propValue;
if (modeKeys.includes(postfix)) {
this.parseCSSObject(obj, {
mode: postfix
});
continue;
}
if (breakpointKeys.includes(postfix)) {
this.parseCSSObject(obj, {
breakpoint: breakpoints[postfix]
});
continue;
}
if (pseudoKeys.includes(postfix)) {
this.parseCSSObject(obj, {
pseudoPrefix: ':',
pseudo: postfix
});
continue;
}
}
var composition = store.compositions.get(propKey);
if (composition) {
this.parseCSSObject(composition, {});
var _atom = new Atom({
propKey: propKey,
propValue: propValue
});
_atom.handled = true;
_atom.style = {};
this.addAtom(_atom);
continue;
}
var atom = new Atom({
propKey: propKey,
propValue: propValue
});
try {
this.mutateAtom(atom);
if (atom.handled) this.addAtom(atom);
} catch (error) {
continue;
}
}
for (var _iterator3 = _createForOfIteratorHelperLoose(this.plugins), _step3; !(_step3 = _iterator3()).done;) {
var _plugin = _step3.value;
if (_plugin.afterAtomStyleCreate) {
_plugin.afterAtomStyleCreate(this);
}
}
};
_proto.getAutoDarkModeAtom = function getAutoDarkModeAtom(atom) {
var _options$style;
if (atom.meta.mode) return null;
if (!atom.style) return null;
var entries = Object.entries(atom.style);
if (!(entries != null && entries.length)) return null;
var options = {};
var darkColor = '';
var config = store.config;
var mappings = config.mode.autoDarkMode.mappings;
var colors = config.theme.colors;
var _entries$ = entries[0],
colorKey = _entries$[0],
colorName = _entries$[1]; // check is valid color key
if (!colorKeys.includes(colorKey)) return null; // only color in theme is valid
if (!colors[colorName]) return null; // if scale is existed, scale should be 100,200,300,400...
var _ref = colorName.match(/^([a-z]+)(\d+)$/i) || [],
scale = _ref[2]; // is disable, eg: { red200: false}
if (mappings[colorName] === false) return null;
if (mappings[colorName]) {
darkColor = mappings[colorName];
} else {
darkColor = colorName.replace(scale, mappings[scale]);
}
var isColor = colorKey === 'color';
var isBgColor = colorKey === 'backgroundColor';
var isBorderColor = colorKey === 'borderColor';
if (colors[darkColor]) {
if (isColor) {
options.propKey = darkColor;
} else if (isBgColor) {
options.propKey = "bg" + utils.upFirst(darkColor);
} else if (isBorderColor) {
options.propKey = "border" + utils.upFirst(darkColor);
}
options.propValue = true;
} else {
if (isColor) {
options.propKey = 'color';
options.propValue = darkColor;
} else if (isBgColor) {
options.propKey = 'bg';
options.propValue = darkColor;
} else if (isBorderColor) {
options.propKey = 'borderColor';
options.propValue = darkColor;
}
}
options.style = (_options$style = {}, _options$style[colorKey] = darkColor, _options$style);
return new Atom(_extends({}, options, {
meta: _extends({}, atom.meta, {
mode: 'dark'
})
}));
};
_proto.autoDarkMode = function autoDarkMode() {
for (var _iterator4 = _createForOfIteratorHelperLoose(this.atoms), _step4; !(_step4 = _iterator4()).done;) {
var atom = _step4.value;
var find = this.atoms.find(function (i) {
return colorKeys.includes(i.type) && i.meta.mode === 'dark';
});
if (find) continue;
var darkAtom = this.getAutoDarkModeAtom(atom);
if (!darkAtom) continue;
var cachedAtom = store.atomCache.get(darkAtom.id);
if (cachedAtom) {
this.addAtom(cachedAtom);
} else {
this.addAtom(darkAtom);
}
}
}
/**
* Get final css value
* @param key css key, eg: font-szie, padding-top
* @param value css value
* @returns
*/
;
_proto.formatCssValue = function formatCssValue(key, value) {
// no need unit
if (!isUnitProp(key)) return value;
var numValue = value; // 80p -> 80%, 50p-> -50%
if (utils.isPercentNumber(String(value))) {
return String(value).replace('p', '%');
}
if (!utils.isNumber(value)) return value;
numValue = Number(value); // if num is between 0 and 1, convert it to percent number.
if (numValue < 1 && numValue > 0) {
return numValue * 100 + '%';
}
var config = store.config;
if (config.unit !== 'none') {
if (config.transformUnit) {
return config.transformUnit(numValue);
} else {
return value + store.config.unit;
}
}
return numValue;
}
/**
* convert style object to string
* @param style
* @param meta
* @example
* { width: 10 } -> "width: 10px;"
* { paddingTop: 10, paddingBottom: 10 } -> "padding-top: 10px;padding-bottom: 10px;"
* @returns
*/
;
_proto.styleToString = function styleToString(style, meta) {
var _this = this;
var important = meta.important,
colorPostfix = meta.colorPostfix;
return Object.entries(style).reduce(function (r, _ref2) {
var key = _ref2[0],
value = _ref2[1];
var cssKey = utils.jsKeyToCssKey(key);
var posfix = important ? ' !important' : '';
var colors = store.theme.colors;
try {
if (colorPostfix) {
value = colorHelper.formatColor((colors == null ? void 0 : colors[value]) || value, colorPostfix);
} else {
value = _this.formatCssValue(cssKey, (colors == null ? void 0 : colors[value]) || value);
}
return r + (cssKey + ": " + value + posfix + ";");
} catch (error) {
return '';
}
}, '');
};
_proto.addAtom = function addAtom(atom) {
var _this$config$theme;
// if not cached, let's cache it
if (!store.atomCache.get(atom.id)) {
store.atomCache.set(atom.id, atom);
}
var ssrAtomIds = styleSheet.getSsrAtomIds();
var _ref3 = ((_this$config$theme = this.config.theme) == null ? void 0 : _this$config$theme.colors) || {},
_ref3$modes = _ref3.modes,
modes = _ref3$modes === void 0 ? {} : _ref3$modes;
var entries = Object.entries(modes);
/** for color mode */
for (var _i2 = 0, _entries2 = entries; _i2 < _entries2.length; _i2++) {
var _entries2$_i = _entries2[_i2],
mode = _entries2$_i[0],
colors = _entries2$_i[1];
if (!atom.style) continue;
var _entries3 = Object.entries(atom.style);
if (!_entries3.length) continue;
var _entries3$ = _entries3[0],
styleKey = _entries3$[0],
styleValue = _entries3$[1];
var colorValue = colors[styleValue];
if (colorValue) {
var postfix = '--' + mode; // TODO: improve clone
var modeAtom = JSON.parse(JSON.stringify(atom));
modeAtom.key = atom.key + postfix;
modeAtom.id = atom.id + postfix;
modeAtom.meta = _extends({
mode: mode
}, atom.meta);
modeAtom.style[styleKey] = colorValue;
if (ssrAtomIds.includes(modeAtom.id)) modeAtom.inserted = true;
this.atoms.push(modeAtom);
}
}
if (ssrAtomIds.includes(atom.id)) atom.inserted = true;
this.atoms.push(atom);
}
/**
* prop that can to handle, only primitive value type is valid
* @param propKey
* @param propValue
* @returns
*/
;
_proto.isValidProp = function isValidProp(propKey, propValue) {
var validTypes = ['string', 'boolean', 'number', 'undefined'];
if (propKey === 'css') return true; // for _hover,_sm,_dark...
if (propKey.startsWith('_')) return true;
if (Array.isArray(propValue)) return true;
var type = typeof propValue;
if (validTypes.includes(type)) return true;
return false;
}
/**
* to mutate atom attribute, and add atom to this.atoms
* @param atom
*/
;
_proto.mutateAtom = function mutateAtom(atom) {
var cachedAtom = store.atomCache.get(atom.id);
if (cachedAtom) {
this.addAtom(cachedAtom);
throw new Error('atom is cached, add to this.atoms derectly, no need to mutate');
} // if handled, push to this.atoms and skip it
if (atom.handled) {
this.addAtom(atom);
throw new Error('atom is handled, add to this.atoms derectly ,no need to mutate');
}
for (var _iterator5 = _createForOfIteratorHelperLoose(this.plugins), _step5; !(_step5 = _iterator5()).done;) {
var plugin = _step5.value;
if (!(plugin.isMatch != null && plugin.isMatch(atom.key))) continue;
if (plugin.beforeHandleAtom) {
atom = plugin.beforeHandleAtom(atom, this);
}
if (plugin.handleAtom) {
atom = plugin.handleAtom == null ? void 0 : plugin.handleAtom(atom, this);
}
atom.handled = true;
break; // break from this plugin
}
};
_proto.parseCSSObject = function parseCSSObject(propValue, meta) {
if (meta === void 0) {
meta = {};
}
var parsed = cssObjectProcessor.parse(propValue);
for (var _iterator6 = _createForOfIteratorHelperLoose(parsed), _step6; !(_step6 = _iterator6()).done;) {
var _step6$value = _step6.value,
selector = _step6$value.selector,
selectorType = _step6$value.selectorType,
style = _step6$value.style;
var entries = Object.entries(style);
if (!entries.length) continue; // entries.length is 1
var _entries$2 = entries[0],
propKey = _entries$2[0],
_propValue = _entries$2[1];
var option = {
propKey: propKey,
propValue: _propValue,
meta: _extends({}, meta)
};
if (selectorType === 'pseudo' && option.meta) {
var _ref4 = selector.match(/(:+)(.+)/) || [],
pseudoPrefix = _ref4[1],
pseudo = _ref4[2];
option.meta.pseudoPrefix = pseudoPrefix;
option.meta.pseudo = pseudo;
}
if (selectorType === 'child' && option.meta) {
option.meta.childSelector = selector;
}
if (selectorType === 'sibling' && option.meta) {
option.meta.siblingSelector = selector;
}
var atom = new Atom(option);
try {
this.mutateAtom(atom);
} catch (error) {
continue;
} // not match atomic props rule
if (!atom.style) {
atom.style = style;
atom.handled = true;
}
var cachedAtom = store.atomCache.get(atom.id);
if (cachedAtom) {
this.addAtom(cachedAtom);
} else {
this.addAtom(atom);
}
}
};
_proto.makeResponsiveStyle = function makeResponsiveStyle(breakpoint, rule) {
var breakpoints = this.config.theme.breakpoints;
return "@media (min-width: " + breakpoints[breakpoint] + ") {" + rule + "}";
}
/**
* get component classNames
*/
;
_proto.getClassNames = function getClassNames() {
var _this2 = this;
/**
* handle override style
* @example
* <Box class="red200 blue200"></Box> will get <div class="blue200"></div>
* <Box class="px2 px4"></Box> will get <div class="px4"></div>
*/
var classNames = [];
this.atoms.reduce(function (result, cur) {
if (!cur.style || !Object.keys(cur.style).length) return result;
var index = result.findIndex(function (i) {
return i.styleKeysHash === cur.styleKeysHash;
});
if (!cur.isValid) return result;
var className = _this2.getClassNameById(cur.id);
if (index === -1) {
classNames.push(className);
result = [].concat(result, [cur]);
} else {
result.splice(index, 1, cur);
classNames.splice(index, 1, className);
}
return result;
}, []);
var _this$props$className = this.props.className,
className = _this$props$className === void 0 ? '' : _this$props$className;
var filteredClassNames = className.split(/\s+/).filter(function (i) {
return !classNames.includes(i) && !!i;
});
classNames = classNames.concat(filteredClassNames);
if (this.hasResponsive) {
classNames.unshift(this.uniqueClassName);
}
return classNames;
}
/**
* get style object
*/
;
_proto.toStyle = function toStyle() {
var _this3 = this;
var style = this.atoms.reduce(function (result, atom) {
if (!atom.isValid) return result; // not style type
var colors = store.theme.colors;
var style = Object.entries(atom.style).reduce(function (c, _ref5) {
var _extends3;
var key = _ref5[0],
value = _ref5[1];
var cssValue = _this3.formatCssValue(utils.jsKeyToCssKey(key), colors[value] || value);
return _extends({}, c, (_extends3 = {}, _extends3[key] = cssValue, _extends3));
}, {});
return _extends({}, result, style);
}, {});
return style;
}
/**
* get rules for parser.insertRules
* @returns
*/
;
_proto.toRules = function toRules(enableInserted) {
var _this4 = this;
if (enableInserted === void 0) {
enableInserted = false;
}
var _this$config$mode$cla = this.config.mode.classPrefix,
classPrefix = _this$config$mode$cla === void 0 ? '' : _this$config$mode$cla;
var rules = [];
var breakpoints = this.config.theme.breakpoints; // sort responsive style
this.atoms = this.atoms.sort(function (a, b) {
return parseInt(breakpoints[b.meta.breakpoint] || '0') - parseInt(breakpoints[a.meta.breakpoint] || '0');
});
var _loop = function _loop() {
var atom = _step7.value;
var rule = '';
var id = atom.id,
isValid = atom.isValid,
_atom$style = atom.style,
style = _atom$style === void 0 ? {} : _atom$style,
meta = atom.meta; // no style in falsy prop
if (!isValid) return "continue"; // empty style
if (utils.isEmptyObj(style)) return "continue";
var pseudo = meta.pseudo,
pseudoPrefix = meta.pseudoPrefix,
mode = meta.mode,
_meta$breakpoint = meta.breakpoint,
breakpoint = _meta$breakpoint === void 0 ? '' : _meta$breakpoint,
childSelector = meta.childSelector,
siblingSelector = meta.siblingSelector,
parentClass = meta.parentClass; // TODO: need refactor
var shouldUseUniqueClassName = !!_this4.atoms.find(function (i) {
return i.styleKeys === atom.styleKeys && (breakpoint || i.meta.breakpoint);
});
var uniqueSelector = shouldUseUniqueClassName || breakpoint ? '.' + _this4.uniqueClassName : '';
if (!enableInserted) {
if (!shouldUseUniqueClassName) {
if (atom.inserted) return "continue";
}
}
atom.inserted = true;
var className = _this4.getClassNameById(id);
var selector = meta.global ? meta.global : uniqueSelector + "." + className;
if (mode) selector = "." + classPrefix + mode + " " + selector;
if (childSelector) selector = selector + " " + childSelector;
if (siblingSelector) {
selector = "" + selector + siblingSelector;
}
if (pseudo) {
var pseudoSelector = pseudoPrefix + pseudo;
if (parentClass) {
selector = "." + parentClass + pseudoSelector + " " + selector;
} else {
selector = selector + pseudoSelector;
}
}
rule = selector + " { " + _this4.styleToString(style, atom.meta) + " }";
if (breakpoint) rule = _this4.makeResponsiveStyle(breakpoint, rule);
rules.push(rule);
};
for (var _iterator7 = _createForOfIteratorHelperLoose(this.atoms), _step7; !(_step7 = _iterator7()).done;) {
var _ret = _loop();
if (_ret === "continue") continue;
} // console.log('this.atoms---', this.atoms)
return rules;
};
_proto.getParsedProps = function getParsedProps() {
var props = this.props,
atoms = this.atoms;
if (utils.isEmptyObj(props)) return {};
var entries = Object.entries(props);
/** ignore atomic prop */
var parsedProps = entries.reduce(function (result, _ref6) {
var key = _ref6[0],
value = _ref6[1];
// ignore prop with postfix
if (/.*--(\d+)?[a-z]+$/i.test(key)) return result;
var find = atoms.find(function (atom) {
return [atom.propKey, atom.key, 'css'].includes(key);
});
if (!find) result[key] = value;
return result;
}, {});
return parsedProps;
};
_proto.insertRules = function insertRules() {
var rules = this.toRules();
styleSheet.insertStyles(rules);
};
_createClass(Parser, [{
key: "uniqueClassName",
get: function get() {
return utils.objectToClassName(Object.keys(this.props));
}
}, {
key: "hasResponsive",
get: function get() {
return this.atoms.some(function (i) {
return !!i.meta.breakpoint;
});
}
}, {
key: "config",
get: function get() {
return store.config;
}
}, {
key: "plugins",
get: function get() {
return store.config.plugins;
}
}]);
return Parser;
}();
/**
* convert atomic props to classNames
* @param args
* @returns classNames
*/
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (!args.length) return '';
var parser = new Parser(utils.argsToProps(args));
parser.insertRules();
return parser.getClassNames().join(' ');
}
function createStyle() {

@@ -62,4 +1331,4 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

}, {});
var parser$1 = new parser.Parser(props);
var style = parser$1.toStyle();
var parser = new Parser(props);
var style = parser.toStyle();
return style;

@@ -87,3 +1356,3 @@ }

var rule = "\n @keyframes " + animationName + " {\n " + content + "\n }\n ";
sheet.styleSheet.insertStyles([rule]);
styleSheet.insertStyles([rule]);
return animationName;

@@ -112,3 +1381,3 @@ }

var entries = Object.entries(cssObj);
var parser$1 = new parser.Parser({});
var parser = new Parser({});

@@ -119,3 +1388,3 @@ for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {

value = _entries$_i[1];
var atom$1 = new atom.Atom({
var atom = new Atom({
propKey: key,

@@ -129,6 +1398,6 @@ propValue: value,

});
parser$1.addAtom(atom$1);
parser.addAtom(atom);
}
parser$1.insertRules();
parser.insertRules();
}

@@ -144,11 +1413,14 @@

});
var setConfig = store.store.setConfig,
getConfig = store.store.getConfig,
setTheme = store.store.setTheme,
getTheme = store.store.getTheme,
setMode = store.store.setMode,
getMode = store.store.getMode,
addAtom = store.store.addAtom,
composeAtom = store.store.composeAtom;
var setConfig = store.setConfig,
getConfig = store.getConfig,
setTheme = store.setTheme,
getTheme = store.getTheme,
setMode = store.setMode,
getMode = store.getMode,
addAtom = store.addAtom,
composeAtom = store.composeAtom;
exports.Atom = Atom;
exports.Parser = Parser;
exports.Store = Store;
exports.addAtom = addAtom;

@@ -158,2 +1430,3 @@ exports.composeAtom = composeAtom;

exports.css = css;
exports.digitReg = digitReg;
exports.getConfig = getConfig;

@@ -167,2 +1440,4 @@ exports.getMode = getMode;

exports.setTheme = setTheme;
exports.store = store;
exports.styleSheet = styleSheet;
//# sourceMappingURL=core.cjs.development.js.map

2

dist/core.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@fower/store"),r=require("@fower/parser"),t=require("@fower/utils"),o=require("@fower/sheet"),s=require("@fower/atom");function n(){return(n=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function a(e){for(var t=Object.entries(e),o=new r.Parser({}),n=0,a=t;n<a.length;n++){var i=a[n],u=i[0],f=i[1],l=new s.Atom({propKey:u,propValue:f,value:f,meta:{global:u},style:f});o.addAtom(l)}o.insertRules()}a({"*, ::before, ::after":{borderWidth:0,borderStyle:"solid",borderColor:"#d4d4d4",boxSizing:"border-box"}});var i=e.store.setConfig,u=e.store.getConfig,f=e.store.setTheme,l=e.store.getTheme,p=e.store.setMode,c=e.store.getMode,d=e.store.composeAtom;exports.addAtom=e.store.addAtom,exports.composeAtom=d,exports.createStyle=function(){for(var e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];var s=t.reduce((function(e,r){var t;return n({},e,"string"==typeof r?((t={})[r]=!0,t):{css:r})}),{}),a=new r.Parser(s),i=a.toStyle();return i},exports.css=function(){for(var e=arguments.length,o=new Array(e),s=0;s<e;s++)o[s]=arguments[s];if(!o.length)return"";var n=new r.Parser(t.argsToProps(o));return n.insertRules(),n.getClassNames().join(" ")},exports.getConfig=u,exports.getMode=c,exports.getTheme=l,exports.injectGlobalStyle=a,exports.keyframes=function(e,r){var s=Object.entries(e).reduce((function(e,r){var o=r[0],s=Object.entries(r[1]).reduce((function(e,r){return e+(r[0]+": ")+r[1]+";"}),"");return e+(t.jsKeyToCssKey(o)+" {")+s+"}"}),""),n=r||"keyframes-"+t.hash(JSON.stringify(e));return o.styleSheet.insertStyles(["\n @keyframes "+n+" {\n "+s+"\n }\n "]),n},exports.setConfig=i,exports.setMode=p,exports.setTheme=f;
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("deepmerge")),r=require("@fower/utils"),i=e(require("string-hash")),n=require("@fower/color-helper"),o=require("@fower/css-object-processor");function s(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function a(e,t,r){return t&&s(e.prototype,t),r&&s(e,r),e}function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var r,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)t.indexOf(r=o[i])>=0||(n[r]=e[r]);return n}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,i=new Array(t);r<t;r++)i[r]=e[r];return i}function d(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return c(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,void 0):void 0}}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var i=0;return function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f=function(){function e(){var e=this;this.config={unit:"px",inline:!1,important:!1,mode:{currentMode:"light",autoDarkMode:{enabled:!1,mappings:{white:"black",black:"white",50:"900",100:"800",200:"700",300:"600",400:"500",500:"400",600:"300",700:"200",800:"100",900:"50"}},modeList:["light","dark"],classPrefix:""},prefix:"",pseudos:["active","checked","disabled","enabled","default","empty","focus","focus-within","invalid","hover","link","visited","first-child","last-child","after","before","placeholder","selection"],theme:{breakpoints:{}},plugins:[]},this.atomCache=new Map,this.getAtomIds=function(){return Array.from(e.atomCache.keys())},this.compositions=new Map,this.getConfig=function(){return e.config},this.setConfig=function(r,i){void 0===i&&(i="deepmerge"),e.config="replace"===i?r:"merge"===i?u({},e.config,r):t(e.config,r)},this.getTheme=function(){return e.config.theme},this.setTheme=function(r){e.config.theme=t(e.config.theme||{},r)},this.getMode=function(){var t;return(null==(t=e.config.mode)?void 0:t.currentMode)||""},this.setMode=function(t){if(r.isBrowser){var i=e.config.mode.currentMode;i&&document.documentElement.classList.remove(i),t&&document.documentElement.classList.add(t),localStorage.setItem("fower-mode",t),e.setConfig({mode:{currentMode:t}})}},this.use=function(){var t;(t=e.config.plugins).push.apply(t,arguments)},this.addAtom=function(t,r){var i={isMatch:function(e){return"string"==typeof t?e===t:t instanceof RegExp&&t.test(e)},handleAtom:"function"==typeof r?r:function(e){return e.style=r,e}};return e.use(i),i},this.composeAtom=function(t,r){e.compositions.set(t,r)}}return a(e,[{key:"theme",get:function(){return this.config.theme}}]),e}(),p=new f;globalThis.__fower_store__=p;var h=["excludedProps"],m=/^(m[xytrbl]?-?|p[xytrbl]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border[trbl]?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i,y=function(){function e(e){var t=this;this.options=e,this.value="",this.id="",this.type="",this.setId=function(){var e,r=t.meta,n=t.key,o=t.value,s=r.important,a=l(r,["pseudoPrefix","childSelector","important"]),u=Object.values(a).sort();return s&&u.push("i"),r.global?(e=i(JSON.stringify(o)).toString(),t.id=e,e):(e="boolean"==typeof o&&!0===o?n:Array.isArray(o)?n+"-"+o.join("-"):n+"-"+String(o),u.length&&(e=e+"--"+u.join("--")),e=e.replace(/[#().]/g,"").replace(/\%/g,"p").replace(/\s+/g,"-"),e=/^[a-zA-Z0-9-]+$/.test(e)?e:"css-"+i(e),t.isFalsePropValue&&(e+="--false"),t.id=e,e)},this.propKey=e.propKey,this.propValue=e.propValue,this.key=e.key||this.propKey,this.value=e.value||this.propValue,this.style=e.style,this.handled=this.getInitialHandled(),this.isValid=this.getIsValid(),this.inserted=!1,this.meta=u({},e.meta)||{},this.preprocessAtom()}var t=e.prototype;return t.preprocessAtom=function(){var e=this.postfixPreprocessor();return this.setId(),e},t.postfixPreprocessor=function(){var e=p.config,t=e.pseudos,r=void 0===t?[]:t,i=e.mode.modeList,n=this.propKey,o=this.propValue,s=Object.keys(e.theme.breakpoints),a=i||[],u=r,l="--("+s.join("|")+")",c="--("+a.join("|")+")",d="--("+u.join("|")+")",f=new RegExp(c),h=new RegExp(d),m=new RegExp(l),y=/--[told](\d{1,2}|100)($|--)/i;if(y.test(o)){var g=o.split("--"),v=g[1];this.value=g[0],this.meta.colorPostfix=v}var b=f.test(n),k=h.test(n),S=m.test(n),x=/--i/i.test(n),A=y.test(n),j=/--\$\w+/i.test(n);if(!(b||k||S||x||A))return this.digitPreprocessor();var w,C=n.split("--");if(this.key=C[0],b&&(this.meta.mode=C.find((function(e){return a.includes(e)}))),k){var O=C.find((function(e){return u.includes(e)}));this.meta.pseudoPrefix=["after","before","placeholder","selection"].includes(O)?"::":":",this.meta.pseudo=O}if(S){var P=C.find((function(e){return s.includes(e)}));this.meta.breakpoint=P}return x&&(this.meta.important=!!C.find((function(e){return"i"===e}))),A&&(this.meta.colorPostfix=C.find((function(e){return y.test("--"+e)}))),j&&(this.meta.parentClass=null==(w=C.find((function(e){return e.startsWith("$")})))?void 0:w.replace(/^\$/,"")),this.digitPreprocessor(),this},t.digitPreprocessor=function(){if(!m.test(this.key))return this;var e=p.config.theme.spacings,t=/^([a-z]+)(\d+)$/i.test(this.key),r=this.key.toString(),i=r.match(/^([a-z]+)(\d+)$/i)||r.match(/^([a-z]*)-(-?\d+[a-z]*?)$/i)||r.match(/^([a-z]+)-(auto)$/i);if(!i)return this;var n=i[2];return this.key=i[1],this.value=t?e[""+n.toLowerCase()]:n,this},t.getInitialHandled=function(){return this.options.handled?this.options.handled:!!this.isFalsePropValue||!!h.includes(this.propKey)},t.getIsValid=function(){return!this.isFalsePropValue&&!h.includes(this.propKey)},a(e,[{key:"isValueProp",get:function(){return"string"==typeof this.propValue||"number"==typeof this.propValue}},{key:"styleKeys",get:function(){return Object.keys(this.style||{}).join("-")}},{key:"styleKeysHash",get:function(){var e=l(this.meta,["colorPostfix"]);return Object.keys(this.style||{}).join("-")+JSON.stringify(e)}},{key:"isFalsePropValue",get:function(){return"boolean"==typeof this.propValue&&!this.propValue}},{key:"isTruePropValue",get:function(){return"boolean"==typeof this.propValue&&this.propValue}}]),e}(),g=new(function(){function e(){var e;this.$style=null==(e=globalThis.document)||null==e.querySelector?void 0:e.querySelector("[data-fower]"),this.cssString="",this.ssrAtomIds=null}var t=e.prototype;return t.createStyleElement=function(){var e=document.createElement("style");return e.dataset.fower="",document.head.append(e),e},t.getSsrAtomIds=function(){var e,t;return this.$style?this.ssrAtomIds?this.ssrAtomIds:(null==(e=this.$style)||null==(t=e.dataset.fower)?void 0:t.split(","))||[]:[]},t.insertStyleToHtml=function(e){this.$style||(this.$style=this.createStyleElement());for(var t,r=d(e);!(t=r()).done;){var i=t.value;try{this.$style.sheet.insertRule(i)}catch(e){console.warn(e)}}},t.insertStyles=function(e){if(void 0===e&&(e=[]),e.length)return r.isBrowser?this.insertStyleToHtml(e):void(this.cssString=this.cssString+" "+e.join(" "))},t.getStyle=function(){return this.cssString},e}()),v=/(-columns|(^|[^e]-)padding|[^t]-spacing|l-align|rows|(^|(^border|[dkmnptx]|le|ne)-)width|^border|tom|[ek]-start|(o|[^e]-du)ration|us|(^|[^tv]-)left|(^|-)top|tance|rgin|e-offset|(er|g|n|t)-block|(^|[^tv]-)right|basis|[gnt]-inline|gap|(^|[^e]-)height|ness|(^|[^p]-)inset|[ek]-end|elay|tline|ve|dent|-rotate|n-rule|(c|ck|d|ne|t)-size)$/,b=["color","backgroundColor","borderColor"],k=["children","onClick","onChange","onBlur","className","placeholder"],S=function(){function e(e){var t,r;void 0===e&&(e={}),this.props=e,this.atoms=[],this.getClassNameById=function(e){return p.config.prefix+e},this.traverseProps(e),null!=(t=p.config.mode)&&null!=(r=t.autoDarkMode)&&r.enabled&&this.autoDarkMode()}var t=e.prototype;return t.traverseProps=function(e){if(!r.isEmptyObj(e)){for(var t,i=this.config,n=i.pseudos,o=void 0===n?[]:n,s=i.mode.modeList,a=i.theme.breakpoints||{},l=Object.keys(a),c=s||[],f=o,h=e.excludedProps,m=void 0===h?[]:h,g=Object.entries(e),v=d(this.plugins);!(t=v()).done;){var b=t.value;b.init&&b.init(e)}if(null!=e&&e.className)for(var S,x=d(e.className.split(/\s+/));!(S=x()).done;)g.push([S.value,!0]);for(var A=0,j=g;A<j.length;A++){var w=j[A],C=w[0],O=w[1];if(!m.includes(C)&&!k.includes(C)&&this.isValidProp(C,O))if("css"!==C){if(C.startsWith("_")){var P=C.replace(/^_/,""),V=Array.isArray(O)?O.reduce((function(e,t){var r;return u({},e,((r={})[t]=!0,r))}),{}):O;if(c.includes(P)){this.parseCSSObject(V,{mode:P});continue}if(l.includes(P)){this.parseCSSObject(V,{breakpoint:a[P]});continue}if(f.includes(P)){this.parseCSSObject(V,{pseudoPrefix:":",pseudo:P});continue}}var K=p.compositions.get(C);if(K){this.parseCSSObject(K,{});var M=new y({propKey:C,propValue:O});M.handled=!0,M.style={},this.addAtom(M)}else{var I=new y({propKey:C,propValue:O});try{this.mutateAtom(I),I.handled&&this.addAtom(I)}catch(e){continue}}}else this.parseCSSObject(O,{})}for(var T,N=d(this.plugins);!(T=N()).done;){var $=T.value;$.afterAtomStyleCreate&&$.afterAtomStyleCreate(this)}}},t.getAutoDarkModeAtom=function(e){var t;if(e.meta.mode)return null;if(!e.style)return null;var i=Object.entries(e.style);if(null==i||!i.length)return null;var n,o={},s=p.config,a=s.mode.autoDarkMode.mappings,l=s.theme.colors,c=i[0],d=c[0],f=c[1];if(!b.includes(d))return null;if(!l[f])return null;var h=(f.match(/^([a-z]+)(\d+)$/i)||[])[2];if(!1===a[f])return null;var m="color"===d,g="backgroundColor"===d,v="borderColor"===d;return l[n=a[f]?a[f]:f.replace(h,a[h])]?(m?o.propKey=n:g?o.propKey="bg"+r.upFirst(n):v&&(o.propKey="border"+r.upFirst(n)),o.propValue=!0):m?(o.propKey="color",o.propValue=n):g?(o.propKey="bg",o.propValue=n):v&&(o.propKey="borderColor",o.propValue=n),o.style=((t={})[d]=n,t),new y(u({},o,{meta:u({},e.meta,{mode:"dark"})}))},t.autoDarkMode=function(){for(var e,t=d(this.atoms);!(e=t()).done;){var r=e.value;if(!this.atoms.find((function(e){return b.includes(e.type)&&"dark"===e.meta.mode}))){var i=this.getAutoDarkModeAtom(r);if(i){var n=p.atomCache.get(i.id);this.addAtom(n||i)}}}},t.formatCssValue=function(e,t){if(!v.test(e))return t;var i;if(r.isPercentNumber(String(t)))return String(t).replace("p","%");if(!r.isNumber(t))return t;if((i=Number(t))<1&&i>0)return 100*i+"%";var n=p.config;return"none"!==n.unit?n.transformUnit?n.transformUnit(i):t+p.config.unit:i},t.styleToString=function(e,t){var i=this,o=t.important,s=t.colorPostfix;return Object.entries(e).reduce((function(e,t){var a=t[1],u=r.jsKeyToCssKey(t[0]),l=o?" !important":"",c=p.theme.colors;try{return e+(u+": ")+(a=s?n.formatColor((null==c?void 0:c[a])||a,s):i.formatCssValue(u,(null==c?void 0:c[a])||a))+l+";"}catch(e){return""}}),"")},t.addAtom=function(e){var t;p.atomCache.get(e.id)||p.atomCache.set(e.id,e);for(var r=g.getSsrAtomIds(),i=((null==(t=this.config.theme)?void 0:t.colors)||{}).modes,n=0,o=Object.entries(void 0===i?{}:i);n<o.length;n++){var s=o[n],a=s[0],l=s[1];if(e.style){var c=Object.entries(e.style);if(c.length){var d=c[0],f=d[0],h=l[d[1]];if(h){var m="--"+a,y=JSON.parse(JSON.stringify(e));y.key=e.key+m,y.id=e.id+m,y.meta=u({mode:a},e.meta),y.style[f]=h,r.includes(y.id)&&(y.inserted=!0),this.atoms.push(y)}}}}r.includes(e.id)&&(e.inserted=!0),this.atoms.push(e)},t.isValidProp=function(e,t){return"css"===e||!!e.startsWith("_")||!!Array.isArray(t)||!!["string","boolean","number","undefined"].includes(typeof t)},t.mutateAtom=function(e){var t=p.atomCache.get(e.id);if(t)throw this.addAtom(t),new Error("atom is cached, add to this.atoms derectly, no need to mutate");if(e.handled)throw this.addAtom(e),new Error("atom is handled, add to this.atoms derectly ,no need to mutate");for(var r,i=d(this.plugins);!(r=i()).done;){var n=r.value;if(null!=n.isMatch&&n.isMatch(e.key)){n.beforeHandleAtom&&(e=n.beforeHandleAtom(e,this)),n.handleAtom&&(e=null==n.handleAtom?void 0:n.handleAtom(e,this)),e.handled=!0;break}}},t.parseCSSObject=function(e,t){void 0===t&&(t={});for(var r,i=d(o.parse(e));!(r=i()).done;){var n=r.value,s=n.selector,a=n.selectorType,l=n.style,c=Object.entries(l);if(c.length){var f=c[0],h={propKey:f[0],propValue:f[1],meta:u({},t)};if("pseudo"===a&&h.meta){var m=s.match(/(:+)(.+)/)||[],g=m[2];h.meta.pseudoPrefix=m[1],h.meta.pseudo=g}"child"===a&&h.meta&&(h.meta.childSelector=s),"sibling"===a&&h.meta&&(h.meta.siblingSelector=s);var v=new y(h);try{this.mutateAtom(v)}catch(e){continue}v.style||(v.style=l,v.handled=!0);var b=p.atomCache.get(v.id);this.addAtom(b||v)}}},t.makeResponsiveStyle=function(e,t){return"@media (min-width: "+this.config.theme.breakpoints[e]+") {"+t+"}"},t.getClassNames=function(){var e=this,t=[];this.atoms.reduce((function(r,i){if(!i.style||!Object.keys(i.style).length)return r;var n=r.findIndex((function(e){return e.styleKeysHash===i.styleKeysHash}));if(!i.isValid)return r;var o=e.getClassNameById(i.id);return-1===n?(t.push(o),r=[].concat(r,[i])):(r.splice(n,1,i),t.splice(n,1,o)),r}),[]);var r=this.props.className,i=(void 0===r?"":r).split(/\s+/).filter((function(e){return!t.includes(e)&&!!e}));return t=t.concat(i),this.hasResponsive&&t.unshift(this.uniqueClassName),t},t.toStyle=function(){var e=this;return this.atoms.reduce((function(t,i){if(!i.isValid)return t;var n=p.theme.colors,o=Object.entries(i.style).reduce((function(t,i){var o,s=i[0],a=i[1],l=e.formatCssValue(r.jsKeyToCssKey(s),n[a]||a);return u({},t,((o={})[s]=l,o))}),{});return u({},t,o)}),{})},t.toRules=function(e){var t=this;void 0===e&&(e=!1);var i=this.config.mode.classPrefix,n=void 0===i?"":i,o=[],s=this.config.theme.breakpoints;this.atoms=this.atoms.sort((function(e,t){return parseInt(s[t.meta.breakpoint]||"0")-parseInt(s[e.meta.breakpoint]||"0")}));for(var a,u=function(){var i=a.value,s="",u=i.id,l=i.style,c=void 0===l?{}:l,d=i.meta;if(!i.isValid)return"continue";if(r.isEmptyObj(c))return"continue";var f=d.pseudo,p=d.pseudoPrefix,h=d.mode,m=d.breakpoint,y=void 0===m?"":m,g=d.childSelector,v=d.siblingSelector,b=d.parentClass,k=!!t.atoms.find((function(e){return e.styleKeys===i.styleKeys&&(y||e.meta.breakpoint)})),S=k||y?"."+t.uniqueClassName:"";if(!e&&!k&&i.inserted)return"continue";i.inserted=!0;var x=t.getClassNameById(u),A=d.global?d.global:S+"."+x;if(h&&(A="."+n+h+" "+A),g&&(A=A+" "+g),v&&(A=""+A+v),f){var j=p+f;b?A="."+b+j+" "+A:A+=j}s=A+" { "+t.styleToString(c,i.meta)+" }",y&&(s=t.makeResponsiveStyle(y,s)),o.push(s)},l=d(this.atoms);!(a=l()).done;)u();return o},t.getParsedProps=function(){var e=this.props,t=this.atoms;return r.isEmptyObj(e)?{}:Object.entries(e).reduce((function(e,r){var i=r[0],n=r[1];return/.*--(\d+)?[a-z]+$/i.test(i)||t.find((function(e){return[e.propKey,e.key,"css"].includes(i)}))||(e[i]=n),e}),{})},t.insertRules=function(){var e=this.toRules();g.insertStyles(e)},a(e,[{key:"uniqueClassName",get:function(){return r.objectToClassName(Object.keys(this.props))}},{key:"hasResponsive",get:function(){return this.atoms.some((function(e){return!!e.meta.breakpoint}))}},{key:"config",get:function(){return p.config}},{key:"plugins",get:function(){return p.config.plugins}}]),e}();function x(e){for(var t=Object.entries(e),r=new S({}),i=0,n=t;i<n.length;i++){var o=n[i],s=o[0],a=o[1],u=new y({propKey:s,propValue:a,value:a,meta:{global:s},style:a});r.addAtom(u)}r.insertRules()}x({"*, ::before, ::after":{borderWidth:0,borderStyle:"solid",borderColor:"#d4d4d4",boxSizing:"border-box"}});var A=p.setConfig,j=p.getConfig,w=p.setTheme,C=p.getTheme,O=p.setMode,P=p.getMode,V=p.addAtom,K=p.composeAtom;exports.Atom=y,exports.Parser=S,exports.Store=f,exports.addAtom=V,exports.composeAtom=K,exports.createStyle=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];var i=t.reduce((function(e,t){var r;return u({},e,"string"==typeof t?((r={})[t]=!0,r):{css:t})}),{}),n=new S(i),o=n.toStyle();return o},exports.css=function(){for(var e=arguments.length,t=new Array(e),i=0;i<e;i++)t[i]=arguments[i];if(!t.length)return"";var n=new S(r.argsToProps(t));return n.insertRules(),n.getClassNames().join(" ")},exports.digitReg=m,exports.getConfig=j,exports.getMode=P,exports.getTheme=C,exports.injectGlobalStyle=x,exports.keyframes=function(e,t){var i=Object.entries(e).reduce((function(e,t){var i=t[0],n=Object.entries(t[1]).reduce((function(e,t){return e+(t[0]+": ")+t[1]+";"}),"");return e+(r.jsKeyToCssKey(i)+" {")+n+"}"}),""),n=t||"keyframes-"+r.hash(JSON.stringify(e));return g.insertStyles(["\n @keyframes "+n+" {\n "+i+"\n }\n "]),n},exports.setConfig=A,exports.setMode=O,exports.setTheme=w,exports.store=p,exports.styleSheet=g;
//# sourceMappingURL=core.cjs.production.min.js.map

1307

dist/core.esm.js

@@ -1,22 +0,21 @@

import { store } from '@fower/store';
import { Parser } from '@fower/parser';
import { argsToProps, jsKeyToCssKey, hash } from '@fower/utils';
import { styleSheet } from '@fower/sheet';
import { Atom } from '@fower/atom';
import deepmerge from 'deepmerge';
import { isBrowser, isEmptyObj, upFirst, isPercentNumber, isNumber, jsKeyToCssKey, objectToClassName, argsToProps, hash as hash$1 } from '@fower/utils';
import hash from 'string-hash';
import { formatColor } from '@fower/color-helper';
import { parse } from '@fower/css-object-processor';
/**
* convert atomic props to classNames
* @param args
* @returns classNames
*/
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
if (!args.length) return '';
var parser = new Parser(argsToProps(args));
parser.insertRules();
return parser.getClassNames().join(' ');
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}

@@ -42,2 +41,1270 @@

function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it) return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var modeCacheKey = 'fower-mode';
var Store = /*#__PURE__*/function () {
function Store() {
var _this = this;
this.config = {
unit: 'px',
inline: false,
important: false,
mode: {
currentMode: 'light',
autoDarkMode: {
enabled: false,
mappings: {
white: 'black',
black: 'white',
'50': '900',
'100': '800',
'200': '700',
'300': '600',
'400': '500',
'500': '400',
'600': '300',
'700': '200',
'800': '100',
'900': '50'
}
},
modeList: ['light', 'dark'],
classPrefix: ''
},
prefix: '',
pseudos: ['active', 'checked', 'disabled', 'enabled', 'default', 'empty', 'focus', 'focus-within', 'invalid', 'hover', 'link', 'visited', 'first-child', 'last-child', 'after', 'before', 'placeholder', 'selection'],
theme: {
breakpoints: {}
},
plugins: []
};
this.atomCache = new Map();
this.getAtomIds = function () {
return Array.from(_this.atomCache.keys());
}; // composed atomic props
this.compositions = new Map();
this.getConfig = function () {
return _this.config;
}; // user config
this.setConfig = function (config, strategy) {
if (strategy === void 0) {
strategy = 'deepmerge';
}
if (strategy === 'replace') {
_this.config = config;
} else if (strategy === 'merge') {
_this.config = _extends({}, _this.config, config);
} else {
_this.config = deepmerge(_this.config, config);
}
};
this.getTheme = function () {
return _this.config.theme;
};
this.setTheme = function (partialThemeConfig) {
_this.config.theme = deepmerge(_this.config.theme || {}, partialThemeConfig);
};
this.getMode = function () {
var _this$config$mode;
return ((_this$config$mode = _this.config.mode) == null ? void 0 : _this$config$mode.currentMode) || '';
};
this.setMode = function (mode) {
if (!isBrowser) return;
var currentMode = _this.config.mode.currentMode;
if (currentMode) {
document.documentElement.classList.remove(currentMode);
}
if (mode) {
document.documentElement.classList.add(mode);
}
localStorage.setItem(modeCacheKey, mode);
_this.setConfig({
mode: {
currentMode: mode
}
});
};
this.use = function () {
var _this$config$plugins;
(_this$config$plugins = _this.config.plugins).push.apply(_this$config$plugins, arguments);
};
this.addAtom = function (matcher, handleAtomOrStyleObject) {
var plugin = {
isMatch: function isMatch(key) {
if (typeof matcher === 'string') return key === matcher;
if (matcher instanceof RegExp) return matcher.test(key);
return false;
},
handleAtom: typeof handleAtomOrStyleObject === 'function' ? handleAtomOrStyleObject : function (atom) {
atom.style = handleAtomOrStyleObject;
return atom;
}
};
_this.use(plugin);
return plugin;
};
this.composeAtom = function (atomName, cssObject) {
_this.compositions.set(atomName, cssObject);
};
}
_createClass(Store, [{
key: "theme",
get: function get() {
return this.config.theme;
}
}]);
return Store;
}();
var store = /*#__PURE__*/new Store();
globalThis.__fower_store__ = store;
var invalidProps = ['excludedProps'];
/**
* @example p2,mx4,left10,spaceX4...
* @example p-20,opacity-80
*/
var digitReg = /^(m[xytrbl]?-?|p[xytrbl]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border[trbl]?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i;
var Atom = /*#__PURE__*/function () {
function Atom(options) {
var _this = this;
this.options = options;
/**
* atom value, get it from PropValue or propKey
* @example
* <Box toCenter></Box> -> true
* <Box m={4}></Box> -> 4
* <Box m-4></Box> -> 4
* <Box m4></Box> -> 16
*/
this.value = '';
/**
* unique id for cache
*/
this.id = '';
this.type = '';
this.setId = function () {
var meta = _this.meta,
key = _this.key,
value = _this.value;
var important = meta.important,
rest = _objectWithoutPropertiesLoose(meta, ["pseudoPrefix", "childSelector", "important"]);
var values = Object.values(rest).sort();
if (important) values.push('i');
var id; // is global style
if (meta.global) {
id = hash(JSON.stringify(value)).toString();
_this.id = id;
return id;
}
if (typeof value === 'boolean' && value === true) {
id = key;
} else if (Array.isArray(value)) {
var valueStr = value.join('-');
id = key + "-" + valueStr;
} else {
id = key + "-" + String(value);
}
if (values.length) id = id + '--' + values.join('--'); // handle special charactor
id = id.replace(/[#().]/g, '').replace(/\%/g, 'p').replace(/\s+/g, '-');
var isValid = /^[a-zA-Z0-9-]+$/.test(id);
id = isValid ? id : "css-" + hash(id);
if (_this.isFalsePropValue) id = id + '--false';
_this.id = id;
return id;
};
this.propKey = options.propKey;
this.propValue = options.propValue;
this.key = options.key || this.propKey;
this.value = options.value || this.propValue;
this.style = options.style;
this.handled = this.getInitialHandled();
this.isValid = this.getIsValid();
this.inserted = false; // shallow clone it
this.meta = _extends({}, options.meta) || {};
this.preprocessAtom();
}
/**
* string or number prop
* @readonly
* @memberof Atom
*/
var _proto = Atom.prototype;
/**
*
* @param config fower config
* @returns
*/
_proto.preprocessAtom = function preprocessAtom() {
var newAtom = this.postfixPreprocessor();
this.setId();
return newAtom;
};
_proto.postfixPreprocessor = function postfixPreprocessor() {
var connector = '--';
var specialPseudos = ['after', 'before', 'placeholder', 'selection'];
var _store$config = store.config,
_store$config$pseudos = _store$config.pseudos,
pseudos = _store$config$pseudos === void 0 ? [] : _store$config$pseudos,
theme = _store$config.theme,
mode = _store$config.mode;
var modeList = mode.modeList;
var breakpoints = theme.breakpoints;
var propKey = this.propKey,
propValue = this.propValue;
var breakpointKeys = Object.keys(breakpoints);
var modeKeys = modeList || [];
var pseudoKeys = pseudos;
var regResponsiveStr = connector + "(" + breakpointKeys.join('|') + ")";
var regModeStr = connector + "(" + modeKeys.join('|') + ")";
var regPseudoStr = connector + "(" + pseudoKeys.join('|') + ")";
var regMode = new RegExp(regModeStr);
var regPseudo = new RegExp(regPseudoStr);
var regResponsive = new RegExp(regResponsiveStr);
var regImportant = /--i/i;
var regColorPostfix = /--[told](\d{1,2}|100)($|--)/i;
var regParentSelector = /--\$\w+/i;
/** handle value like: red500--T40, #666--O30 */
if (regColorPostfix.test(propValue)) {
var _propValue$split = propValue.split('--'),
colorName = _propValue$split[0],
postfix = _propValue$split[1];
this.value = colorName;
this.meta.colorPostfix = postfix;
}
var isMode = regMode.test(propKey);
var isPseudo = regPseudo.test(propKey);
var isResponsive = regResponsive.test(propKey);
var isImportant = regImportant.test(propKey);
var isColorPostfix = regColorPostfix.test(propKey);
var isParentSelector = regParentSelector.test(propKey);
var hasPostfix = isMode || isPseudo || isResponsive || isImportant || isColorPostfix;
if (!hasPostfix) return this.digitPreprocessor();
var result = propKey.split(connector);
this.key = result[0]; // key that already removed postfix
if (isMode) {
this.meta.mode = result.find(function (i) {
return modeKeys.includes(i);
});
}
if (isPseudo) {
var pseudo = result.find(function (i) {
return pseudoKeys.includes(i);
});
this.meta.pseudoPrefix = specialPseudos.includes(pseudo) ? '::' : ':';
this.meta.pseudo = pseudo;
}
if (isResponsive) {
var breakpointType = result.find(function (i) {
return breakpointKeys.includes(i);
});
this.meta.breakpoint = breakpointType;
}
if (isImportant) {
this.meta.important = !!result.find(function (i) {
return i === 'i';
});
}
if (isColorPostfix) {
this.meta.colorPostfix = result.find(function (i) {
return regColorPostfix.test("--" + i);
});
}
if (isParentSelector) {
var _result$find;
this.meta.parentClass = (_result$find = result.find(function (i) {
return i.startsWith('$');
})) == null ? void 0 : _result$find.replace(/^\$/, '');
} // check is theme space key, if yes, preprocess it
this.digitPreprocessor();
return this;
};
_proto.digitPreprocessor = function digitPreprocessor() {
if (!digitReg.test(this.key)) return this;
var spacings = store.config.theme.spacings; // is theme space key
var isSpace = /^([a-z]+)(\d+)$/i.test(this.key);
/**
* match props link: m4,mx2,mt9, spaceX4...
* to m4 -> [ key: m, value: 4 ]
* to m-20 -> [ key: m, value: 20 ]
* to m-20px -> [ key: m, value: '20px' ]
*/
var keyStr = this.key.toString();
var result = keyStr.match(/^([a-z]+)(\d+)$/i) || keyStr.match(/^([a-z]*)-(-?\d+[a-z]*?)$/i) || keyStr.match(/^([a-z]+)-(auto)$/i);
if (!result) return this;
var newKey = result[1],
newPropValue = result[2];
this.key = newKey;
this.value = isSpace ? spacings["" + newPropValue.toLowerCase()] : newPropValue;
return this;
};
_proto.getInitialHandled = function getInitialHandled() {
if (this.options.handled) return this.options.handled;
if (this.isFalsePropValue) return true;
if (invalidProps.includes(this.propKey)) return true;
return false;
};
_proto.getIsValid = function getIsValid() {
if (this.isFalsePropValue) return false;
if (invalidProps.includes(this.propKey)) return false;
return true;
};
_createClass(Atom, [{
key: "isValueProp",
get: function get() {
return typeof this.propValue === 'string' || typeof this.propValue == 'number';
}
/**
* get style keys string
* @readonlyReactElement
* @memberof Atom
* @example
* { color: "#999"} -> color
* { paddingTop: 10, paddingBottom: 10} -> paddingTop-paddingTop
*/
}, {
key: "styleKeys",
get: function get() {
return Object.keys(this.style || {}).join('-');
}
/**
* get style key hash
* @readonly
* @memberof Atom
* @example
* { color: "#999"} -> color + hashed meta
* { paddingTop: 10, paddingBottom: 10} -> paddingTop-paddingTop + hashed meta
*/
}, {
key: "styleKeysHash",
get: function get() {
var _this$meta = this.meta,
rest = _objectWithoutPropertiesLoose(_this$meta, ["colorPostfix"]); // omit colorPostfix
return Object.keys(this.style || {}).join('-') + JSON.stringify(rest);
}
}, {
key: "isFalsePropValue",
get: function get() {
return typeof this.propValue === 'boolean' && !this.propValue;
}
}, {
key: "isTruePropValue",
get: function get() {
return typeof this.propValue === 'boolean' && this.propValue;
}
}]);
return Atom;
}();
var StyleSheet = /*#__PURE__*/function () {
function StyleSheet() {
var _globalThis$document;
this.$style = (_globalThis$document = globalThis.document) == null ? void 0 : _globalThis$document.querySelector == null ? void 0 : _globalThis$document.querySelector('[data-fower]');
this.cssString = '';
this.ssrAtomIds = null;
}
var _proto = StyleSheet.prototype;
_proto.createStyleElement = function createStyleElement() {
var $style = document.createElement('style');
$style.dataset.fower = '';
document.head.append($style);
return $style;
};
_proto.getSsrAtomIds = function getSsrAtomIds() {
var _this$$style, _this$$style$dataset$;
if (!this.$style) return [];
if (this.ssrAtomIds) return this.ssrAtomIds;
return ((_this$$style = this.$style) == null ? void 0 : (_this$$style$dataset$ = _this$$style.dataset.fower) == null ? void 0 : _this$$style$dataset$.split(',')) || [];
};
_proto.insertStyleToHtml = function insertStyleToHtml(rules) {
if (!this.$style) {
this.$style = this.createStyleElement();
} // const str = rules.join('\n')
// this.$style.innerHTML += str
// return
for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
var rule = _step.value;
try {
this.$style.sheet.insertRule(rule);
} catch (error) {
console.warn(error);
}
}
};
_proto.insertStyles = function insertStyles(rules) {
if (rules === void 0) {
rules = [];
}
if (!rules.length) return;
if (isBrowser) return this.insertStyleToHtml(rules);
this.cssString = this.cssString + ' ' + rules.join(' ');
};
_proto.getStyle = function getStyle() {
return this.cssString;
};
return StyleSheet;
}();
var styleSheet = /*#__PURE__*/new StyleSheet();
// from https://github.com/modulz/stitches/blob/canary/packages/core/src/unitOnlyProps.js
var reg = /(-columns|(^|[^e]-)padding|[^t]-spacing|l-align|rows|(^|(^border|[dkmnptx]|le|ne)-)width|^border|tom|[ek]-start|(o|[^e]-du)ration|us|(^|[^tv]-)left|(^|-)top|tance|rgin|e-offset|(er|g|n|t)-block|(^|[^tv]-)right|basis|[gnt]-inline|gap|(^|[^e]-)height|ness|(^|[^p]-)inset|[ek]-end|elay|tline|ve|dent|-rotate|n-rule|(c|ck|d|ne|t)-size)$/;
/**
* check css need unit
* @param cssKey css key, eg: border-width
* @returns
*/
function isUnitProp(cssKey) {
return reg.test(cssKey);
}
var colorKeys = ['color', 'backgroundColor', 'borderColor'];
var reactProps = ['children', 'onClick', 'onChange', 'onBlur', 'className', 'placeholder'];
/**
* An Abstract tool to handle atomic props
*/
var Parser = /*#__PURE__*/function () {
function Parser(props) {
var _store$config$mode, _store$config$mode$au;
if (props === void 0) {
props = {};
}
this.props = props;
/**
* atom parsed from props
*/
this.atoms = [];
this.getClassNameById = function (id) {
return store.config.prefix + id;
};
this.traverseProps(props);
if ((_store$config$mode = store.config.mode) != null && (_store$config$mode$au = _store$config$mode.autoDarkMode) != null && _store$config$mode$au.enabled) {
this.autoDarkMode();
}
}
var _proto = Parser.prototype;
/**
* traverse Props to init atoms
*/
_proto.traverseProps = function traverseProps(props) {
if (isEmptyObj(props)) return;
var _this$config = this.config,
_this$config$pseudos = _this$config.pseudos,
pseudos = _this$config$pseudos === void 0 ? [] : _this$config$pseudos,
theme = _this$config.theme,
mode = _this$config.mode;
var modeList = mode.modeList;
var breakpoints = theme.breakpoints || {};
var breakpointKeys = Object.keys(breakpoints);
var modeKeys = modeList || [];
var pseudoKeys = pseudos;
var _props$excludedProps = props.excludedProps,
excludedProps = _props$excludedProps === void 0 ? [] : _props$excludedProps;
var entries = Object.entries(props);
for (var _iterator = _createForOfIteratorHelperLoose(this.plugins), _step; !(_step = _iterator()).done;) {
var plugin = _step.value;
if (plugin.init) {
plugin.init(props);
}
}
if (props != null && props.className) {
for (var _iterator2 = _createForOfIteratorHelperLoose(props.className.split(/\s+/)), _step2; !(_step2 = _iterator2()).done;) {
var item = _step2.value;
entries.push([item, true]);
}
} // traverse Props
for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
var _entries$_i = _entries[_i],
propKey = _entries$_i[0],
propValue = _entries$_i[1];
// the prop should be excluded by user setting
if (excludedProps.includes(propKey)) continue;
if (reactProps.includes(propKey)) continue;
if (!this.isValidProp(propKey, propValue)) continue; // parse css prop
if (propKey === 'css') {
this.parseCSSObject(propValue, {});
continue;
}
/** handle _hover, _sm, _dark... */
if (propKey.startsWith('_')) {
var postfix = propKey.replace(/^_/, '');
var obj = Array.isArray(propValue) ? propValue.reduce(function (r, cur) {
var _extends2;
return _extends({}, r, (_extends2 = {}, _extends2[cur] = true, _extends2));
}, {}) : propValue;
if (modeKeys.includes(postfix)) {
this.parseCSSObject(obj, {
mode: postfix
});
continue;
}
if (breakpointKeys.includes(postfix)) {
this.parseCSSObject(obj, {
breakpoint: breakpoints[postfix]
});
continue;
}
if (pseudoKeys.includes(postfix)) {
this.parseCSSObject(obj, {
pseudoPrefix: ':',
pseudo: postfix
});
continue;
}
}
var composition = store.compositions.get(propKey);
if (composition) {
this.parseCSSObject(composition, {});
var _atom = new Atom({
propKey: propKey,
propValue: propValue
});
_atom.handled = true;
_atom.style = {};
this.addAtom(_atom);
continue;
}
var atom = new Atom({
propKey: propKey,
propValue: propValue
});
try {
this.mutateAtom(atom);
if (atom.handled) this.addAtom(atom);
} catch (error) {
continue;
}
}
for (var _iterator3 = _createForOfIteratorHelperLoose(this.plugins), _step3; !(_step3 = _iterator3()).done;) {
var _plugin = _step3.value;
if (_plugin.afterAtomStyleCreate) {
_plugin.afterAtomStyleCreate(this);
}
}
};
_proto.getAutoDarkModeAtom = function getAutoDarkModeAtom(atom) {
var _options$style;
if (atom.meta.mode) return null;
if (!atom.style) return null;
var entries = Object.entries(atom.style);
if (!(entries != null && entries.length)) return null;
var options = {};
var darkColor = '';
var config = store.config;
var mappings = config.mode.autoDarkMode.mappings;
var colors = config.theme.colors;
var _entries$ = entries[0],
colorKey = _entries$[0],
colorName = _entries$[1]; // check is valid color key
if (!colorKeys.includes(colorKey)) return null; // only color in theme is valid
if (!colors[colorName]) return null; // if scale is existed, scale should be 100,200,300,400...
var _ref = colorName.match(/^([a-z]+)(\d+)$/i) || [],
scale = _ref[2]; // is disable, eg: { red200: false}
if (mappings[colorName] === false) return null;
if (mappings[colorName]) {
darkColor = mappings[colorName];
} else {
darkColor = colorName.replace(scale, mappings[scale]);
}
var isColor = colorKey === 'color';
var isBgColor = colorKey === 'backgroundColor';
var isBorderColor = colorKey === 'borderColor';
if (colors[darkColor]) {
if (isColor) {
options.propKey = darkColor;
} else if (isBgColor) {
options.propKey = "bg" + upFirst(darkColor);
} else if (isBorderColor) {
options.propKey = "border" + upFirst(darkColor);
}
options.propValue = true;
} else {
if (isColor) {
options.propKey = 'color';
options.propValue = darkColor;
} else if (isBgColor) {
options.propKey = 'bg';
options.propValue = darkColor;
} else if (isBorderColor) {
options.propKey = 'borderColor';
options.propValue = darkColor;
}
}
options.style = (_options$style = {}, _options$style[colorKey] = darkColor, _options$style);
return new Atom(_extends({}, options, {
meta: _extends({}, atom.meta, {
mode: 'dark'
})
}));
};
_proto.autoDarkMode = function autoDarkMode() {
for (var _iterator4 = _createForOfIteratorHelperLoose(this.atoms), _step4; !(_step4 = _iterator4()).done;) {
var atom = _step4.value;
var find = this.atoms.find(function (i) {
return colorKeys.includes(i.type) && i.meta.mode === 'dark';
});
if (find) continue;
var darkAtom = this.getAutoDarkModeAtom(atom);
if (!darkAtom) continue;
var cachedAtom = store.atomCache.get(darkAtom.id);
if (cachedAtom) {
this.addAtom(cachedAtom);
} else {
this.addAtom(darkAtom);
}
}
}
/**
* Get final css value
* @param key css key, eg: font-szie, padding-top
* @param value css value
* @returns
*/
;
_proto.formatCssValue = function formatCssValue(key, value) {
// no need unit
if (!isUnitProp(key)) return value;
var numValue = value; // 80p -> 80%, 50p-> -50%
if (isPercentNumber(String(value))) {
return String(value).replace('p', '%');
}
if (!isNumber(value)) return value;
numValue = Number(value); // if num is between 0 and 1, convert it to percent number.
if (numValue < 1 && numValue > 0) {
return numValue * 100 + '%';
}
var config = store.config;
if (config.unit !== 'none') {
if (config.transformUnit) {
return config.transformUnit(numValue);
} else {
return value + store.config.unit;
}
}
return numValue;
}
/**
* convert style object to string
* @param style
* @param meta
* @example
* { width: 10 } -> "width: 10px;"
* { paddingTop: 10, paddingBottom: 10 } -> "padding-top: 10px;padding-bottom: 10px;"
* @returns
*/
;
_proto.styleToString = function styleToString(style, meta) {
var _this = this;
var important = meta.important,
colorPostfix = meta.colorPostfix;
return Object.entries(style).reduce(function (r, _ref2) {
var key = _ref2[0],
value = _ref2[1];
var cssKey = jsKeyToCssKey(key);
var posfix = important ? ' !important' : '';
var colors = store.theme.colors;
try {
if (colorPostfix) {
value = formatColor((colors == null ? void 0 : colors[value]) || value, colorPostfix);
} else {
value = _this.formatCssValue(cssKey, (colors == null ? void 0 : colors[value]) || value);
}
return r + (cssKey + ": " + value + posfix + ";");
} catch (error) {
return '';
}
}, '');
};
_proto.addAtom = function addAtom(atom) {
var _this$config$theme;
// if not cached, let's cache it
if (!store.atomCache.get(atom.id)) {
store.atomCache.set(atom.id, atom);
}
var ssrAtomIds = styleSheet.getSsrAtomIds();
var _ref3 = ((_this$config$theme = this.config.theme) == null ? void 0 : _this$config$theme.colors) || {},
_ref3$modes = _ref3.modes,
modes = _ref3$modes === void 0 ? {} : _ref3$modes;
var entries = Object.entries(modes);
/** for color mode */
for (var _i2 = 0, _entries2 = entries; _i2 < _entries2.length; _i2++) {
var _entries2$_i = _entries2[_i2],
mode = _entries2$_i[0],
colors = _entries2$_i[1];
if (!atom.style) continue;
var _entries3 = Object.entries(atom.style);
if (!_entries3.length) continue;
var _entries3$ = _entries3[0],
styleKey = _entries3$[0],
styleValue = _entries3$[1];
var colorValue = colors[styleValue];
if (colorValue) {
var postfix = '--' + mode; // TODO: improve clone
var modeAtom = JSON.parse(JSON.stringify(atom));
modeAtom.key = atom.key + postfix;
modeAtom.id = atom.id + postfix;
modeAtom.meta = _extends({
mode: mode
}, atom.meta);
modeAtom.style[styleKey] = colorValue;
if (ssrAtomIds.includes(modeAtom.id)) modeAtom.inserted = true;
this.atoms.push(modeAtom);
}
}
if (ssrAtomIds.includes(atom.id)) atom.inserted = true;
this.atoms.push(atom);
}
/**
* prop that can to handle, only primitive value type is valid
* @param propKey
* @param propValue
* @returns
*/
;
_proto.isValidProp = function isValidProp(propKey, propValue) {
var validTypes = ['string', 'boolean', 'number', 'undefined'];
if (propKey === 'css') return true; // for _hover,_sm,_dark...
if (propKey.startsWith('_')) return true;
if (Array.isArray(propValue)) return true;
var type = typeof propValue;
if (validTypes.includes(type)) return true;
return false;
}
/**
* to mutate atom attribute, and add atom to this.atoms
* @param atom
*/
;
_proto.mutateAtom = function mutateAtom(atom) {
var cachedAtom = store.atomCache.get(atom.id);
if (cachedAtom) {
this.addAtom(cachedAtom);
throw new Error('atom is cached, add to this.atoms derectly, no need to mutate');
} // if handled, push to this.atoms and skip it
if (atom.handled) {
this.addAtom(atom);
throw new Error('atom is handled, add to this.atoms derectly ,no need to mutate');
}
for (var _iterator5 = _createForOfIteratorHelperLoose(this.plugins), _step5; !(_step5 = _iterator5()).done;) {
var plugin = _step5.value;
if (!(plugin.isMatch != null && plugin.isMatch(atom.key))) continue;
if (plugin.beforeHandleAtom) {
atom = plugin.beforeHandleAtom(atom, this);
}
if (plugin.handleAtom) {
atom = plugin.handleAtom == null ? void 0 : plugin.handleAtom(atom, this);
}
atom.handled = true;
break; // break from this plugin
}
};
_proto.parseCSSObject = function parseCSSObject(propValue, meta) {
if (meta === void 0) {
meta = {};
}
var parsed = parse(propValue);
for (var _iterator6 = _createForOfIteratorHelperLoose(parsed), _step6; !(_step6 = _iterator6()).done;) {
var _step6$value = _step6.value,
selector = _step6$value.selector,
selectorType = _step6$value.selectorType,
style = _step6$value.style;
var entries = Object.entries(style);
if (!entries.length) continue; // entries.length is 1
var _entries$2 = entries[0],
propKey = _entries$2[0],
_propValue = _entries$2[1];
var option = {
propKey: propKey,
propValue: _propValue,
meta: _extends({}, meta)
};
if (selectorType === 'pseudo' && option.meta) {
var _ref4 = selector.match(/(:+)(.+)/) || [],
pseudoPrefix = _ref4[1],
pseudo = _ref4[2];
option.meta.pseudoPrefix = pseudoPrefix;
option.meta.pseudo = pseudo;
}
if (selectorType === 'child' && option.meta) {
option.meta.childSelector = selector;
}
if (selectorType === 'sibling' && option.meta) {
option.meta.siblingSelector = selector;
}
var atom = new Atom(option);
try {
this.mutateAtom(atom);
} catch (error) {
continue;
} // not match atomic props rule
if (!atom.style) {
atom.style = style;
atom.handled = true;
}
var cachedAtom = store.atomCache.get(atom.id);
if (cachedAtom) {
this.addAtom(cachedAtom);
} else {
this.addAtom(atom);
}
}
};
_proto.makeResponsiveStyle = function makeResponsiveStyle(breakpoint, rule) {
var breakpoints = this.config.theme.breakpoints;
return "@media (min-width: " + breakpoints[breakpoint] + ") {" + rule + "}";
}
/**
* get component classNames
*/
;
_proto.getClassNames = function getClassNames() {
var _this2 = this;
/**
* handle override style
* @example
* <Box class="red200 blue200"></Box> will get <div class="blue200"></div>
* <Box class="px2 px4"></Box> will get <div class="px4"></div>
*/
var classNames = [];
this.atoms.reduce(function (result, cur) {
if (!cur.style || !Object.keys(cur.style).length) return result;
var index = result.findIndex(function (i) {
return i.styleKeysHash === cur.styleKeysHash;
});
if (!cur.isValid) return result;
var className = _this2.getClassNameById(cur.id);
if (index === -1) {
classNames.push(className);
result = [].concat(result, [cur]);
} else {
result.splice(index, 1, cur);
classNames.splice(index, 1, className);
}
return result;
}, []);
var _this$props$className = this.props.className,
className = _this$props$className === void 0 ? '' : _this$props$className;
var filteredClassNames = className.split(/\s+/).filter(function (i) {
return !classNames.includes(i) && !!i;
});
classNames = classNames.concat(filteredClassNames);
if (this.hasResponsive) {
classNames.unshift(this.uniqueClassName);
}
return classNames;
}
/**
* get style object
*/
;
_proto.toStyle = function toStyle() {
var _this3 = this;
var style = this.atoms.reduce(function (result, atom) {
if (!atom.isValid) return result; // not style type
var colors = store.theme.colors;
var style = Object.entries(atom.style).reduce(function (c, _ref5) {
var _extends3;
var key = _ref5[0],
value = _ref5[1];
var cssValue = _this3.formatCssValue(jsKeyToCssKey(key), colors[value] || value);
return _extends({}, c, (_extends3 = {}, _extends3[key] = cssValue, _extends3));
}, {});
return _extends({}, result, style);
}, {});
return style;
}
/**
* get rules for parser.insertRules
* @returns
*/
;
_proto.toRules = function toRules(enableInserted) {
var _this4 = this;
if (enableInserted === void 0) {
enableInserted = false;
}
var _this$config$mode$cla = this.config.mode.classPrefix,
classPrefix = _this$config$mode$cla === void 0 ? '' : _this$config$mode$cla;
var rules = [];
var breakpoints = this.config.theme.breakpoints; // sort responsive style
this.atoms = this.atoms.sort(function (a, b) {
return parseInt(breakpoints[b.meta.breakpoint] || '0') - parseInt(breakpoints[a.meta.breakpoint] || '0');
});
var _loop = function _loop() {
var atom = _step7.value;
var rule = '';
var id = atom.id,
isValid = atom.isValid,
_atom$style = atom.style,
style = _atom$style === void 0 ? {} : _atom$style,
meta = atom.meta; // no style in falsy prop
if (!isValid) return "continue"; // empty style
if (isEmptyObj(style)) return "continue";
var pseudo = meta.pseudo,
pseudoPrefix = meta.pseudoPrefix,
mode = meta.mode,
_meta$breakpoint = meta.breakpoint,
breakpoint = _meta$breakpoint === void 0 ? '' : _meta$breakpoint,
childSelector = meta.childSelector,
siblingSelector = meta.siblingSelector,
parentClass = meta.parentClass; // TODO: need refactor
var shouldUseUniqueClassName = !!_this4.atoms.find(function (i) {
return i.styleKeys === atom.styleKeys && (breakpoint || i.meta.breakpoint);
});
var uniqueSelector = shouldUseUniqueClassName || breakpoint ? '.' + _this4.uniqueClassName : '';
if (!enableInserted) {
if (!shouldUseUniqueClassName) {
if (atom.inserted) return "continue";
}
}
atom.inserted = true;
var className = _this4.getClassNameById(id);
var selector = meta.global ? meta.global : uniqueSelector + "." + className;
if (mode) selector = "." + classPrefix + mode + " " + selector;
if (childSelector) selector = selector + " " + childSelector;
if (siblingSelector) {
selector = "" + selector + siblingSelector;
}
if (pseudo) {
var pseudoSelector = pseudoPrefix + pseudo;
if (parentClass) {
selector = "." + parentClass + pseudoSelector + " " + selector;
} else {
selector = selector + pseudoSelector;
}
}
rule = selector + " { " + _this4.styleToString(style, atom.meta) + " }";
if (breakpoint) rule = _this4.makeResponsiveStyle(breakpoint, rule);
rules.push(rule);
};
for (var _iterator7 = _createForOfIteratorHelperLoose(this.atoms), _step7; !(_step7 = _iterator7()).done;) {
var _ret = _loop();
if (_ret === "continue") continue;
} // console.log('this.atoms---', this.atoms)
return rules;
};
_proto.getParsedProps = function getParsedProps() {
var props = this.props,
atoms = this.atoms;
if (isEmptyObj(props)) return {};
var entries = Object.entries(props);
/** ignore atomic prop */
var parsedProps = entries.reduce(function (result, _ref6) {
var key = _ref6[0],
value = _ref6[1];
// ignore prop with postfix
if (/.*--(\d+)?[a-z]+$/i.test(key)) return result;
var find = atoms.find(function (atom) {
return [atom.propKey, atom.key, 'css'].includes(key);
});
if (!find) result[key] = value;
return result;
}, {});
return parsedProps;
};
_proto.insertRules = function insertRules() {
var rules = this.toRules();
styleSheet.insertStyles(rules);
};
_createClass(Parser, [{
key: "uniqueClassName",
get: function get() {
return objectToClassName(Object.keys(this.props));
}
}, {
key: "hasResponsive",
get: function get() {
return this.atoms.some(function (i) {
return !!i.meta.breakpoint;
});
}
}, {
key: "config",
get: function get() {
return store.config;
}
}, {
key: "plugins",
get: function get() {
return store.config.plugins;
}
}]);
return Parser;
}();
/**
* convert atomic props to classNames
* @param args
* @returns classNames
*/
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (!args.length) return '';
var parser = new Parser(argsToProps(args));
parser.insertRules();
return parser.getClassNames().join(' ');
}
function createStyle() {

@@ -79,3 +1346,3 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

}, '');
var animationName = name || 'keyframes-' + hash(JSON.stringify(input));
var animationName = name || 'keyframes-' + hash$1(JSON.stringify(input));
var rule = "\n @keyframes " + animationName + " {\n " + content + "\n }\n ";

@@ -144,3 +1411,3 @@ styleSheet.insertStyles([rule]);

export { addAtom, composeAtom, createStyle, css, getConfig, getMode, getTheme, injectGlobalStyle, keyframes, setConfig, setMode, setTheme };
export { Atom, Parser, Store, addAtom, composeAtom, createStyle, css, digitReg, getConfig, getMode, getTheme, injectGlobalStyle, keyframes, setConfig, setMode, setTheme, store, styleSheet };
//# sourceMappingURL=core.esm.js.map

3

dist/createStyle.d.ts

@@ -1,3 +0,4 @@

import { AtomicProps, FowerCSSProperties, PostfixAtomicProps } from '@fower/types';
import { FowerCSSProperties, PostfixAtomicProps } from './typings';
import { AtomicProps } from '@fower/atomic-props';
import { CSSProperties } from 'react';
export declare function createStyle(...args: (keyof Omit<AtomicProps, keyof PostfixAtomicProps> | ({} & string) | FowerCSSProperties)[]): CSSProperties;

2

dist/css.d.ts

@@ -1,2 +0,2 @@

import { CSSArgs } from '@fower/types';
import { CSSArgs } from './typings';
/**

@@ -3,0 +3,0 @@ * convert atomic props to classNames

11

dist/index.d.ts

@@ -5,5 +5,10 @@ export * from './css';

export * from './injectGlobalStyle';
declare const setConfig: (config: import("@fower/store/dist/types").PartialConfig, strategy?: "replace" | "merge" | "deepmerge" | undefined) => void, getConfig: () => import("@fower/types").Configuration, setTheme: (partialThemeConfig: import("@fower/store/dist/types").PartialThemeConfig) => void, getTheme: () => import("@fower/types").Theme, setMode: (mode: import("@fower/types").ModeType) => void, getMode: () => string, addAtom: (matcher: string | RegExp, handleAtomOrStyleObject: ((atom: import("@fower/atom").Atom, parser: import("@fower/parser").Parser) => import("@fower/atom").Atom) | (import("@fower/types").FowerCSSProperties & import("@fower/types").PseudosObject) | {
[x: string]: string | number | boolean | import("@fower/types").FowerCSSProperties | (import("@fower/types").FowerCSSProperties & import("@fower/types").PseudosObject) | any | undefined;
} | undefined) => import("@fower/types").FowerPlugin, composeAtom: (atomName: string, cssObject: import("@fower/types").CSSObject<any>) => void;
export { Parser } from './parser';
export * from './atom';
export * from './store';
export * from './sheet';
export * from './typings';
declare const setConfig: (config: import("./store").PartialConfig, strategy?: "replace" | "merge" | "deepmerge") => void, getConfig: () => import("./typings").Configuration, setTheme: (partialThemeConfig: import("./store").PartialThemeConfig) => void, getTheme: () => import("./typings").Theme, setMode: (mode: import("./typings").ModeType) => void, getMode: () => string, addAtom: (matcher: string | RegExp, handleAtomOrStyleObject: ((atom: import("./atom").Atom, parser: import("./parser").Parser) => import("./atom").Atom) | (import("./typings").FowerCSSProperties & import("./typings").PseudosObject) | {
[x: string]: string | number | boolean | import("./typings").FowerCSSProperties | (import("./typings").FowerCSSProperties & import("./typings").PseudosObject) | any | undefined;
} | undefined) => import("./typings").FowerPlugin, composeAtom: (atomName: string, cssObject: import("./typings").CSSObject<any>) => void;
export { setConfig, getConfig, setTheme, getTheme, setMode, getMode, addAtom, composeAtom };

17

package.json
{
"name": "@fower/core",
"version": "1.36.0",
"version": "1.37.0",
"license": "MIT",

@@ -16,2 +16,3 @@ "main": "dist/index.js",

"files": [
"types",
"dist"

@@ -25,11 +26,9 @@ ],

"dependencies": {
"@fower/atom": "^1.36.0",
"@fower/css-object-processor": "^1.36.0",
"@fower/parser": "^1.36.0",
"@fower/sheet": "^1.36.0",
"@fower/store": "^1.36.0",
"@fower/types": "^1.36.0",
"@fower/utils": "^1.36.0"
"@fower/atomic-props": "^1.37.0",
"@fower/css-object-processor": "^1.37.0",
"@fower/utils": "^1.37.0",
"deepmerge": "^4.2.2",
"string-hash": "^1.1.3"
},
"gitHead": "e278b5c6007016eda5ee60a806801f71f0f1078a"
"gitHead": "12be7e461de029d625c87d5866082f0f9ceaa225"
}
dist/core.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/core.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/core.esm.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc