Custom config and variants support in css-to-tailwind

README.md

@@ -60,6 +60,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

components/ConversionPanel.tsx

@@ -102,6 +102,7 @@ const ConversionPanel: React.FunctionComponent<ConversionPanelProps> = function(
         setResult(prettyResult);
         setMessage("");
       } catch (e) {
+        console.error(e);
         setMessage(e.message);
       }
       toggleUpdateSpinner(false);

components/Monaco.tsx

@@ -8,6 +8,12 @@ languages.typescript.typescriptDefaults.setDiagnosticsOptions({
   noSyntaxValidation: true
 });
 
+languages.css.cssDefaults.setDiagnosticsOptions({
+  lint: {
+    unknownAtRules: "ignore"
+  } as any
+});
+
 // @ts-ignore
 self.MonacoEnvironment = {
   getWorkerUrl: function(_moduleId, label) {
@@ -165,7 +171,7 @@ export default React.memo(
   ({
     innerRef,
     ...props
-  }: MonacoProps & { innerRef: React.RefObject<MonacoEditor> }) => (
+  }: MonacoProps & { innerRef?: React.RefObject<MonacoEditor> }) => (
     <MonacoEditor {...props} ref={innerRef} />
   )
 );

components/NoSSR.tsx

@@ -0,0 +1,8 @@
+import dynamic from "next/dynamic";
+import React from "react";
+
+const NoSSR = props => <React.Fragment>{props.children}</React.Fragment>;
+
+export default dynamic(() => Promise.resolve(NoSSR), {
+  ssr: false
+});

constants/data.ts

@@ -45,7 +45,7 @@ export const css2 = `.alert {
   position: relative;
   padding: 1.6rem 4.6rem;
   margin-bottom: 1.6rem;
-  border: 1px solid #9ae6b4;
+  border: 1px solid #c53030;
   color: #fff;
   border-radius: 0.2rem;
   width: 100%;
@@ -58,58 +58,58 @@ export const css2 = `.alert {
   justify-content: center;
 }
 
-.separator {
-  background: unset;
+.button {
+  background: #81e6d9;
+  padding: 1.6rem 4.6rem;
+  letter-spacing: 0.03rem;
+  border-radius: 0.2rem;
 }
 
-.container {
-  background: #ffffff;
-  border: 1px solid #fff5f5;
-  border-radius: 0.2rem;
+.button:hover {
+  background: #2c7a7b;
 }
 
-.header {
-  font-weight: 400;
-  font-size: 2rem;
-  letter-spacing: 0.03rem;
-  padding: 2.4rem;
-  border-bottom: 1px solid #fff5f5;
+@media (min-width: 640px) {
+  .button {
+    padding: 0.5rem 1rem;
+    width: 100%;
+  } 
 }
 
-.footer {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row-reverse;
-  padding: 2.4rem 3rem;
-  border-top: 1px solid #fff5f5;
+@media (min-width: 1280px) {
+  .button {
+    padding: 3rem 7rem;
+    margin-bottom: 2.4rem;
+  } 
 }
 
-.content--with-side-content {
-  width: 50%;
+.username {
+  color: #718096;
+  border-color: #bee3f8;
 }
 
-.content--with-separator {
-  border-right: 1px solid #fff5f5;
+.username:focus {
+  border-color: #3182ce;
 }
 
-.content-inner {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  margin: 0;
-  padding: 3rem;
+.username::placeholder {
+  color: #cbd5e0;
 }
 
-.side-content {
-  width: 50%;
-  background: #425634;
-  padding: 3rem;
+@media (min-width: 1280px) {
+  .username {
+    width: 50%;
+  } 
+}
+
+.footer {
+  width: 100%;
   display: flex;
-  justify-content: center;
-  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row-reverse;
+  padding: 2.4rem 3rem;
+  border-top: 1px solid #fff5f5;
 }
 `;
 

package.json

@@ -42,11 +42,12 @@
     "@svgr/plugin-jsx": "^5.4.0",
     "@types/jsonld": "^1.5.1",
     "@walmartlabs/json-to-simple-graphql-schema": "^2.0.3",
+    "autoprefixer": "^9.8.6",
     "babel-plugin-json-to-proptypes": "^0.1.0",
     "babel-plugin-object-styles-to-template": "^0.2.2",
     "babel-standalone": "^6.26.0",
     "clipboard-copy": "^3.1.0",
-    "css-to-tailwind": "^0.1.3",
+    "css-to-tailwind": "^1.0.3",
     "evergreen-ui": "^4.28.0",
     "flowgen": "^1.11.0",
     "formik": "^2.1.4",
@@ -81,6 +82,7 @@
     "stringify-object": "^3.3.0",
     "svg-to-dataurl": "^1.0.0",
     "svgo": "^1.3.2",
+    "tailwindcss": "^1.7.3",
     "tempy": "^0.6.0",
     "text-encoding-utf-8": "^1.0.2",
     "transform-json-types": "^0.7.0",

pages/api/build-tailwind-css.ts

@@ -0,0 +1,12 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import tailwindCss from "@utils/tailwindcss";
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const { tailwindConfig, postCssInput } = JSON.parse(req.body);
+    const css = await tailwindCss(tailwindConfig, postCssInput);
+    res.status(200).send(css);
+  } catch (e) {
+    res.status(500).send(e.message);
+  }
+};