From e33354f2f4bfe0a11ca9d710aba6294933ae3c61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nacho=20Codo=C3=B1er?= Date: Wed, 17 Sep 2025 16:27:34 +0200 Subject: [PATCH] refactor CSS/HTML ignore handling --- packages/rspack/lib/config.js | 61 +++++++++++++------ tools/modern-tests/apps/vue/.meteorignore | 2 + tools/modern-tests/apps/vue/client/main.css | 3 + tools/modern-tests/apps/vue/client/main.js | 3 +- tools/modern-tests/apps/vue/client/meteor.css | 3 + .../modern-tests/apps/vue/imports/ui/main.css | 5 -- tools/modern-tests/skeleton.test.js | 4 +- tools/modern-tests/vue.test.js | 13 ++++ .../static-assets/skel-tailwind/.meteorignore | 2 +- 9 files changed, 69 insertions(+), 27 deletions(-) create mode 100644 tools/modern-tests/apps/vue/.meteorignore create mode 100644 tools/modern-tests/apps/vue/client/main.css create mode 100644 tools/modern-tests/apps/vue/client/meteor.css diff --git a/packages/rspack/lib/config.js b/packages/rspack/lib/config.js index 18a8291436..6d65da243c 100644 --- a/packages/rspack/lib/config.js +++ b/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; diff --git a/tools/modern-tests/apps/vue/.meteorignore b/tools/modern-tests/apps/vue/.meteorignore new file mode 100644 index 0000000000..21d63e9485 --- /dev/null +++ b/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 diff --git a/tools/modern-tests/apps/vue/client/main.css b/tools/modern-tests/apps/vue/client/main.css new file mode 100644 index 0000000000..d61a8dd67c --- /dev/null +++ b/tools/modern-tests/apps/vue/client/main.css @@ -0,0 +1,3 @@ +body { + padding: 10px; +} diff --git a/tools/modern-tests/apps/vue/client/main.js b/tools/modern-tests/apps/vue/client/main.js index 403d8a2d2a..64512a8d55 100644 --- a/tools/modern-tests/apps/vue/client/main.js +++ b/tools/modern-tests/apps/vue/client/main.js @@ -1 +1,2 @@ -import '../imports/ui/main' \ No newline at end of file +import './main.css'; +import '../imports/ui/main'; diff --git a/tools/modern-tests/apps/vue/client/meteor.css b/tools/modern-tests/apps/vue/client/meteor.css new file mode 100644 index 0000000000..853ac29a7c --- /dev/null +++ b/tools/modern-tests/apps/vue/client/meteor.css @@ -0,0 +1,3 @@ +body { + font-family: sans-serif; +} diff --git a/tools/modern-tests/apps/vue/imports/ui/main.css b/tools/modern-tests/apps/vue/imports/ui/main.css index 6ea2603dca..f1d8c73cdc 100644 --- a/tools/modern-tests/apps/vue/imports/ui/main.css +++ b/tools/modern-tests/apps/vue/imports/ui/main.css @@ -1,6 +1 @@ @import "tailwindcss"; - -body { - padding: 10px; - font-family: sans-serif; -} diff --git a/tools/modern-tests/skeleton.test.js b/tools/modern-tests/skeleton.test.js index 50591cda79..9a9c95d025 100644 --- a/tools/modern-tests/skeleton.test.js +++ b/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)', diff --git a/tools/modern-tests/vue.test.js b/tools/modern-tests/vue.test.js index 82eec04a0c..db298b2b14 100644 --- a/tools/modern-tests/vue.test.js +++ b/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 }); diff --git a/tools/static-assets/skel-tailwind/.meteorignore b/tools/static-assets/skel-tailwind/.meteorignore index 34d517a99e..4568c54a7d 100644 --- a/tools/static-assets/skel-tailwind/.meteorignore +++ b/tools/static-assets/skel-tailwind/.meteorignore @@ -1,2 +1,2 @@ # Ignore Meteor CSS handling; let Rspack resolve Tailwind styles -client/*.css +client/main.css