fix(gatsby-plugin-mdx): Replaces to-style with style-to-object (#16062)

Author: pedrolamas

packages/gatsby-plugin-mdx/package.json

@@ -25,6 +25,7 @@
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "@babel/types": "^7.5.5",
+    "camelcase-css": "^2.0.1",
     "change-case": "^3.1.0",
     "core-js": "2",
     "dataloader": "^1.4.0",
@@ -46,7 +47,7 @@
     "retext-english": "^3.0.2",
     "slash": "^2.0.0",
     "static-site-generator-webpack-plugin": "^3.4.2",
-    "to-style": "^1.3.3",
+    "style-to-object": "^0.2.3",
     "underscore.string": "^3.3.4",
     "unified": "^8.3.2",
     "unist-util-map": "^1.0.4",

packages/gatsby-plugin-mdx/utils/babel-plugin-html-attr-to-jsx-attr.js

@@ -1,5 +1,6 @@
 const { camelCase } = require("change-case");
-const toStyleObject = require("to-style").object;
+const styleToObject = require('style-to-object');
+const camelCaseCSS = require('camelcase-css');
 const t = require("@babel/types");
 
 // object retrieved from https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/possibleStandardNames.js
@@ -490,19 +491,6 @@ var TRANSLATIONS = {
   zoomandpan: "zoomAndPan",
 }
 
-const valueFromType = value => {
-  switch (typeof value) {
-    case "string":
-      return t.stringLiteral(value);
-    case "number":
-      return t.numericLiteral(value);
-    case "boolean":
-      return t.booleanLiteral(value);
-    default:
-      throw new Error("gatsby-plugin-mdx needs to include a new type");
-  }
-};
-
 const propsKeysVisitor = {
   ObjectProperty(node) {
     if (node.node.key.extra.rawValue in TRANSLATIONS) {
@@ -529,14 +517,14 @@ var jsxAttributeFromHTMLAttributeVisitor = {
       node.node.value.type === "StringLiteral"
       //      node.node.value.type !== "JSXExpressionContainer"
     ) {
-      const styleObject = toStyleObject(node.node.value.extra.rawValue, {
-        camelize: true
-      });
-      //      node.node.value.value = `{${JSON.stringify(styleObject)}}`;
+      let styleArray = []
+      styleToObject(node.node.value.extra.rawValue, function(name, value, declaration) {
+        styleArray.push([camelCaseCSS(name), value])
+      })
       node.node.value = t.jSXExpressionContainer(
         t.objectExpression(
-          Object.entries(styleObject).map(([key, value]) =>
-            t.objectProperty(t.StringLiteral(key), valueFromType(value))
+          styleArray.map(([key, value]) =>
+            t.objectProperty(t.StringLiteral(key), t.stringLiteral(value))
           )
         )
       );

yarn.lock

@@ -5680,6 +5680,11 @@ [email protected], camel-case@^3.0.0:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -11291,6 +11296,11 @@ ink@^2.3.0:
     wrap-ansi "^5.0.0"
     yoga-layout-prebuilt "^1.9.3"
 
+[email protected]:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
 inline-style-prefixer@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz#d390957d26f281255fe101da863158ac6eb60911"
@@ -19558,6 +19568,13 @@ style-to-object@^0.2.1:
   dependencies:
     css "2.2.4"
 
+style-to-object@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.3.tgz#afcf42bc03846b1e311880c55632a26ad2780bcb"
+  integrity sha512-1d/k4EY2N7jVLOqf2j04dTc37TPOv/hHxZmvpg8Pdh8UYydxeu/C1W1U4vD8alzf5V2Gt7rLsmkr4dxAlDm9ng==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 stylehacks@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.0.tgz#64b323951c4a24e5fc7b2ec06c137bf32d155e8a"