Handling css as "string" to react as "object" conversion

[Vadorequest]

I was looking for a lib to convert a string to react object.

I used this lib to do so, I believe the following function could be a good addition to the current library. Feel free to add it!

import isPlainObject from 'lodash.isplainobject';
import map from 'lodash.map';
import { getPropertyName } from 'css-to-react-native';

/**
 * Takes a standard css string and returns an object of {"key": "value"} that is react-compatible
 * Relies on https://github.com/styled-components/css-to-react-native#api to resolve the property name (getPropertyName)
 *
 * @example getPropertyName('border-width'); // => 'borderWidth'
 *
 * If the given "css" param is an object, it will be returned untouched
 * Any unexpected type/value will return an empty object
 *
 * @param css
 * @return {{}|*}
 */
export const cssToReactStyle = (css) => {
  // If object is given, return object (could be react style object mistakenly provided)
  if (isPlainObject(css)) {
    return css;
  }

  // If falsy, then probably empty string or null, nothing to be done there
  if (!css) {
    return {};
  }

  // Only accepts strings
  if (typeof css !== 'string') {
    // TODO sentry
    console.error(`Unexpected type "${typeof css}" when expecting string, with value "${css}"`);
    return {};
  }

  const style = {};
  const rules = css.split(';');
  map(rules, (rule) => {
    let [key, value] = rule.split(':');

    if (key && value) {
      key = key.trim();
      value = value.trim();

      style[getPropertyName(key)] = value;
    }
  });

  return style;
};

[jacobp100]

Yeah, you just need to Object.assign the result of this library to style. Should work then

[Vadorequest]

Honestly, an example of that in the readme would just save people's time. I didn't quite understand how to use your main function from the examples.

[jacobp100]

Sorry, ignore my previous answer - it's not the best way to be doing things

The real answer is you want a CSS parser, because your code doesn't handle things like semi-colons appearing in comments or strings. There's no example like you posted in the readme for this reason

But if you're happy with that edge case, you were almost there with your code. This library accepts an array of [key, value] arrays - like [['color', 'red'], ['font-size', '16px']]. So in your map function, just return these tuples, then pass the whole thing into this library

const rules = css.split(';');
const tuples = map(rules, (rule) => {
  let [key, value] = rule.split(':');

  if (key && value) {
    key = key.trim();
    value = value.trim();
    return [key, value];
  } else {
    return null;
  }
}).filter((x) => {
  return x != null;
});

cssToReactNative(tuples);

[jacobp100]

Closing, but feel free to continue the discussion if you want