refactor CSS/HTML ignore handling

packages/rspack/lib/config.js

@@ -33,9 +33,9 @@ const { ensureModuleFilesExist, getBuildFilePath } = require('./build-context');
 const { RSPACK_BUILD_CONTEXT, FILE_ROLE } = require('./constants');
 
 /**
- * Checks if exact entries exist in the .meteorignore file
- * @param {string[]} entries - Array of exact entries to check for
- * @returns {Object} Object with keys corresponding to each entry and values as booleans
+ * Checks if entries exist in .meteorignore file
+ * @param {string[]} entries - Entries to check
+ * @returns {Object} Results with entry keys and boolean values
  */
 function checkMeteorIgnoreExactEntries(entries) {
   const meteorIgnorePath = path.join(getMeteorAppDir(), '.meteorignore');
@@ -190,30 +190,55 @@ export function configureMeteorForRspack() {
     extraFoldersToIgnore = [];
   }
 
-  // Skip immediate html and css children from intial entrypoint contexts
+  // Skip CSS/HTML files in entrypoint contexts
   extraFilesToIgnore = [
     ...extraFilesToIgnore,
     ...initialEntrypointContexts.flatMap(entrypoint => {
-      // Create exact entries to check for
-      const cssEntry = `${entrypoint}/*.css`;
-      const htmlEntry = `${entrypoint}/*.html`;
+      const cssPattern = `${entrypoint}/*.css`;
+      const htmlPattern = `${entrypoint}/*.html`;
 
-      // Check all entries at once
-      const entryResults = checkMeteorIgnoreExactEntries([cssEntry, htmlEntry]);
-      const hasMatchingCssEntry = entryResults[cssEntry];
-      const hasMatchingHtmlEntry = entryResults[htmlEntry];
+      const cssFiles = glob.sync(cssPattern);
+      const htmlFiles = glob.sync(htmlPattern);
+
+      const entriesToCheck = [
+        cssPattern,
+        htmlPattern,
+        ...cssFiles,
+        ...htmlFiles
+      ];
+
+      const entryResults = checkMeteorIgnoreExactEntries(entriesToCheck);
+      const hasMatchingCssPattern = entryResults[cssPattern];
+      const hasMatchingHtmlPattern = entryResults[htmlPattern];
+      const hasAnyCssFileInMeteorIgnore = cssFiles.some(file => entryResults[file]);
+      const hasAnyHtmlFileInMeteorIgnore = htmlFiles.some(file => entryResults[file]);
 
-      // Prepare the result array
       const result = [];
 
-      // Only add the HTML ignore pattern if there's no matching HTML entry in .meteorignore
-      if (!hasMatchingHtmlEntry) {
-        result.push(`!${htmlEntry}`);
+      // Handle HTML files
+      if (hasAnyHtmlFileInMeteorIgnore) {
+        // Add individual HTML files that are not in meteorignore
+        htmlFiles.forEach(file => {
+          if (!entryResults[file]) {
+            result.push(`!${file}`);
+          }
+        });
+      } else if (!hasMatchingHtmlPattern) {
+        // Skip HTML pattern if not in meteorignore
+        result.push(`!${htmlPattern}`);
       }
 
-      // Only add the CSS ignore pattern if there's no matching CSS entry in .meteorignore
-      if (!hasMatchingCssEntry) {
-        result.push(`!${cssEntry}`);
+      // Handle CSS files
+      if (hasAnyCssFileInMeteorIgnore) {
+        // Add individual CSS files that are not in meteorignore
+        cssFiles.forEach(file => {
+          if (!entryResults[file]) {
+            result.push(`!${file}`);
+          }
+        });
+      } else if (!hasMatchingCssPattern) {
+        // Skip CSS pattern if not in meteorignore
+        result.push(`!${cssPattern}`);
       }
 
       return result;

tools/modern-tests/apps/vue/.meteorignore

@@ -0,0 +1,2 @@
+# Ignore client/main.css file so that is processed by Rspack import
+client/main.css

tools/modern-tests/apps/vue/client/main.css

@@ -0,0 +1,3 @@
+body {
+    padding: 10px;
+}

tools/modern-tests/apps/vue/client/main.js

@@ -1 +1,2 @@
-import '../imports/ui/main'
+import './main.css';
+import '../imports/ui/main';

tools/modern-tests/apps/vue/client/meteor.css

@@ -0,0 +1,3 @@
+body {
+    font-family: sans-serif;
+}

tools/modern-tests/apps/vue/imports/ui/main.css

@@ -1,6 +1 @@
 @import "tailwindcss";
-
-body {
-    padding: 10px;
-    font-family: sans-serif;
-}

tools/modern-tests/skeleton.test.js

@@ -89,13 +89,13 @@ describe('Meteor Skeletons /', () => {
       test: 'tests/main.ts',
     },
     customAssertions: {
-      afterRun: async ({ port }) => {
+      afterRun: async () => {
         // Verify Tailwind styles for ".bg-gray-100" element
         await assertStyles('.bg-gray-100', {
           ['background-color']: 'oklch(0.967 0.003 264.542)',
         });
       },
-      afterRunProduction: async ({ port }) => {
+      afterRunProduction: async () => {
         // Verify Tailwind styles for ".bg-gray-100" element
         await assertStyles('.bg-gray-100', {
           ['background-color']: 'lab(96.1596 -0.0823438 -1.13575)',

tools/modern-tests/vue.test.js

@@ -2,6 +2,7 @@ import {
   waitForMeteorOutput,
 } from "./helpers";
 import { testMeteorRspackBundler } from './test-helpers';
+import { assertStyles } from "./assertions";
 
 describe('Vue App Bundling /', () => {
   describe('Meteor+Rspack Bundler /', testMeteorRspackBundler({
@@ -13,10 +14,22 @@ describe('Vue App Bundling /', () => {
       test: 'tests/main.js'
     },
     customAssertions: {
+      afterRun: async () => {
+        // Verify Tailwind styles for ".p-8" element
+        await assertStyles('.p-8', {
+          ['padding']: '32px',
+        });
+      },
       afterRunRebuildClient: async ({ allConsoleLogs }) => {
         // Check for HMR output as enabled by default
         await waitForMeteorOutput(allConsoleLogs, /.*HMR.*Updated modules:.*/);
       },
+      afterRunProduction: async () => {
+        // Verify Tailwind styles for ".p-8" element
+        await assertStyles('.p-8', {
+          ['padding']: '32px',
+        });
+      },
       afterRunProductionRebuildClient: async ({ allConsoleLogs }) => {
         // Check for HMR to not be enabled in production-like mode
         await waitForMeteorOutput(allConsoleLogs, /.*HMR.*Updated modules:*/, { negate: true });

tools/static-assets/skel-tailwind/.meteorignore

@@ -1,2 +1,2 @@
 # Ignore Meteor CSS handling; let Rspack resolve Tailwind styles
-client/*.css
+client/main.css