@onesy/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("@onesy/utils/try"));
const OnesyStyle_1 = __importDefault(require("./OnesyStyle"));
const OnesyStyleSheetManager_1 = __importDefault(require("./OnesyStyleSheetManager"));
const OnesyTheme_1 = __importDefault(require("./OnesyTheme"));
const utils_1 = require("./utils");
const optionsDefault = {
onesy_style: {
get: OnesyStyle_1.default.first.bind(OnesyStyle_1.default),
},
onesy_theme: {
get: OnesyTheme_1.default.first.bind(OnesyTheme_1.default),
},
response: 'css',
response_json_property_version: 'cammel'
};
function inline(value_, props, options_ = {}) {
const options = Object.assign(Object.assign({}, optionsDefault), options_);
// Onesy style
let onesyStyle = options.onesy_style.value || ((0, utils_1.is)('function', options.onesy_style.get) && options.onesy_style.get(options.element));
if (onesyStyle === undefined)
onesyStyle = new OnesyStyle_1.default();
// Onesy theme
const onesyTheme = options.onesy_theme.value || ((0, utils_1.is)('function', options.onesy_theme.get) && options.onesy_theme.get(options.element));
// Make value if it's a function
const value = (0, utils_1.is)('function', value_) ? (0, try_1.default)(() => value_(onesyTheme)) : value_;
// Go through all properties
// make an OnesyStyleRuleProperty 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.isOnesySubscription)(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.isOnesySubscription)(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.isOnesySubscription)(valueProp))
valueNew[prop] = (0, try_1.default)(() => valueProp.value);
});
// Make an instance of onesyStyleSheetManager
const onesyStyleSheetManager = new OnesyStyleSheetManager_1.default({ a: valueNew }, {
mode: 'regular',
pure: false,
priority: 'upper',
onesyTheme,
onesyStyle,
onesy_style_cache: false,
style: {
attributes: {
method: 'inline'
}
}
});
const rules = onesyStyleSheetManager.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;