Add mdx-loader

README.md

@@ -279,6 +279,20 @@ scope: import * as scope from 'rebass'
 </Box>
 ```
 
+### MDX Format
+
+x0 includes support for [MDX][mdx] format files.
+
+```mdx
+import { Box } from 'rebass'
+
+# Hello MDX
+
+<Box p={4} bg='tomato'>
+  Beep Boop
+</Box>
+```
+
 ### webpack
 
 Webpack configuration files named `webpack.config.js` will automatically be merged with the built-in configuration, using [webpack-merge][webpack-merge].
@@ -300,6 +314,7 @@ See the [example](examples/webpack-config).
 #### Related
 
 - [Compositor JSX][jsx-loader]
+- [MDX][mdx]
 - [React Router][react-router]
 - [Mini HTML Webpack Plugin][mini-html]
 - [Styled Components][sc]
@@ -316,6 +331,7 @@ See the [example](examples/webpack-config).
 [MIT License](LICENSE.md)
 
 [jsx-loader]: https://github.com/c8r/jsx-loader
+[mdx]: https://github.com/mdx-js/mdx
 [nextjs]: https://github.com/zeit/next.js
 [react-router]: https://github.com/ReactTraining/react-router
 [mini-html]: https://github.com/styleguidist/mini-html-webpack-plugin

docs/index.js

@@ -13,6 +13,9 @@ export default class extends React.Component {
           <li>
             <Link to='/hello'>Hello JSX</Link>
           </li>
+          <li>
+            <Link to='/mdx'>MDX</Link>
+          </li>
         </ul>
         <video
           style={{

docs/mdx.mdx

@@ -0,0 +1,10 @@
+import { Box, Heading } from 'rebass'
+
+# Hello MDX
+
+<Box px={3} py={4} bg='tomato'>
+  <Heading
+    fontSize={[ 4, 5, 6, 7 ]}>
+    Hello
+  </Heading>
+</Box>

lib/config.js

@@ -30,6 +30,18 @@ const rules = [
     test: /\.jsx$/,
     loader: require.resolve('@compositor/jsx-loader'),
     options: {}
+  },
+  {
+    test: /\.mdx$/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: babel
+      },
+      {
+        loader: require.resolve('@mdx-js/loader')
+      }
+    ]
   }
 ]
 

package.json

@@ -19,6 +19,8 @@
   "dependencies": {
     "@compositor/jsx-loader": "^1.0.0-2",
     "@compositor/log": "^1.0.0-0",
+    "@mdx-js/loader": "^0.9.0",
+    "@mdx-js/mdx": "^0.9.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-macros": "^2.2.1",
@@ -55,9 +57,10 @@
     "isomorphic-fetch": "^2.2.1",
     "nano-style": "^1.0.0",
     "nyc": "^11.8.0",
+    "rebass": "^2.0.0-2",
     "refunk": "^2.2.4",
     "styled-components": "^3.2.6",
-    "styled-system": "^1.1.7"
+    "styled-system": "^2.2.5"
   },
   "x0": {
     "title": "Compositor x0",