Merge pull request #11 from Jackardios/fix-issue-5

fix: at-rule is not converted if base rule is not defined

Author: Jackardios

src/TailwindConverter.ts

@@ -23,13 +23,13 @@ import {
 import {
   convertDeclarationValue,
   prepareArbitraryValue,
-  TAILWIND_DECLARATION_CONVERTERS,
-} from './constants/converters';
+  DECLARATION_CONVERTERS_MAPPING,
+} from './mappings/declaration-converters-mapping';
 import { isChildNode } from './utils/isChildNode';
-import { MEDIA_PARAMS_MAPPING } from './constants/media-params-mapping';
+import { MEDIA_PARAMS_MAPPING } from './mappings/media-params-mapping';
 import { removeUnnecessarySpaces } from './utils/removeUnnecessarySpaces';
 import { reduceTailwindClasses } from './utils/reduceTailwindClasses';
-import { PSEUDOS_MAPPING } from './constants/pseudos-mapping';
+import { PSEUDOS_MAPPING } from './mappings/pseudos-mapping';
 import { detectIndent } from './utils/detectIndent';
 import { resolveConfig, ResolvedTailwindConfig } from './utils/resolveConfig';
 
@@ -91,12 +91,14 @@ export class TailwindConverter {
 
     const nodes = nodesManager.getNodes();
     nodes.forEach(node => {
-      node.rule.prepend(
-        new AtRule({
-          name: 'apply',
-          params: node.tailwindClasses.join(' '),
-        })
-      );
+      if (node.tailwindClasses.length) {
+        node.rule.prepend(
+          new AtRule({
+            name: 'apply',
+            params: node.tailwindClasses.join(' '),
+          })
+        );
+      }
     });
 
     this.cleanRaws(parsed.root);
@@ -158,7 +160,7 @@ export class TailwindConverter {
 
   protected convertDeclarationToClasses(declaration: Declaration) {
     let classes =
-      TAILWIND_DECLARATION_CONVERTERS[declaration.prop]?.(
+      DECLARATION_CONVERTERS_MAPPING[declaration.prop]?.(
         declaration,
         this.config
       ) || [];
@@ -178,24 +180,29 @@ export class TailwindConverter {
   ): TailwindNode {
     let { baseSelector, classPrefix } = this.parseSelector(rule.selector);
 
-    const containerClassPrefix = this.convertContainerToClassPrefix(
+    const classPrefixByParentNodes = this.convertContainerToClassPrefix(
       rule.parent
     );
 
-    if (containerClassPrefix) {
+    if (classPrefixByParentNodes) {
       return {
         key: baseSelector,
-        fallbackRule: rule,
-        classesPrefixWhenFound: containerClassPrefix + classPrefix,
+        rootRuleSelector: baseSelector,
+        originalRule: rule,
+        classesPrefix: classPrefixByParentNodes + classPrefix,
         tailwindClasses,
       };
     }
 
     if (classPrefix) {
+      const key = TailwindNodesManager.convertRuleToKey(rule, baseSelector);
+      const isRootRule = key === baseSelector;
+
       return {
-        key: TailwindNodesManager.convertRuleToKey(rule, baseSelector),
-        fallbackRule: rule,
-        classesPrefixWhenFound: classPrefix,
+        key: key,
+        rootRuleSelector: isRootRule ? baseSelector : null,
+        originalRule: rule,
+        classesPrefix: classPrefix,
         tailwindClasses,
       };
     }

src/TailwindNodesManager.ts

@@ -1,4 +1,4 @@
-import type { AtRule, Rule } from 'postcss';
+import { type AtRule, type Node, Rule, ChildNode } from 'postcss';
 import { isAtRuleNode } from './utils/isAtRuleNode';
 import { isChildNode } from './utils/isChildNode';
 
@@ -9,8 +9,9 @@ export interface ResolvedTailwindNode {
 
 export interface UnresolvedTailwindNode {
   key: string;
-  fallbackRule: Rule;
-  classesPrefixWhenFound: string;
+  rootRuleSelector?: string | null;
+  originalRule: Rule;
+  classesPrefix: string;
   tailwindClasses: string[];
 }
 
@@ -40,33 +41,48 @@ export class TailwindNodesManager {
 
   mergeNode(node: TailwindNode) {
     const nodeIsResolved = isResolvedTailwindNode(node);
-    const key = nodeIsResolved
+    const nodeKey = nodeIsResolved
       ? TailwindNodesManager.convertRuleToKey(node.rule)
       : node.key;
-    const foundNode = this.nodesMap.get(key);
+    const foundNode = this.nodesMap.get(nodeKey);
+
+    if (foundNode) {
+      foundNode.tailwindClasses = foundNode.tailwindClasses.concat(
+        nodeIsResolved
+          ? node.tailwindClasses
+          : node.tailwindClasses.map(
+              className => `${node.classesPrefix}${className}`
+            )
+      );
 
-    if (!foundNode) {
-      if (nodeIsResolved) {
-        this.nodesMap.set(key, node);
-      } else {
-        this.nodesMap.set(
-          TailwindNodesManager.convertRuleToKey(node.fallbackRule),
-          {
-            rule: node.fallbackRule,
-            tailwindClasses: node.tailwindClasses,
-          }
-        );
-      }
       return;
     }
 
-    foundNode.tailwindClasses = foundNode.tailwindClasses.concat(
-      nodeIsResolved
-        ? node.tailwindClasses
-        : node.tailwindClasses.map(
-            className => `${node.classesPrefixWhenFound}${className}`
-          )
-    );
+    if (nodeIsResolved) {
+      this.nodesMap.set(nodeKey, node);
+    } else {
+      let rule;
+
+      if (node.rootRuleSelector) {
+        rule = new Rule({
+          selector: node.rootRuleSelector,
+        });
+
+        const rootChild = this.upToRootChild(node.originalRule);
+        if (rootChild) {
+          node.originalRule.root().insertBefore(rootChild, rule);
+        }
+      } else {
+        rule = node.originalRule;
+      }
+
+      this.nodesMap.set(nodeKey, {
+        rule,
+        tailwindClasses: node.tailwindClasses.map(
+          className => `${node.classesPrefix}${className}`
+        ),
+      });
+    }
   }
 
   mergeNodes(nodes: TailwindNode[]) {
@@ -87,6 +103,21 @@ export class TailwindNodesManager {
     return Array.from(this.nodesMap.values());
   }
 
+  protected upToRootChild(node: Node) {
+    let childNode: ChildNode | null = null;
+
+    while (
+      node.parent &&
+      node.parent.type !== 'root' &&
+      isChildNode(node.parent)
+    ) {
+      childNode = node = node.parent;
+      continue;
+    }
+
+    return childNode;
+  }
+
   static convertRuleToKey(
     rule: Rule,
     overriddenSelector: string | null = null

src/constants/converters.ts …ppings/declaration-converters-mapping.tssrc/constants/converters.ts renamed to src/mappings/declaration-converters-mapping.ts src/constants/converters.ts renamed to src/mappings/declaration-converters-mapping.ts

@@ -203,14 +203,16 @@ export function convertComposedSpacingDeclarationValue(
   return classes;
 }
 
-interface TailwindDeclarationConverters {
-  [property: string]: (
-    declaration: Declaration,
-    config: ResolvedTailwindConverterConfig
-  ) => string[];
+type DeclarationConverter = (
+  declaration: Declaration,
+  config: ResolvedTailwindConverterConfig
+) => string[];
+
+interface DeclarationConvertersMapping {
+  [property: string]: DeclarationConverter;
 }
 
-export const TAILWIND_DECLARATION_CONVERTERS: TailwindDeclarationConverters = {
+export const DECLARATION_CONVERTERS_MAPPING: DeclarationConvertersMapping = {
   'accent-color': (declaration, config) =>
     config.tailwindConfig.corePlugins.accentColor
       ? convertColorDeclarationValue(