Update "CSS to Tailwind" page (#355)

* update `css-to-tailwindcss` package

* add `arbitraryPropertiesIsEnabled` configuration

* update `css-to-tailwindcss` package

* add note about using classes instead of `@apply` directive

* update `css-to-tailwindcss` package

* update `css-to-tailwindcss` package

---------

Co-authored-by: Ritesh Kumar <[email protected]>

Author: Jackardios

package.json

@@ -54,7 +54,7 @@
     "babel-plugin-object-styles-to-template": "^0.2.2",
     "babel-standalone": "^6.26.0",
     "clipboard-copy": "^4.0.1",
-    "css-to-tailwindcss": "^0.2.5",
+    "css-to-tailwindcss": "^1.0.4",
     "evergreen-ui": "^4.28.0",
     "flowgen": "^1.14.1",
     "formik": "^2.2.9",

pages/css-to-tailwind.tsx

@@ -11,7 +11,8 @@ import {
   toaster,
   TextInput,
   Heading,
-  Text
+  Text,
+  Switch
 } from "evergreen-ui";
 import { TailwindConverter, TailwindConverterConfig } from "css-to-tailwindcss";
 
@@ -25,13 +26,23 @@ const Monaco = dynamic(() => import("../components/Monaco"), {
 interface RawSettings {
   tailwindConfig?: string;
   remInPx?: string | null;
+  arbitraryPropertiesIsEnabled?: boolean;
 }
 
 const evalConfig = (configValue: string) =>
   eval(`const module = {}; ${configValue}; module.exports;`);
 
 const DEFAULT_POSTCSS_PLUGINS = [require("postcss-nested")];
 
+function decorateResult(result: string) {
+  return `/*
+  Based on TailwindCSS recommendations,
+  consider using classes instead of the \`@apply\` directive
+  @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
+*/
+${result}`;
+}
+
 function CssToTailwindSettings({
   open,
   toggle,
@@ -43,11 +54,16 @@ function CssToTailwindSettings({
   onConfirm: (props: {
     tailwindConfig: string;
     remInPx: string;
+    arbitraryPropertiesIsEnabled: boolean;
   }) => boolean | Promise<boolean>;
   settings: RawSettings;
 }) {
   const [tailwindConfig, setTailwindConfig] = useState(settings.tailwindConfig);
   const [remInPx, setRemInPx] = useState(settings.remInPx);
+  const [
+    arbitraryPropertiesIsEnabled,
+    setArbitraryPropertiesIsEnabled
+  ] = useState(settings.arbitraryPropertiesIsEnabled || false);
 
   return (
     <Dialog
@@ -57,7 +73,8 @@ function CssToTailwindSettings({
       onConfirm={async close => {
         const isSuccess = await onConfirm({
           tailwindConfig,
-          remInPx
+          remInPx,
+          arbitraryPropertiesIsEnabled
         });
         if (isSuccess) {
           close();
@@ -78,16 +95,38 @@ function CssToTailwindSettings({
           placeholder="Enter URL"
           onChange={e => setRemInPx(e.target.value)}
           value={remInPx || ""}
+          marginTop="4px"
+        />
+
+        <Heading marginTop={24}>
+          Enable arbitrary properties
+          <a
+            href="https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties"
+            target="_blank"
+            style={{ verticalAlign: "middle" }}
+          >
+            <Tooltip content="Open the TailwindCSS docs...">
+              <Icon icon="help" color="info" marginLeft={8} size={16} />
+            </Tooltip>
+          </a>
+        </Heading>
+        <Switch
+          checked={arbitraryPropertiesIsEnabled}
+          onChange={e =>
+            setArbitraryPropertiesIsEnabled((e.target as any).checked)
+          }
+          marginTop="4px"
         />
-        <Heading marginTop={30}>
+
+        <Heading marginTop={24}>
           Tailwind configuration
           <a
             href="https://tailwindcss.com/docs/configuration"
             target="_blank"
             style={{ verticalAlign: "middle" }}
           >
             <Tooltip content="Open the TailwindCSS docs...">
-              <Icon icon="help" color="info" marginLeft={16} size={16} />
+              <Icon icon="help" color="info" marginLeft={8} size={16} />
             </Tooltip>
           </a>
         </Heading>
@@ -124,7 +163,8 @@ export default function CssToTailwind3({ defaultSettings }) {
 
   const converterConfig = useMemo(() => {
     const config: Partial<TailwindConverterConfig> = {
-      remInPx: rawSettings.remInPx ? parseInt(rawSettings.remInPx, 10) : null
+      remInPx: rawSettings.remInPx ? parseInt(rawSettings.remInPx, 10) : null,
+      arbitraryPropertiesIsEnabled: !!rawSettings.arbitraryPropertiesIsEnabled
     };
 
     if (isNaN(config["remInPx"])) {
@@ -150,18 +190,29 @@ export default function CssToTailwind3({ defaultSettings }) {
   }, [rawSettings]);
 
   const tailwindConverter = useMemo(() => {
-    return new TailwindConverter({
-      postCSSPlugins: DEFAULT_POSTCSS_PLUGINS,
-      ...converterConfig
-    });
+    try {
+      return new TailwindConverter({
+        postCSSPlugins: DEFAULT_POSTCSS_PLUGINS,
+        ...converterConfig
+      });
+    } catch (e) {
+      toaster.danger(
+        "Unable to create TailwindConverter. Invalid configuration passed",
+        {
+          description: e.message
+        }
+      );
+
+      return new TailwindConverter({ postCSSPlugins: DEFAULT_POSTCSS_PLUGINS });
+    }
   }, [converterConfig]);
 
   const transformer = useCallback<Transformer>(
     async ({ value }) => {
       try {
-        return (
-          await tailwindConverter.convertCSS(value)
-        ).convertedRoot.toString();
+        return decorateResult(
+          (await tailwindConverter.convertCSS(value)).convertedRoot.toString()
+        );
       } catch (e) {
         toaster.danger("Unable to convert CSS", {
           description: e.message
@@ -215,7 +266,8 @@ export async function getStaticProps() {
     props: {
       defaultSettings: {
         tailwindConfig: rawTailwindConfig,
-        remInPx: "16"
+        remInPx: "16",
+        arbitraryPropertiesIsEnabled: false
       } as RawSettings
     }
   };

yarn.lock

@@ -3431,10 +3431,10 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
-css-to-tailwindcss@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/css-to-tailwindcss/-/css-to-tailwindcss-0.2.5.tgz#eeaf61bfec563a6ed5c09cb6eb122a80fa13f699"
-  integrity sha512-XpaDq1hwehqrDqCA2Y2jtYoigNUnzskhJdxUk5WTtR/bDiy6z4vMQX30mDO+l9OVqw9IYjMWjQocdx9Wc3bZ8w==
+css-to-tailwindcss@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/css-to-tailwindcss/-/css-to-tailwindcss-1.0.4.tgz#81a06ae8e0544054bcba491b6a346705e256d547"
+  integrity sha512-u08nj9nDinKQT5PnoINjno2QqowWBhI+UY65wwccS51BYN1TyIJpO3ft7mV/9GUPnjFsJ0Rnd6zYtsji5zDyoA==
   dependencies:
     colord "^2.9.3"
     css-what "^6.1.0"