@wix/zero-config-implementation 1.22.0 → 1.24.0

package/dist/information-extractors/css/sass-adapter.d.ts

@@ -0,0 +1,2 @@
+import { Result } from 'neverthrow';
+export declare function compileSass(filePath: string): Result<string, Error>;

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.22.0",
+  "version": "1.24.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -35,8 +35,14 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "sass": "^1.71.1",
     "typescript": "^5.0.0"
   },
+  "peerDependenciesMeta": {
+    "sass": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@wix/zero-config-schema": "1.1.0",
     "lightningcss": "^1.31.1"
@@ -53,6 +59,7 @@
     "neverthrow": "^8.2.0",
     "parse5": "^7.1.2",
     "react-docgen-typescript": "^2.4.0",
+    "sass": "^1.98.0",
     "tsconfck": "^3.1.6",
     "typedoc": "^0.28.16",
     "typedoc-plugin-markdown": "^4.9.0",
@@ -76,5 +83,5 @@
       ]
     }
   },
-  "falconPackageHash": "96e638a26c56c097934553199ad6afa8864eeed45a42d5b9246f0f31"
+  "falconPackageHash": "79d9ab055f999610e162c914b9c616eed125490c1816f8b91e2dac53"
 }

package/src/information-extractors/css/sass-adapter.ts

@@ -0,0 +1,40 @@
+import { existsSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join } from 'node:path'
+import { Result, err } from 'neverthrow'
+
+function collectNodeModulesPaths(filePath: string): string[] {
+  const paths: string[] = []
+  let dir = dirname(filePath)
+  while (true) {
+    const candidate = join(dir, 'node_modules')
+    if (existsSync(candidate)) paths.push(candidate)
+    const parent = dirname(dir)
+    if (parent === dir) break
+    dir = parent
+  }
+  return paths
+}
+
+const require = createRequire(import.meta.url)
+
+export function compileSass(filePath: string): Result<string, Error> {
+  let sass: typeof import('sass')
+  try {
+    sass = require('sass')
+  } catch {
+    return err(
+      new Error(
+        `Cannot process Sass file "${filePath}": the "sass" package is not installed. Install it with: npm install sass  (or yarn add sass)`,
+      ),
+    )
+  }
+  const loadPaths = collectNodeModulesPaths(filePath)
+  return Result.fromThrowable(
+    () =>
+      sass.compile(filePath, {
+        loadPaths,
+      }).css,
+    (thrown) => (thrown instanceof Error ? thrown : new Error(String(thrown))),
+  )()
+}

package/src/information-extractors/ts/css-imports.ts

@@ -16,7 +16,7 @@ export function extractCssImports(program: Program): string[] {
       if (!ts.isImportDeclaration(node) || !ts.isStringLiteral(node.moduleSpecifier)) return
       const importPath = node.moduleSpecifier.text
 
-      if (importPath.endsWith('.css')) {
+      if (importPath.endsWith('.css') || importPath.endsWith('.scss') || importPath.endsWith('.sass')) {
         const fullPath = path.resolve(path.dirname(sourceFile.fileName), importPath)
         cssFiles.add(fullPath)
         return

package/src/manifest-pipeline.ts

@@ -15,6 +15,7 @@ import type { CoupledComponentInfo, CoupledProp, DOMBinding, TrackingStores } fr
 
 import { matchCssSelectors, parseCss } from './information-extractors/css'
 import type { CSSParserAPI } from './information-extractors/css'
+import { compileSass } from './information-extractors/css/sass-adapter'
 
 import type { ComponentType } from 'react'
 
@@ -336,8 +337,23 @@ function extractCssInfo(
 
   for (const cssPath of cssImportPaths) {
     try {
-      // Read CSS file
-      const cssContent = fs.readFileSync(cssPath, 'utf-8')
+      // Read and compile CSS file
+      let cssContent: string
+      if (cssPath.endsWith('.scss') || cssPath.endsWith('.sass')) {
+        const compiledCssResult = compileSass(cssPath)
+        if (compiledCssResult.isErr()) {
+          warnings.push({
+            componentName,
+            phase: 'css',
+            error: `Failed to parse ${cssPath}: ${compiledCssResult.error.message}`,
+            stack: compiledCssResult.error.stack,
+          })
+          continue
+        }
+        cssContent = compiledCssResult.value
+      } else {
+        cssContent = fs.readFileSync(cssPath, 'utf-8')
+      }
 
       // Parse CSS
       const api = parseCss(cssContent)