Repository URL to install this package:
|
Version:
1.1.21 ▾
|
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.transform = exports.fromStyleStringToObj = transform;
exports.default = void 0;
var _css = _interopRequireDefault(require("./css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* @file
* @see https://reactjs.org/docs/dom-elements.html
* @author https://github.com/raphamorim/native-css
* @author https://github.com/staxmanade/CssToReact/blob/gh-pages/src/transform.js
*/
function transformRules(context, rules, result) {
/**
* @todo split up
*/
// eslint-disable-next-line
const handleRule = rule => {
const obj = {};
const handleDeclaration = declaration => {
if (declaration.type === 'declaration') {
const cleanProperty = cleanPropertyName(declaration.property);
obj[cleanProperty] = declaration.value;
}
};
const handleSelector = selector => {
const trimmed = selector.trim();
const name = nameGenerator(trimmed);
result[name] = obj;
};
switch (rule.type) {
case 'media':
{
const name = mediaNameGenerator(rule.media);
const media = result[name] = result[name] || {
'__expression__': rule.media
};
transformRules(context, rule.rules, media);
break;
}
case 'rule':
{
rule.declarations.forEach(handleDeclaration);
rule.selectors.forEach(handleSelector);
break;
}
default:
break;
}
};
rules.forEach(handleRule);
}
/**
* @param {String} name
* @return {String}
*/
function cleanPropertyName(name) {
// turn things like 'align-items' into 'alignItems'
return name.replace(/(-.)/g, replacee => replacee[1].toUpperCase());
}
function mediaNameGenerator(name) {
return '@media ' + name;
}
/**
* @todo split media queries
* @param {String} nameOriginal
* @return {String}
*/
function nameGenerator(nameOriginal) {
let name = nameOriginal; // multispaces into 1
name = name.replace(/\s\s+/g, ' '); // this turns stuff like .eh:hover =>.eh_hover -- react does not have this as lifecycle inline
// @todo so likely it should re-parse this into a nested selector, and we can use something with better support in interim if needed
// or we can use a getter, which checks props simply
name = name.replace(/[^a-zA-Z0-9]/g, '_'); // @todo - first it replaces multiple at the start, then multiple anywhere?!
name = name.replace(/^_+/g, '');
name = name.replace(/_+$/g, '');
return name;
} // eslint-disable-next-line
function transform(raw) {
// if (isString(inputCssText) === false && inputCssText.styles === undefined) {
// throw new Error('missing css text to transform')
// }
/**
* @description call toString
* @type {String}
*/
let styleString = `${raw}`; // If the input "css" doesn't wrap it with a css class (raw styles)
// we need to wrap it with a style so the css parser doesn't choke.
let namespacedStyles = false; // .startsWith?
if (raw.indexOf('{') === -1) {
namespacedStyles = true;
styleString = `.namespacedStyles { ${styleString} }`;
}
const css = _css.default.parse(styleString);
let result = {};
transformRules(this, css.stylesheet.rules, result); // Don't expose the implementation detail of our wrapped css class.
if (namespacedStyles === true) {
result = result.namespacedStyles;
}
return result;
}
if (typeof window === 'object') {
window.fromStyleStringToObj = transform;
}
var _default = transform;
exports.default = _default;