Merge pull request #2 from Jackardios/dev

v1.0.0
Jackardios · Feb 1, 2023 · 62c2ec9 · 62c2ec9
2 parents 2993468 + 591dbc5
commit 62c2ec9
Show file tree

Hide file tree

Showing 8 changed files with 1,885 additions and 1,346 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@
 
 ## Features:
 
-- supports all (or almost all) the features currently available in TailwindCSS
+- supports almost all the features (except custom plugins) currently available in TailwindCSS
 - the ability to set your own TailwindCSS configuration
 - colors are matched regardless of the format used
 - rem is converted to px (it is possible to configure the rem size)
@@ -211,11 +211,12 @@ Console output
 
 ### TailwindConverter(options?)
 
-| Option         | Type               | Default | Description                                                             |
-| -------------- | ------------------ | ------- | ----------------------------------------------------------------------- |
-| remInPx        | `number` \| `null` | `null`  | `rem` in `px` unit. Set null if you don't want to convert rem to pixels |
-| tailwindConfig | `Config`           | {}      | Set your tailwind config here                                           |
-| postCSSPlugins | `AcceptedPlugin[]` | []      | Array of acceptable postcss plugins                                     |
+| Option                       | Type               | Default | Description                                                                              |
+| ---------------------------- | ------------------ | ------- | ---------------------------------------------------------------------------------------- |
+| remInPx                      | `number` \| `null` | `null`  | `rem` in `px` unit. Set null if you don't want to convert rem to pixels                  |
+| arbitraryPropertiesIsEnabled | `boolean`          | `false` | defines whether non-convertible properties should be converted as "arbitrary properties" |
+| tailwindConfig               | `Config`           | {}      | Set your tailwind config here                                                            |
+| postCSSPlugins               | `AcceptedPlugin[]` | []      | Array of acceptable postcss plugins                                                      |
 
 [build-img]: https://github.com/jackardios/css-to-tailwindcss/actions/workflows/release.yml/badge.svg
 [build-url]: https://github.com/jackardios/css-to-tailwindcss/actions/workflows/release.yml

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "css-to-tailwindcss",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "CSS to TailwindCSS converter",
   "main": "./lib/index.js",
   "files": [

diff --git a/src/TailwindConverter.ts b/src/TailwindConverter.ts
@@ -12,7 +12,6 @@ import postcss, {
   Document,
 } from 'postcss';
 import postcssSafeParser from 'postcss-safe-parser';
-import resolveConfig from 'tailwindcss/resolveConfig';
 import { parse, stringify, isTraversal } from 'css-what';
 
 import { TailwindNode, TailwindNodesManager } from './TailwindNodesManager';
@@ -23,6 +22,7 @@ import {
 } from './utils/converterMappingByTailwindTheme';
 import {
   convertDeclarationValue,
+  prepareArbitraryValue,
   TAILWIND_DECLARATION_CONVERTERS,
 } from './constants/converters';
 import { isChildNode } from './utils/isChildNode';
@@ -31,15 +31,18 @@ import { removeUnnecessarySpaces } from './utils/removeUnnecessarySpaces';
 import { reduceTailwindClasses } from './utils/reduceTailwindClasses';
 import { PSEUDOS_MAPPING } from './constants/pseudos-mapping';
 import { detectIndent } from './utils/detectIndent';
+import { resolveConfig, ResolvedTailwindConfig } from './utils/resolveConfig';
 
 export interface TailwindConverterConfig {
   remInPx?: number | null;
-  tailwindConfig: Config;
+  tailwindConfig?: Config;
   postCSSPlugins: AcceptedPlugin[];
+  arbitraryPropertiesIsEnabled: boolean;
 }
 
 export interface ResolvedTailwindConverterConfig
   extends TailwindConverterConfig {
+  tailwindConfig: ResolvedTailwindConfig;
   mapping: ConverterMapping;
 }
 
@@ -48,6 +51,7 @@ export const DEFAULT_CONVERTER_CONFIG: Omit<
   'tailwindConfig'
 > = {
   postCSSPlugins: [],
+  arbitraryPropertiesIsEnabled: false,
 };
 
 export class TailwindConverter {
@@ -58,7 +62,7 @@ export class TailwindConverter {
     ...converterConfig
   }: Partial<TailwindConverterConfig> = {}) {
     const resolvedTailwindConfig = resolveConfig(
-      tailwindConfig || ({} as Config)
+      tailwindConfig || ({ content: [] } as Config)
     );
 
     this.config = {
@@ -146,12 +150,23 @@ export class TailwindConverter {
   }
 
   protected convertDeclarationToClasses(declaration: Declaration) {
-    return (
+    let classes =
       TAILWIND_DECLARATION_CONVERTERS[declaration.prop]?.(
         declaration,
         this.config
-      ) || []
-    );
+      ) || [];
+
+    if (classes.length === 0 && this.config.arbitraryPropertiesIsEnabled) {
+      classes = [
+        `[${declaration.prop}:${prepareArbitraryValue(declaration.value)}]`,
+      ];
+    }
+
+    return this.config.tailwindConfig.prefix
+      ? classes.map(
+          className => `${this.config.tailwindConfig.prefix}${className}`
+        )
+      : classes;
   }
 
   protected makeTailwindNode(
@@ -222,7 +237,7 @@ export class TailwindConverter {
     if (selector.type === 'pseudo' || selector.type === 'pseudo-element') {
       const mapped = (PSEUDOS_MAPPING as any)[selector.name];
 
-      return mapped ? `${mapped}:` : null;
+      return mapped ? `${mapped}${this.config.tailwindConfig.separator}` : null;
     }
 
     if (selector.type === 'attribute') {
@@ -234,7 +249,7 @@ export class TailwindConverter {
           return null;
         }
 
-        return `${mapped}:`;
+        return `${mapped}${this.config.tailwindConfig.separator}`;
       }
 
       if (selector.name.startsWith('data-')) {
@@ -245,7 +260,7 @@ export class TailwindConverter {
           return null;
         }
 
-        return `${mapped}:`;
+        return `${mapped}${this.config.tailwindConfig.separator}`;
       }
     }
 
@@ -345,9 +360,11 @@ export class TailwindConverter {
       modifiers.push(mappedScreen);
     }
 
-    const classPrefix = modifiers.join(':');
+    const classPrefix = modifiers.join(this.config.tailwindConfig.separator);
 
-    return classPrefix ? classPrefix + ':' : '';
+    return classPrefix
+      ? classPrefix + this.config.tailwindConfig.separator
+      : '';
   }
 
   protected convertSupportsParamsToClassPrefix(supportParams: string[]) {
@@ -360,6 +377,8 @@ export class TailwindConverter {
       'supports'
     );
 
-    return classPrefix ? classPrefix + ':' : '';
+    return classPrefix
+      ? classPrefix + this.config.tailwindConfig.separator
+      : '';
   }
 }