@amaui/style
Version:
CSS in JS styling solution
89 lines (88 loc) • 4.19 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const try_1 = __importDefault(require("@amaui/utils/try"));
const AmauiStyle_1 = __importDefault(require("./AmauiStyle"));
const AmauiStyleSheetManager_1 = __importDefault(require("./AmauiStyleSheetManager"));
const AmauiTheme_1 = __importDefault(require("./AmauiTheme"));
const utils_1 = require("./utils");
const optionsDefault = {
amaui_style: {
get: AmauiStyle_1.default.first.bind(AmauiStyle_1.default),
},
amaui_theme: {
get: AmauiTheme_1.default.first.bind(AmauiTheme_1.default),
},
response: 'css',
response_json_property_version: 'cammel'
};
function inline(value_, props, options_ = {}) {
const options = Object.assign(Object.assign({}, optionsDefault), options_);
// Amaui style
let amauiStyle = options.amaui_style.value || ((0, utils_1.is)('function', options.amaui_style.get) && options.amaui_style.get(options.element));
if (amauiStyle === undefined)
amauiStyle = new AmauiStyle_1.default();
// Amaui theme
const amauiTheme = options.amaui_theme.value || ((0, utils_1.is)('function', options.amaui_theme.get) && options.amaui_theme.get(options.element));
// Make value if it's a function
const value = (0, utils_1.is)('function', value_) ? (0, try_1.default)(() => value_(amauiTheme)) : value_;
// Go through all properties
// make an AmauiStyleRuleProperty for each prop
// and then make css string from each one
let response = '';
if ((0, utils_1.is)('object', value)) {
const properties = Object.keys(value);
const valueNew = {};
// Filter out at-rule and dynamic properies
properties
.filter(prop => (prop.indexOf('@') !== 0) &&
!((0, utils_1.is)('function', value[prop]) || (0, utils_1.isAmauiSubscription)(value[prop])))
.forEach(prop => valueNew[prop] = value[prop]);
// Parse dynamic properties into static
const propertiesDynamic = properties.filter(prop => (prop.indexOf('@') !== 0) &&
((0, utils_1.is)('function', value[prop]) || (0, utils_1.isAmauiSubscription)(value[prop])));
propertiesDynamic.forEach(prop => {
const valueProp = value[prop];
if ((0, utils_1.is)('function', valueProp))
valueNew[prop] = (0, try_1.default)(() => valueProp(props));
else if ((0, utils_1.isAmauiSubscription)(valueProp))
valueNew[prop] = (0, try_1.default)(() => valueProp.value);
});
// Make an instance of amauiStyleSheetManager
const amauiStyleSheetManager = new AmauiStyleSheetManager_1.default({ a: valueNew }, {
mode: 'regular',
pure: false,
priority: 'upper',
amauiTheme,
amauiStyle,
amaui_style_cache: false,
style: {
attributes: {
method: 'inline'
}
}
});
const rules = amauiStyleSheetManager.sheets.static[0].rules[0].value.rules;
rules.map((rule) => rule.value).forEach((rule) => response += ` ${rule.css}`);
// Make into json
if (options.response === 'json') {
const values = response.split(';').filter(Boolean);
response = {};
values.forEach(item => {
let [property, value__] = item.split(':').filter(Boolean);
property = property === null || property === void 0 ? void 0 : property.trim();
value__ = value__ === null || value__ === void 0 ? void 0 : value__.trim();
if (property && value__) {
response[options.response_json_property_version === 'cammel' ? (0, utils_1.kebabCasetoCammelCase)(property) : (0, utils_1.cammelCaseToKebabCase)(property)] = value__;
}
});
}
}
if (options.response === 'css')
response = response.trim();
// Response
return response;
}
exports.default = inline;