build(postcss): fix composes plugin folder check (#2421)

Author: Barsnes

apps/storybook/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import '@digdir/designsystemet-css/index.css';
+import '../../../packages/css/index.css';
 import '@digdir/designsystemet-theme/digdir.css';
 
 import { withThemeByDataAttribute } from '@storybook/addon-themes';

apps/storybook/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": [".", "./.storybook/**/*"]
+  "include": [".", "./.storybook/**/*", "../../packages/css/postcss.config.js"]
 }

packages/css/postcss.config.js

@@ -1,5 +1,6 @@
 const postcss = require('postcss');
 const fs = require('node:fs');
+const path = require('node:path');
 
 module.exports = {
   plugins: [
@@ -17,21 +18,28 @@ function postcssComposes() {
   return {
     postcssPlugin: '@composes', // Allows `@composes classname from './file.css'` directive
     AtRule: {
-      composes: async (rule) => {
+      composes: async (rule, { AtRule }) => {
         const cache = {};
         const sanitizedParams = rule.params.replace(/["']/g, '').trim();
         const [selector, from] = sanitizedParams.split(/\s+from\s+/);
+        const resolvedFrom = path.resolve(
+          path.dirname(rule.source.input.file),
+          from,
+        );
 
-        if (!cache[from])
-          cache[from] = await postcss([]).process(fs.readFileSync(from), {
-            from,
-          });
+        if (!cache[resolvedFrom])
+          cache[resolvedFrom] = await postcss([]).process(
+            fs.readFileSync(resolvedFrom),
+            {
+              from: resolvedFrom,
+            },
+          );
 
-        cache[from].root.walkRules((from) => {
-          if (from.selector.startsWith(`.${selector}`))
+        cache[resolvedFrom].root.walkRules((fromRule) => {
+          if (fromRule.selector.startsWith(`.${selector}`))
             rule.replaceWith(
-              from.clone({
-                selector: from.selector.replace(`.${selector}`, '&'),
+              fromRule.clone({
+                selector: fromRule.selector.replace(`.${selector}`, '&'),
               }),
             );
         });