diff --git a/packages/next-swc/crates/next-core/src/next_shared/webpack_rules/sass.rs b/packages/next-swc/crates/next-core/src/next_shared/webpack_rules/sass.rs index 2cb1b5dcb2511..998743da69eef 100644 --- a/packages/next-swc/crates/next-core/src/next_shared/webpack_rules/sass.rs +++ b/packages/next-swc/crates/next-core/src/next_shared/webpack_rules/sass.rs @@ -38,6 +38,7 @@ pub async fn maybe_add_sass_loader( loader: "next/dist/compiled/sass-loader".into(), options: take( serde_json::json!({ + "implementation": sass_options.get("implementation"), "sourceMap": true, "sassOptions": sass_options, "additionalData": additional_data diff --git a/packages/next/package.json b/packages/next/package.json index f362f4b5c4c54..0b89c6c3d058a 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -292,7 +292,7 @@ "react-is": "19.0.0-canary-94eed63c49-20240425", "react-refresh": "0.12.0", "regenerator-runtime": "0.13.4", - "sass-loader": "12.4.0", + "sass-loader": "12.6.0", "schema-utils2": "npm:schema-utils@2.7.1", "schema-utils3": "npm:schema-utils@3.0.0", "semver": "7.3.2", diff --git a/packages/next/src/build/webpack/config/blocks/css/index.ts b/packages/next/src/build/webpack/config/blocks/css/index.ts index 56c7631f5c1cd..198c35cbf0021 100644 --- a/packages/next/src/build/webpack/config/blocks/css/index.ts +++ b/packages/next/src/build/webpack/config/blocks/css/index.ts @@ -150,6 +150,7 @@ export const css = curry(async function css( const { prependData: sassPrependData, additionalData: sassAdditionalData, + implementation: sassImplementation, ...sassOptions } = ctx.sassOptions @@ -167,6 +168,7 @@ export const css = curry(async function css( { loader: require.resolve('next/dist/compiled/sass-loader'), options: { + implementation: sassImplementation, // Source maps are required so that `resolve-url-loader` can locate // files original to their source directory. sourceMap: true, diff --git a/packages/next/src/compiled/sass-loader/cjs.js b/packages/next/src/compiled/sass-loader/cjs.js index dbad228f72798..86140caadc9b9 100644 --- a/packages/next/src/compiled/sass-loader/cjs.js +++ b/packages/next/src/compiled/sass-loader/cjs.js @@ -1 +1 @@ -(function(){var __webpack_modules__={12:function(e,t){function set(e,t,s){if(typeof s.value==="object")s.value=klona(s.value);if(!s.enumerable||s.get||s.set||!s.configurable||!s.writable||t==="__proto__"){Object.defineProperty(e,t,s)}else e[t]=s.value}function klona(e){if(typeof e!=="object")return e;var t=0,s,r,n,o=Object.prototype.toString.call(e);if(o==="[object Object]"){n=Object.create(e.__proto__||null)}else if(o==="[object Array]"){n=Array(e.length)}else if(o==="[object Set]"){n=new Set;e.forEach((function(e){n.add(klona(e))}))}else if(o==="[object Map]"){n=new Map;e.forEach((function(e,t){n.set(klona(t),klona(e))}))}else if(o==="[object Date]"){n=new Date(+e)}else if(o==="[object RegExp]"){n=new RegExp(e.source,e.flags)}else if(o==="[object DataView]"){n=new e.constructor(klona(e.buffer))}else if(o==="[object ArrayBuffer]"){n=e.slice(0)}else if(o.slice(-6)==="Array]"){n=new e.constructor(e)}if(n){for(r=Object.getOwnPropertySymbols(e);t{if(e){if(e.file){this.addDependency(r.default.normalize(e.file))}s(new a.default(e));return}let n=t.map?JSON.parse(t.map):null;if(n&&c){n=(0,o.normalizeSourceMap)(n,this.rootContext)}t.stats.includedFiles.forEach((e=>{const t=r.default.normalize(e);if(r.default.isAbsolute(t)){this.addDependency(t)}}));s(null,t.css.toString(),n)}))}var i=loader;t["default"]=i},633:function(__unused_webpack_module,exports,__nccwpck_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.getRenderFunctionFromSassImplementation=getRenderFunctionFromSassImplementation;exports.getSassImplementation=getSassImplementation;exports.getSassOptions=getSassOptions;exports.getWebpackImporter=getWebpackImporter;exports.getWebpackResolver=getWebpackResolver;exports.isSupportedFibers=isSupportedFibers;exports.normalizeSourceMap=normalizeSourceMap;var _url=_interopRequireDefault(__nccwpck_require__(310));var _path=_interopRequireDefault(__nccwpck_require__(17));var _full=__nccwpck_require__(12);var _neoAsync=_interopRequireDefault(__nccwpck_require__(175));var _SassWarning=_interopRequireDefault(__nccwpck_require__(611));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getDefaultSassImplementation(){let sassImplPkg="sass";try{eval("require").resolve("sass")}catch(error){try{eval("require").resolve("node-sass");sassImplPkg="node-sass"}catch(e){sassImplPkg="sass"}}return __nccwpck_require__(438)}function getSassImplementation(e,t){let s=t;if(!s){try{s=getDefaultSassImplementation()}catch(t){e.emitError(t);return}}if(typeof s==="string"){try{s=require(s)}catch(t){e.emitError(t);return}}const{info:r}=s;if(!r){e.emitError(new Error("Unknown Sass implementation."));return}const n=r.split("\t");if(n.length<2){e.emitError(new Error(`Unknown Sass implementation "${r}".`));return}const[o]=n;if(o==="dart-sass"){return s}else if(o==="node-sass"){return s}e.emitError(new Error(`Unknown Sass implementation "${o}".`))}function isProductionLikeMode(e){return e.mode==="production"||!e.mode}function proxyCustomImporters(e,t){return[].concat(e).map((e=>function proxyImporter(...s){const r={...this,webpackLoaderContext:t};return e.apply(r,s)}))}function isSupportedFibers(){const[e]=process.versions.node.split(".");return Number(e)<16}async function getSassOptions(e,t,s,r,n){const o=(0,_full.klona)(t.sassOptions?typeof t.sassOptions==="function"?t.sassOptions(e)||{}:t.sassOptions:{});const a=r.info.includes("dart-sass");if(a&&isSupportedFibers()){const e=!o.fiber&&o.fiber!==false;if(e){let e;try{e=require.resolve("fibers")}catch(e){}if(e){o.fiber=require(e)}}else if(o.fiber===false){delete o.fiber}}else{delete o.fiber}o.file=e.resourcePath;o.data=t.additionalData?typeof t.additionalData==="function"?await t.additionalData(s,e):`${t.additionalData}\n${s}`:s;if(!o.outputStyle&&isProductionLikeMode(e)){o.outputStyle="compressed"}if(n){o.sourceMap=true;o.outFile=_path.default.join(e.rootContext,"style.css.map");o.sourceMapContents=true;o.omitSourceMapUrl=true;o.sourceMapEmbed=false}const{resourcePath:i}=e;const c=_path.default.extname(i);if(c&&c.toLowerCase()===".sass"&&typeof o.indentedSyntax==="undefined"){o.indentedSyntax=true}else{o.indentedSyntax=Boolean(o.indentedSyntax)}o.importer=o.importer?proxyCustomImporters(Array.isArray(o.importer)?o.importer:[o.importer],e):[];o.includePaths=[].concat(process.cwd()).concat((o.includePaths||[]).map((e=>_path.default.isAbsolute(e)?e:_path.default.join(process.cwd(),e)))).concat(process.env.SASS_PATH?process.env.SASS_PATH.split(process.platform==="win32"?";":":"):[]);if(typeof o.charset==="undefined"){o.charset=true}if(!o.logger){const s=t.warnRuleAsWarning===true;const r=e.getLogger("sass-loader");const formatSpan=e=>`${e.url||"-"}:${e.start.line}:${e.start.column}: `;o.logger={debug(e,t){let s="";if(t.span){s=formatSpan(t.span)}s+=e;r.debug(s)},warn(t,n){let o="";if(n.deprecation){o+="Deprecation "}if(n.span&&!n.stack){o=formatSpan(n.span)}o+=t;if(n.stack){o+=`\n\n${n.stack}`}if(s){e.emitWarning(new _SassWarning.default(o,n))}else{r.warn(o)}}}}return o}const MODULE_REQUEST_REGEX=/^[^?]*~/;const IS_MODULE_IMPORT=/^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;function getPossibleRequests(e,t=false,s=false){let r=e;if(t){if(MODULE_REQUEST_REGEX.test(e)){r=r.replace(MODULE_REQUEST_REGEX,"")}if(IS_MODULE_IMPORT.test(e)){r=r[r.length-1]==="/"?r:`${r}/`;return[...new Set([r,e])]}}const n=_path.default.extname(r).toLowerCase();if(n===".css"){return[]}const o=_path.default.dirname(r);const a=o==="."?"":`${o}/`;const i=_path.default.basename(r);const c=_path.default.basename(r,n);return[...new Set([].concat(s?[`${a}_${c}.import${n}`,`${a}${c}.import${n}`]:[]).concat([`${a}_${i}`,`${a}${i}`]).concat(t?[e]:[]))]}function promiseResolve(e){return(t,s)=>new Promise(((r,n)=>{e(t,s,((e,t)=>{if(e){n(e)}else{r(t)}}))}))}const IS_SPECIAL_MODULE_IMPORT=/^~[^/]+$/;const IS_NATIVE_WIN32_PATH=/^[a-z]:[/\\]|^\\\\/i;function getWebpackResolver(e,t,s=[]){async function startResolving(e){if(e.length===0){return Promise.reject()}const[{possibleRequests:t}]=e;if(t.length===0){return Promise.reject()}const[{resolve:s,context:r}]=e;try{return await s(r,t[0])}catch(s){const[,...r]=t;if(r.length===0){const[,...t]=e;return startResolving(t)}e[0].possibleRequests=r;return startResolving(e)}}const r=t.info.includes("dart-sass");const n=promiseResolve(e({alias:[],aliasFields:[],conditionNames:[],descriptionFiles:[],extensions:[".sass",".scss",".css"],exportsFields:[],mainFields:[],mainFiles:["_index","index"],modules:[],restrictions:[/\.((sa|sc|c)ss)$/i],preferRelative:true}));const o=promiseResolve(e({alias:[],aliasFields:[],conditionNames:[],descriptionFiles:[],extensions:[".sass",".scss",".css"],exportsFields:[],mainFields:[],mainFiles:["_index.import","_index","index.import","index"],modules:[],restrictions:[/\.((sa|sc|c)ss)$/i],preferRelative:true}));const a=promiseResolve(e({dependencyType:"sass",conditionNames:["sass","style"],mainFields:["sass","style","main","..."],mainFiles:["_index","index","..."],extensions:[".sass",".scss",".css"],restrictions:[/\.((sa|sc|c)ss)$/i],preferRelative:true}));const i=promiseResolve(e({dependencyType:"sass",conditionNames:["sass","style"],mainFields:["sass","style","main","..."],mainFiles:["_index.import","_index","index.import","index","..."],extensions:[".sass",".scss",".css"],restrictions:[/\.((sa|sc|c)ss)$/i],preferRelative:true}));return(e,t,c)=>{if(!r&&!_path.default.isAbsolute(e)){return Promise.reject()}const l=t;const u=l.slice(0,5).toLowerCase()==="file:";if(u){try{t=_url.default.fileURLToPath(l)}catch(e){t=t.slice(7)}}let p=[];const f=!IS_SPECIAL_MODULE_IMPORT.test(t)&&!u&&!l.startsWith("/")&&!IS_NATIVE_WIN32_PATH.test(l);if(s.length>0&&f){const a=getPossibleRequests(t,false,c);if(!r){p=p.concat({resolve:c?o:n,context:_path.default.dirname(e),possibleRequests:a})}p=p.concat(s.map((e=>({resolve:c?o:n,context:e,possibleRequests:a}))))}const d=getPossibleRequests(t,true,c);p=p.concat({resolve:c?i:a,context:_path.default.dirname(e),possibleRequests:d});return startResolving(p)}}const MATCH_CSS=/\.css$/i;function getWebpackImporter(e,t,s){const r=getWebpackResolver(e.getResolve,t,s);return function importer(t,s,n){const{fromImport:o}=this;r(s,t,o).then((t=>{e.addDependency(_path.default.normalize(t));n({file:t.replace(MATCH_CSS,"")})})).catch((()=>{n({file:t})}))}}let nodeSassJobQueue=null;function getRenderFunctionFromSassImplementation(e){const t=e.info.includes("dart-sass");if(t){return e.render.bind(e)}if(nodeSassJobQueue===null){const t=Number(process.env.UV_THREADPOOL_SIZE||4);nodeSassJobQueue=_neoAsync.default.queue(e.render.bind(e),t-1)}return nodeSassJobQueue.push.bind(nodeSassJobQueue)}const ABSOLUTE_SCHEME=/^[A-Za-z0-9+\-.]+:/;function getURLType(e){if(e[0]==="/"){if(e[1]==="/"){return"scheme-relative"}return"path-absolute"}if(IS_NATIVE_WIN32_PATH.test(e)){return"path-absolute"}return ABSOLUTE_SCHEME.test(e)?"absolute":"path-relative"}function normalizeSourceMap(e,t){const s=e;delete s.file;s.sourceRoot="";s.sources=s.sources.map((e=>{const s=getURLType(e);if(s==="path-relative"){return _path.default.resolve(t,_path.default.normalize(e))}return e}));return s}},175:function(e){"use strict";e.exports=require("next/dist/compiled/neo-async")},17:function(e){"use strict";e.exports=require("path")},438:function(e){"use strict";e.exports=require("sass")},310:function(e){"use strict";e.exports=require("url")},748:function(e){"use strict";e.exports=JSON.parse('{"title":"Sass Loader options","type":"object","properties":{"implementation":{"description":"The implementation of the sass to be used.","link":"https://github.com/webpack-contrib/sass-loader#implementation","anyOf":[{"type":"string"},{"type":"object"}]},"sassOptions":{"description":"Options for `node-sass` or `sass` (`Dart Sass`) implementation.","link":"https://github.com/webpack-contrib/sass-loader#sassoptions","anyOf":[{"type":"object","additionalProperties":true},{"instanceof":"Function"}]},"additionalData":{"description":"Prepends/Appends `Sass`/`SCSS` code before the actual entry file.","link":"https://github.com/webpack-contrib/sass-loader#additionaldata","anyOf":[{"type":"string"},{"instanceof":"Function"}]},"sourceMap":{"description":"Enables/Disables generation of source maps.","link":"https://github.com/webpack-contrib/sass-loader#sourcemap","type":"boolean"},"webpackImporter":{"description":"Enables/Disables default `webpack` importer.","link":"https://github.com/webpack-contrib/sass-loader#webpackimporter","type":"boolean"},"warnRuleAsWarning":{"description":"Treats the \'@warn\' rule as a webpack warning.","link":"https://github.com/webpack-contrib/sass-loader#warnruleaswarning","type":"boolean"}},"additionalProperties":false}')}};var __webpack_module_cache__={};function __nccwpck_require__(e){var t=__webpack_module_cache__[e];if(t!==undefined){return t.exports}var s=__webpack_module_cache__[e]={exports:{}};var r=true;try{__webpack_modules__[e](s,s.exports,__nccwpck_require__);r=false}finally{if(r)delete __webpack_module_cache__[e]}return s.exports}if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var __webpack_exports__=__nccwpck_require__(11);module.exports=__webpack_exports__})(); \ No newline at end of file +(function(){var __webpack_modules__={12:function(e,t){function set(e,t,s){if(typeof s.value==="object")s.value=klona(s.value);if(!s.enumerable||s.get||s.set||!s.configurable||!s.writable||t==="__proto__"){Object.defineProperty(e,t,s)}else e[t]=s.value}function klona(e){if(typeof e!=="object")return e;var t=0,s,r,n,o=Object.prototype.toString.call(e);if(o==="[object Object]"){n=Object.create(e.__proto__||null)}else if(o==="[object Array]"){n=Array(e.length)}else if(o==="[object Set]"){n=new Set;e.forEach((function(e){n.add(klona(e))}))}else if(o==="[object Map]"){n=new Map;e.forEach((function(e,t){n.set(klona(t),klona(e))}))}else if(o==="[object Date]"){n=new Date(+e)}else if(o==="[object RegExp]"){n=new RegExp(e.source,e.flags)}else if(o==="[object DataView]"){n=new e.constructor(klona(e.buffer))}else if(o==="[object ArrayBuffer]"){n=e.slice(0)}else if(o.slice(-6)==="Array]"){n=new e.constructor(e)}if(n){for(r=Object.getOwnPropertySymbols(e);t{const t=r.default.fileURLToPath(e);if(n.default.isAbsolute(t)){this.addDependency(t)}}))}else if(typeof f.stats!=="undefined"&&typeof f.stats.includedFiles!=="undefined"){f.stats.includedFiles.forEach((e=>{const t=n.default.normalize(e);if(n.default.isAbsolute(t)){this.addDependency(t)}}))}s(null,f.css.toString(),_)}var c=loader;t["default"]=c},902:function(__unused_webpack_module,exports,__nccwpck_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.getCompileFn=getCompileFn;exports.getModernWebpackImporter=getModernWebpackImporter;exports.getSassImplementation=getSassImplementation;exports.getSassOptions=getSassOptions;exports.getWebpackImporter=getWebpackImporter;exports.getWebpackResolver=getWebpackResolver;exports.isSupportedFibers=isSupportedFibers;exports.normalizeSourceMap=normalizeSourceMap;var _url=_interopRequireDefault(__nccwpck_require__(310));var _path=_interopRequireDefault(__nccwpck_require__(17));var _full=__nccwpck_require__(12);var _neoAsync=_interopRequireDefault(__nccwpck_require__(175));var _SassWarning=_interopRequireDefault(__nccwpck_require__(288));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getDefaultSassImplementation(){let sassImplPkg="sass";try{eval("require").resolve("sass")}catch(ignoreError){try{eval("require").resolve("node-sass");sassImplPkg="node-sass"}catch(e){try{require.resolve("sass-embedded");sassImplPkg="sass-embedded"}catch(e){sassImplPkg="sass"}}}return __nccwpck_require__(438)}function getSassImplementation(e,t){let s=t;if(!s){try{s=getDefaultSassImplementation()}catch(t){e.emitError(t);return}}if(typeof s==="string"){try{s=require(s)}catch(t){e.emitError(t);return}}const{info:r}=s;if(!r){e.emitError(new Error("Unknown Sass implementation."));return}const n=r.split("\t");if(n.length<2){e.emitError(new Error(`Unknown Sass implementation "${r}".`));return}const[o]=n;if(o==="dart-sass"){return s}else if(o==="node-sass"){return s}else if(o==="sass-embedded"){return s}e.emitError(new Error(`Unknown Sass implementation "${o}".`))}function isProductionLikeMode(e){return e.mode==="production"||!e.mode}function proxyCustomImporters(e,t){return[].concat(e).map((e=>function proxyImporter(...s){const r={...this,webpackLoaderContext:t};return e.apply(r,s)}))}function isSupportedFibers(){const[e]=process.versions.node.split(".");return Number(e)<16}async function getSassOptions(e,t,s,r,n){const o=(0,_full.klona)(t.sassOptions?typeof t.sassOptions==="function"?t.sassOptions(e)||{}:t.sassOptions:{});const i=r.info.includes("dart-sass");const a=t.api==="modern";o.data=t.additionalData?typeof t.additionalData==="function"?await t.additionalData(s,e):`${t.additionalData}\n${s}`:s;if(!o.logger){const s=t.warnRuleAsWarning===true;const r=e.getLogger("sass-loader");const formatSpan=e=>`${e.url||"-"}:${e.start.line}:${e.start.column}: `;o.logger={debug(e,t){let s="";if(t.span){s=formatSpan(t.span)}s+=e;r.debug(s)},warn(t,n){let o="";if(n.deprecation){o+="Deprecation "}if(n.span&&!n.stack){o=formatSpan(n.span)}o+=t;if(n.stack){o+=`\n\n${n.stack}`}if(s){e.emitWarning(new _SassWarning.default(o,n))}else{r.warn(o)}}}}const{resourcePath:c}=e;if(a){o.url=_url.default.pathToFileURL(c);if(!o.style&&isProductionLikeMode(e)){o.style="compressed"}if(n){o.sourceMap=true}if(typeof o.syntax==="undefined"){const e=_path.default.extname(c);if(e&&e.toLowerCase()===".scss"){o.syntax="scss"}else if(e&&e.toLowerCase()===".sass"){o.syntax="indented"}else if(e&&e.toLowerCase()===".css"){o.syntax="css"}}o.importers=o.importers?proxyCustomImporters(Array.isArray(o.importers)?o.importers:[o.importers],e):[]}else{o.file=c;if(i&&isSupportedFibers()){const e=!o.fiber&&o.fiber!==false;if(e){let e;try{e=require.resolve("fibers")}catch(e){}if(e){o.fiber=require(e)}}else if(o.fiber===false){delete o.fiber}}else{delete o.fiber}if(!o.outputStyle&&isProductionLikeMode(e)){o.outputStyle="compressed"}if(n){o.sourceMap=true;o.outFile=_path.default.join(e.rootContext,"style.css.map");o.sourceMapContents=true;o.omitSourceMapUrl=true;o.sourceMapEmbed=false}const t=_path.default.extname(c);if(t&&t.toLowerCase()===".sass"&&typeof o.indentedSyntax==="undefined"){o.indentedSyntax=true}else{o.indentedSyntax=Boolean(o.indentedSyntax)}o.importer=o.importer?proxyCustomImporters(Array.isArray(o.importer)?o.importer:[o.importer],e):[];o.includePaths=[].concat(process.cwd()).concat((o.includePaths||[]).map((e=>_path.default.isAbsolute(e)?e:_path.default.join(process.cwd(),e)))).concat(process.env.SASS_PATH?process.env.SASS_PATH.split(process.platform==="win32"?";":":"):[]);if(typeof o.charset==="undefined"){o.charset=true}}return o}const MODULE_REQUEST_REGEX=/^[^?]*~/;const IS_MODULE_IMPORT=/^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;function getPossibleRequests(e,t=false,s=false){let r=e;if(t){if(MODULE_REQUEST_REGEX.test(e)){r=r.replace(MODULE_REQUEST_REGEX,"")}if(IS_MODULE_IMPORT.test(e)){r=r[r.length-1]==="/"?r:`${r}/`;return[...new Set([r,e])]}}const n=_path.default.extname(r).toLowerCase();if(n===".css"){return[]}const o=_path.default.dirname(r);const i=o==="."?"":`${o}/`;const a=_path.default.basename(r);const c=_path.default.basename(r,n);return[...new Set([].concat(s?[`${i}_${c}.import${n}`,`${i}${c}.import${n}`]:[]).concat([`${i}_${a}`,`${i}${a}`]).concat(t?[e]:[]))]}function promiseResolve(e){return(t,s)=>new Promise(((r,n)=>{e(t,s,((e,t)=>{if(e){n(e)}else{r(t)}}))}))}async function startResolving(e){if(e.length===0){return Promise.reject()}const[{possibleRequests:t}]=e;if(t.length===0){return Promise.reject()}const[{resolve:s,context:r}]=e;try{return await s(r,t[0])}catch(s){const[,...r]=t;if(r.length===0){const[,...t]=e;return startResolving(t)}e[0].possibleRequests=r;return startResolving(e)}}const IS_SPECIAL_MODULE_IMPORT=/^~[^/]+$/;const IS_NATIVE_WIN32_PATH=/^[a-z]:[/\\]|^\\\\/i;function getWebpackResolver(e,t,s=[]){const r=t&&t.info.includes("dart-sass");const n=promiseResolve(e({alias:[],aliasFields:[],conditionNames:[],descriptionFiles:[],extensions:[".sass",".scss",".css"],exportsFields:[],mainFields:[],mainFiles:["_index","index"],modules:[],restrictions:[/\.((sa|sc|c)ss)$/i],preferRelative:true}));const o=promiseResolve(e({alias:[],aliasFields:[],conditionNames:[],descriptionFiles:[],extensions:[".sass",".scss",".css"],exportsFields:[],mainFields:[],mainFiles:["_index.import","_index","index.import","index"],modules:[],restrictions:[/\.((sa|sc|c)ss)$/i],preferRelative:true}));const i=promiseResolve(e({dependencyType:"sass",conditionNames:["sass","style"],mainFields:["sass","style","main","..."],mainFiles:["_index","index","..."],extensions:[".sass",".scss",".css"],restrictions:[/\.((sa|sc|c)ss)$/i],preferRelative:true}));const a=promiseResolve(e({dependencyType:"sass",conditionNames:["sass","style"],mainFields:["sass","style","main","..."],mainFiles:["_index.import","_index","index.import","index","..."],extensions:[".sass",".scss",".css"],restrictions:[/\.((sa|sc|c)ss)$/i],preferRelative:true}));return(e,t,c)=>{if(!r&&!_path.default.isAbsolute(e)){return Promise.reject()}const l=t;const u=l.slice(0,5).toLowerCase()==="file:";if(u){try{t=_url.default.fileURLToPath(l)}catch(e){t=t.slice(7)}}let p=[];const d=!IS_SPECIAL_MODULE_IMPORT.test(t)&&!u&&!l.startsWith("/")&&!IS_NATIVE_WIN32_PATH.test(l);if(s.length>0&&d){const i=getPossibleRequests(t,false,c);if(!r){p=p.concat({resolve:c?o:n,context:_path.default.dirname(e),possibleRequests:i})}p=p.concat(s.map((e=>({resolve:c?o:n,context:e,possibleRequests:i}))))}const f=getPossibleRequests(t,true,c);p=p.concat({resolve:c?a:i,context:_path.default.dirname(e),possibleRequests:f});return startResolving(p)}}const MATCH_CSS=/\.css$/i;function getModernWebpackImporter(){return{async canonicalize(){return null},load(){}}}function getWebpackImporter(e,t,s){const r=getWebpackResolver(e.getResolve,t,s);return function importer(t,s,n){const{fromImport:o}=this;r(s,t,o).then((t=>{e.addDependency(_path.default.normalize(t));n({file:t.replace(MATCH_CSS,"")})})).catch((()=>{n({file:t})}))}}let nodeSassJobQueue=null;function getCompileFn(e,t){const s=e.info.includes("dart-sass")||e.info.includes("sass-embedded");if(s){if(t.api==="modern"){return t=>{const{data:s,...r}=t;return e.compileStringAsync(s,r)}}return t=>new Promise(((s,r)=>{e.render(t,((e,t)=>{if(e){r(e);return}s(t)}))}))}if(t.api==="modern"){throw new Error("Modern API is not supported for 'node-sass'")}if(nodeSassJobQueue===null){const t=Number(process.env.UV_THREADPOOL_SIZE||4);nodeSassJobQueue=_neoAsync.default.queue(e.render.bind(e),t-1)}return e=>new Promise(((t,s)=>{nodeSassJobQueue.push.bind(nodeSassJobQueue)(e,((e,r)=>{if(e){s(e);return}t(r)}))}))}const ABSOLUTE_SCHEME=/^[A-Za-z0-9+\-.]+:/;function getURLType(e){if(e[0]==="/"){if(e[1]==="/"){return"scheme-relative"}return"path-absolute"}if(IS_NATIVE_WIN32_PATH.test(e)){return"path-absolute"}return ABSOLUTE_SCHEME.test(e)?"absolute":"path-relative"}function normalizeSourceMap(e,t){const s=e;if(typeof s.file!=="undefined"){delete s.file}s.sourceRoot="";s.sources=s.sources.map((e=>{const s=getURLType(e);if(s==="absolute"&&/^file:/i.test(e)){return _url.default.fileURLToPath(e)}else if(s==="path-relative"){return _path.default.resolve(t,_path.default.normalize(e))}return e}));return s}},175:function(e){"use strict";e.exports=require("next/dist/compiled/neo-async")},17:function(e){"use strict";e.exports=require("path")},438:function(e){"use strict";e.exports=require("sass")},310:function(e){"use strict";e.exports=require("url")},934:function(e){"use strict";e.exports=JSON.parse('{"title":"Sass Loader options","type":"object","properties":{"implementation":{"description":"The implementation of the sass to be used.","link":"https://github.com/webpack-contrib/sass-loader#implementation","anyOf":[{"type":"string"},{"type":"object"}]},"api":{"description":"Switch between old and modern API for `sass` (`Dart Sass`) and `Sass Embedded` implementations.","link":"https://github.com/webpack-contrib/sass-loader#sassoptions","enum":["legacy","modern"]},"sassOptions":{"description":"Options for `node-sass` or `sass` (`Dart Sass`) implementation.","link":"https://github.com/webpack-contrib/sass-loader#sassoptions","anyOf":[{"type":"object","additionalProperties":true},{"instanceof":"Function"}]},"additionalData":{"description":"Prepends/Appends `Sass`/`SCSS` code before the actual entry file.","link":"https://github.com/webpack-contrib/sass-loader#additionaldata","anyOf":[{"type":"string"},{"instanceof":"Function"}]},"sourceMap":{"description":"Enables/Disables generation of source maps.","link":"https://github.com/webpack-contrib/sass-loader#sourcemap","type":"boolean"},"webpackImporter":{"description":"Enables/Disables default `webpack` importer.","link":"https://github.com/webpack-contrib/sass-loader#webpackimporter","type":"boolean"},"warnRuleAsWarning":{"description":"Treats the \'@warn\' rule as a webpack warning.","link":"https://github.com/webpack-contrib/sass-loader#warnruleaswarning","type":"boolean"}},"additionalProperties":false}')}};var __webpack_module_cache__={};function __nccwpck_require__(e){var t=__webpack_module_cache__[e];if(t!==undefined){return t.exports}var s=__webpack_module_cache__[e]={exports:{}};var r=true;try{__webpack_modules__[e](s,s.exports,__nccwpck_require__);r=false}finally{if(r)delete __webpack_module_cache__[e]}return s.exports}if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var __webpack_exports__=__nccwpck_require__(95);module.exports=__webpack_exports__})(); \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 05192acdd6bcc..adbec75749559 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1366,8 +1366,8 @@ importers: specifier: 0.13.4 version: 0.13.4 sass-loader: - specifier: 12.4.0 - version: 12.4.0(sass@1.54.0)(webpack@5.90.0) + specifier: 12.6.0 + version: 12.6.0(sass@1.54.0)(webpack@5.90.0) schema-utils2: specifier: npm:schema-utils@2.7.1 version: /schema-utils@2.7.1 @@ -2201,7 +2201,6 @@ packages: /@babel/plugin-proposal-dynamic-import@7.16.7(@babel/core@7.22.5): resolution: {integrity: sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==} engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead. peerDependencies: '@babel/core': 7.22.5 dependencies: @@ -2212,7 +2211,6 @@ packages: /@babel/plugin-proposal-export-namespace-from@7.16.7(@babel/core@7.22.5): resolution: {integrity: sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==} engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead. peerDependencies: '@babel/core': 7.22.5 dependencies: @@ -2235,7 +2233,6 @@ packages: /@babel/plugin-proposal-logical-assignment-operators@7.16.7(@babel/core@7.22.5): resolution: {integrity: sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==} engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead. peerDependencies: '@babel/core': 7.22.5 dependencies: @@ -2258,7 +2255,6 @@ packages: /@babel/plugin-proposal-numeric-separator@7.16.7(@babel/core@7.22.5): resolution: {integrity: sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==} engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. peerDependencies: '@babel/core': 7.22.5 dependencies: @@ -2308,7 +2304,6 @@ packages: /@babel/plugin-proposal-private-methods@7.16.11(@babel/core@7.22.5): resolution: {integrity: sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==} engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. peerDependencies: '@babel/core': 7.22.5 dependencies: @@ -23189,13 +23184,14 @@ packages: /safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - /sass-loader@12.4.0(sass@1.54.0)(webpack@5.90.0): - resolution: {integrity: sha512-7xN+8khDIzym1oL9XyS6zP6Ges+Bo2B2xbPrjdMHEYyV3AQYhd/wXeru++3ODHF0zMjYmVadblSKrPrjEkL8mg==} + /sass-loader@12.6.0(sass@1.54.0)(webpack@5.90.0): + resolution: {integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==} engines: {node: '>= 12.13.0'} peerDependencies: fibers: '>= 3.1.0' node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 sass: ^1.3.0 + sass-embedded: '*' webpack: 5.90.0 peerDependenciesMeta: fibers: @@ -23204,6 +23200,8 @@ packages: optional: true sass: optional: true + sass-embedded: + optional: true dependencies: klona: 2.0.4 neo-async: 2.6.2 diff --git a/test/e2e/app-dir/scss/3rd-party-module/3rd-party-module.test.ts b/test/e2e/app-dir/scss/3rd-party-module/3rd-party-module.test.ts index a5abddceba731..4dc74c8440db6 100644 --- a/test/e2e/app-dir/scss/3rd-party-module/3rd-party-module.test.ts +++ b/test/e2e/app-dir/scss/3rd-party-module/3rd-party-module.test.ts @@ -3,42 +3,54 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('3rd Party CSS Module Support', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + '3rd Party CSS Module Support ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/') - // Bar - expect( - await browser - .elementByCss('#verify-div .bar') - .getComputedCss('background-color') - ).toBe(colorToRgb('blue')) + it('should render the module', async () => { + const browser = await next.browser('/') + // Bar + expect( + await browser + .elementByCss('#verify-div .bar') + .getComputedCss('background-color') + ).toBe(colorToRgb('blue')) - // Baz - expect( - await browser - .elementByCss('#verify-div .baz') - .getComputedCss('background-color') - ).toBe(colorToRgb('blue')) + // Baz + expect( + await browser + .elementByCss('#verify-div .baz') + .getComputedCss('background-color') + ).toBe(colorToRgb('blue')) - // Lol - expect( - await browser - .elementByCss('#verify-div .lol') - .getComputedCss('background-color') - ).toBe(colorToRgb('red')) + // Lol + expect( + await browser + .elementByCss('#verify-div .lol') + .getComputedCss('background-color') + ).toBe(colorToRgb('red')) - // Lel - expect( - await browser - .elementByCss('#verify-div .lel') - .getComputedCss('background-color') - ).toBe(colorToRgb('green')) - }) -}) + // Lel + expect( + await browser + .elementByCss('#verify-div .lel') + .getComputedCss('background-color') + ).toBe(colorToRgb('green')) + }) + } +) diff --git a/test/e2e/app-dir/scss/basic-module-additional-data/basic-module-additional-data.test.ts b/test/e2e/app-dir/scss/basic-module-additional-data/basic-module-additional-data.test.ts index 11f3716d8d72d..5b0f672c976c2 100644 --- a/test/e2e/app-dir/scss/basic-module-additional-data/basic-module-additional-data.test.ts +++ b/test/e2e/app-dir/scss/basic-module-additional-data/basic-module-additional-data.test.ts @@ -3,18 +3,37 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Basic Module Additional Data Support', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +const sassOptions = { + additionalData: ` + $var: red; + `, +} + +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: { sassOptions } }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + ...sassOptions, + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Basic Module Additional Data Support ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-red').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + it('should render the module', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-red').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/basic-module-additional-data/next.config.js b/test/e2e/app-dir/scss/basic-module-additional-data/next.config.js deleted file mode 100644 index 3dd1ab165b6b3..0000000000000 --- a/test/e2e/app-dir/scss/basic-module-additional-data/next.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - sassOptions: { - additionalData: ` - $var: red; - `, - }, -} diff --git a/test/e2e/app-dir/scss/basic-module-include-paths/basic-module-include-paths.test.ts b/test/e2e/app-dir/scss/basic-module-include-paths/basic-module-include-paths.test.ts index b8debfb4a0e5f..497510b13264c 100644 --- a/test/e2e/app-dir/scss/basic-module-include-paths/basic-module-include-paths.test.ts +++ b/test/e2e/app-dir/scss/basic-module-include-paths/basic-module-include-paths.test.ts @@ -1,20 +1,36 @@ /* eslint-env jest */ - import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Basic Module Include Paths Support', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +const sassOptions = { + includePaths: ['./styles'], +} + +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: { sassOptions } }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + ...sassOptions, + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Basic Module Include Paths Support ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-red').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + it('should render the module', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-red').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/basic-module-include-paths/next.config.js b/test/e2e/app-dir/scss/basic-module-include-paths/next.config.js deleted file mode 100644 index 74108dbf8cf46..0000000000000 --- a/test/e2e/app-dir/scss/basic-module-include-paths/next.config.js +++ /dev/null @@ -1,7 +0,0 @@ -const path = require('path') - -module.exports = { - sassOptions: { - includePaths: [path.join(__dirname, 'styles')], - }, -} diff --git a/test/e2e/app-dir/scss/basic-module-prepend-data/basic-module-prepend-data.test.ts b/test/e2e/app-dir/scss/basic-module-prepend-data/basic-module-prepend-data.test.ts index 401613624cc64..beef188d62d72 100644 --- a/test/e2e/app-dir/scss/basic-module-prepend-data/basic-module-prepend-data.test.ts +++ b/test/e2e/app-dir/scss/basic-module-prepend-data/basic-module-prepend-data.test.ts @@ -3,18 +3,37 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Basic Module Prepend Data Support', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +const sassOptions = { + prependData: ` + $var: red; + `, +} + +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: { sassOptions } }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + ...sassOptions, + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Basic Module Prepend Data Support ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-red').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + it('should render the module', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-red').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/basic-module-prepend-data/next.config.js b/test/e2e/app-dir/scss/basic-module-prepend-data/next.config.js deleted file mode 100644 index c285e7781406c..0000000000000 --- a/test/e2e/app-dir/scss/basic-module-prepend-data/next.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - sassOptions: { - prependData: ` - $var: red; - `, - }, -} diff --git a/test/e2e/app-dir/scss/basic-module/basic-module.test.ts b/test/e2e/app-dir/scss/basic-module/basic-module.test.ts index 274a2ca1d34e1..6af926d4dece1 100644 --- a/test/e2e/app-dir/scss/basic-module/basic-module.test.ts +++ b/test/e2e/app-dir/scss/basic-module/basic-module.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Basic SCSS Module Support', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Basic SCSS Module Support ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-red').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + it('should render the module', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-red').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/catch-all-module/catch-all-module.test.ts b/test/e2e/app-dir/scss/catch-all-module/catch-all-module.test.ts index 7f0fcaf9cb184..1afe9d5b38f41 100644 --- a/test/e2e/app-dir/scss/catch-all-module/catch-all-module.test.ts +++ b/test/e2e/app-dir/scss/catch-all-module/catch-all-module.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Catch-all Route CSS Module Usage', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Catch-all Route CSS Module Usage ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/post') - expect( - await browser.elementByCss('#my-div').getComputedCss('background-color') - ).toBe(colorToRgb('red')) - }) -}) + it('should render the module', async () => { + const browser = await next.browser('/post') + expect( + await browser.elementByCss('#my-div').getComputedCss('background-color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts b/test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts index f37e7c8dd6724..a65dc69772c68 100644 --- a/test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts +++ b/test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts @@ -4,15 +4,29 @@ import { nextTestSetup } from 'e2e-utils' import { readdir, readFile } from 'fs-extra' import { join } from 'path' -describe('SCSS Support', () => { +const nextConfig = { + productionBrowserSourceMaps: true, +} + +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + ...nextConfig, + sassOptions: { + implementation: 'sass-embedded', + }, + }, + }, +])('SCSS Support ($dependencies)', ({ dependencies, nextConfig }) => { const { next, isNextDev, skipped } = nextTestSetup({ files: __dirname, // This test is skipped because it is reading files in the `.next` file which // isn't available/necessary in a deployment environment. skipDeployment: true, - dependencies: { - sass: '1.54.0', - }, + dependencies, + nextConfig, }) if (skipped) return // TODO: Figure out this test for dev and Turbopack diff --git a/test/e2e/app-dir/scss/compilation-and-prefixing/next.config.js b/test/e2e/app-dir/scss/compilation-and-prefixing/next.config.js deleted file mode 100644 index 9f4db8c561a59..0000000000000 --- a/test/e2e/app-dir/scss/compilation-and-prefixing/next.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - productionBrowserSourceMaps: true, -} diff --git a/test/e2e/app-dir/scss/composes-basic/composes-basic.test.ts b/test/e2e/app-dir/scss/composes-basic/composes-basic.test.ts index 50b2901a6e0b1..6bc4df3088cd5 100644 --- a/test/e2e/app-dir/scss/composes-basic/composes-basic.test.ts +++ b/test/e2e/app-dir/scss/composes-basic/composes-basic.test.ts @@ -3,23 +3,35 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('CSS Module Composes Usage (Basic)', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'CSS Module Composes Usage (Basic) ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-yellow').getComputedCss('color') - ).toBe(colorToRgb('yellow')) - expect( - await browser - .elementByCss('#verify-yellow') - .getComputedCss('background-color') - ).toBe(colorToRgb('blue')) - }) -}) + it('should render the module', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-yellow').getComputedCss('color') + ).toBe(colorToRgb('yellow')) + expect( + await browser + .elementByCss('#verify-yellow') + .getComputedCss('background-color') + ).toBe(colorToRgb('blue')) + }) + } +) diff --git a/test/e2e/app-dir/scss/composes-external/composes-external.test.ts b/test/e2e/app-dir/scss/composes-external/composes-external.test.ts index 94caf0814f634..8cb79dc7c9381 100644 --- a/test/e2e/app-dir/scss/composes-external/composes-external.test.ts +++ b/test/e2e/app-dir/scss/composes-external/composes-external.test.ts @@ -3,23 +3,35 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('CSS Module Composes Usage (External)', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'CSS Module Composes Usage (External) ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-yellow').getComputedCss('color') - ).toBe(colorToRgb('yellow')) - expect( - await browser - .elementByCss('#verify-yellow') - .getComputedCss('background-color') - ).toBe(colorToRgb('blue')) - }) -}) + it('should render the module', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-yellow').getComputedCss('color') + ).toBe(colorToRgb('yellow')) + expect( + await browser + .elementByCss('#verify-yellow') + .getComputedCss('background-color') + ).toBe(colorToRgb('blue')) + }) + } +) diff --git a/test/e2e/app-dir/scss/data-url/data-url.test.ts b/test/e2e/app-dir/scss/data-url/data-url.test.ts index 1cf6b960f87f6..8c0f76e4c09a3 100644 --- a/test/e2e/app-dir/scss/data-url/data-url.test.ts +++ b/test/e2e/app-dir/scss/data-url/data-url.test.ts @@ -3,20 +3,32 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('SCSS Support loader handling Data Urls', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'SCSS Support loader handling Data Urls ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the module', async () => { - const browser = await next.browser('/') - const redText = await browser.elementByCss('.red-text') - expect(await redText.getComputedCss('color')).toBe(colorToRgb('red')) - expect(await redText.getComputedCss('background-image')).toMatch( - /url\("data:[^"]+"\)$/ - ) - }) -}) + it('should render the module', async () => { + const browser = await next.browser('/') + const redText = await browser.elementByCss('.red-text') + expect(await redText.getComputedCss('color')).toBe(colorToRgb('red')) + expect(await redText.getComputedCss('background-image')).toMatch( + /url\("data:[^"]+"\)$/ + ) + }) + } +) diff --git a/test/e2e/app-dir/scss/dev-module/dev-module.test.ts b/test/e2e/app-dir/scss/dev-module/dev-module.test.ts index 1949a0b8e4c6f..2e2dbf9f5557a 100644 --- a/test/e2e/app-dir/scss/dev-module/dev-module.test.ts +++ b/test/e2e/app-dir/scss/dev-module/dev-module.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Has CSS Module in computed styles in Development', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Has CSS Module in computed styles in Development ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should have CSS for page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-red').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + it('should have CSS for page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-red').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/dynamic-route-module/dynamic-route-module.test.ts b/test/e2e/app-dir/scss/dynamic-route-module/dynamic-route-module.test.ts index 64cb05d55fae7..5326fd07db8d1 100644 --- a/test/e2e/app-dir/scss/dynamic-route-module/dynamic-route-module.test.ts +++ b/test/e2e/app-dir/scss/dynamic-route-module/dynamic-route-module.test.ts @@ -3,20 +3,32 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Dynamic Route CSS Module Usage', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) - it('should apply styles correctly', async () => { - const browser = await next.browser('/post-1') + }, +])( + 'Dynamic Route CSS Module Usage ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) + it('should apply styles correctly', async () => { + const browser = await next.browser('/post-1') - const background = await browser - .elementByCss('#my-div') - .getComputedCss('background-color') + const background = await browser + .elementByCss('#my-div') + .getComputedCss('background-color') - expect(background).toMatch(colorToRgb('red')) - }) -}) + expect(background).toMatch(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/external-url/external-url.test.ts b/test/e2e/app-dir/scss/external-url/external-url.test.ts index 862d57822269c..018f951f93db8 100644 --- a/test/e2e/app-dir/scss/external-url/external-url.test.ts +++ b/test/e2e/app-dir/scss/external-url/external-url.test.ts @@ -2,24 +2,36 @@ import { nextTestSetup } from 'e2e-utils' -describe('SCSS Support loader handling External imports', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) - it(`should include font on the page`, async () => { - const browser = await next.browser('/') - const result = await browser.eval(async function () { - return document.fonts.ready.then((fonts) => { - const includedFonts = [] - for (const font of fonts.values()) { - includedFonts.push(font.family) - } - return includedFonts + }, +])( + 'SCSS Support loader handling External imports ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) + it(`should include font on the page`, async () => { + const browser = await next.browser('/') + const result = await browser.eval(async function () { + return document.fonts.ready.then((fonts) => { + const includedFonts = [] + for (const font of fonts.values()) { + includedFonts.push(font.family) + } + return includedFonts + }) }) + expect(result).toInclude('Poppins') }) - expect(result).toInclude('Poppins') - }) -}) + } +) diff --git a/test/e2e/app-dir/scss/hmr-module/hmr-module.test.ts b/test/e2e/app-dir/scss/hmr-module/hmr-module.test.ts index 5151ce63c6a05..56f1b99b76a08 100644 --- a/test/e2e/app-dir/scss/hmr-module/hmr-module.test.ts +++ b/test/e2e/app-dir/scss/hmr-module/hmr-module.test.ts @@ -3,41 +3,53 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb, retry } from 'next-test-utils' -describe('Can hot reload CSS Module without losing state', () => { - const { next, isNextDev } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) - ;(isNextDev ? describe : describe.skip)('development only', () => { - it('should update CSS color without remounting ', async () => { - const browser = await next.browser('/') - - const desiredText = 'hello world' - await browser.elementById('text-input').type(desiredText) - expect(await browser.elementById('text-input').getValue()).toBe( - desiredText - ) - - expect( - await browser.elementByCss('#verify-red').getComputedCss('color') - ).toBe(colorToRgb('red')) + }, +])( + 'Can hot reload CSS Module without losing state ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next, isNextDev } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) + ;(isNextDev ? describe : describe.skip)('development only', () => { + it('should update CSS color without remounting ', async () => { + const browser = await next.browser('/') - await next.patchFile('pages/index.module.scss', (content) => { - return content.replace('$var: red', '$var: purple') - }) + const desiredText = 'hello world' + await browser.elementById('text-input').type(desiredText) + expect(await browser.elementById('text-input').getValue()).toBe( + desiredText + ) - await retry(async () => { expect( await browser.elementByCss('#verify-red').getComputedCss('color') - ).toBe(colorToRgb('purple')) - }) + ).toBe(colorToRgb('red')) + + await next.patchFile('pages/index.module.scss', (content) => { + return content.replace('$var: red', '$var: purple') + }) - // ensure text remained - expect(await browser.elementById('text-input').getValue()).toBe( - desiredText - ) + await retry(async () => { + expect( + await browser.elementByCss('#verify-red').getComputedCss('color') + ).toBe(colorToRgb('purple')) + }) + + // ensure text remained + expect(await browser.elementById('text-input').getValue()).toBe( + desiredText + ) + }) }) - }) -}) + } +) diff --git a/test/e2e/app-dir/scss/loader-order/loader-order.test.ts b/test/e2e/app-dir/scss/loader-order/loader-order.test.ts index 8271178ea453c..323b163a4ac88 100644 --- a/test/e2e/app-dir/scss/loader-order/loader-order.test.ts +++ b/test/e2e/app-dir/scss/loader-order/loader-order.test.ts @@ -3,17 +3,29 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('SCSS Support loader handling Preprocessor loader order', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) - it('should render the module', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + }, +])( + 'SCSS Support loader handling Preprocessor loader order ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) + it('should render the module', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/multi-global-reversed/multi-global-reversed.test.ts b/test/e2e/app-dir/scss/multi-global-reversed/multi-global-reversed.test.ts index 980776d2c956b..82651d7bfc01e 100644 --- a/test/e2e/app-dir/scss/multi-global-reversed/multi-global-reversed.test.ts +++ b/test/e2e/app-dir/scss/multi-global-reversed/multi-global-reversed.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('(SCSS) Multi Global Support (reversed)', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + '(SCSS) Multi Global Support (reversed) ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-blue').getComputedCss('color') - ).toBe(colorToRgb('blue')) - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-blue').getComputedCss('color') + ).toBe(colorToRgb('blue')) + }) + } +) diff --git a/test/e2e/app-dir/scss/multi-global/multi-global.test.ts b/test/e2e/app-dir/scss/multi-global/multi-global.test.ts index ded440c8fad22..2a6dfb6f774ca 100644 --- a/test/e2e/app-dir/scss/multi-global/multi-global.test.ts +++ b/test/e2e/app-dir/scss/multi-global/multi-global.test.ts @@ -3,12 +3,21 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Multi Global Support', () => { +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, + }, + }, +])('Multi Global Support ($dependencies)', ({ dependencies, nextConfig }) => { const { next } = nextTestSetup({ files: __dirname, - dependencies: { - sass: '1.54.0', - }, + dependencies, + nextConfig, }) it('should render the page', async () => { diff --git a/test/e2e/app-dir/scss/multi-page/multi-page.test.ts b/test/e2e/app-dir/scss/multi-page/multi-page.test.ts index a7447c4e0e690..381aed74e7f58 100644 --- a/test/e2e/app-dir/scss/multi-page/multi-page.test.ts +++ b/test/e2e/app-dir/scss/multi-page/multi-page.test.ts @@ -3,12 +3,21 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb, retry } from 'next-test-utils' -describe('SCSS Support', () => { +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, + }, + }, +])('SCSS Support ($dependencies)', ({ dependencies, nextConfig }) => { const { next, isNextDev } = nextTestSetup({ files: __dirname, - dependencies: { - sass: '1.54.0', - }, + dependencies, + nextConfig, }) describe('Has CSS in computed styles in Production', () => { it('should have CSS for page', async () => { diff --git a/test/e2e/app-dir/scss/nested-global/nested-global.test.ts b/test/e2e/app-dir/scss/nested-global/nested-global.test.ts index 2efda0c937681..86d85cc2b7312 100644 --- a/test/e2e/app-dir/scss/nested-global/nested-global.test.ts +++ b/test/e2e/app-dir/scss/nested-global/nested-global.test.ts @@ -3,21 +3,33 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Nested @import() Global Support', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Nested @import() Global Support ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) - expect( - await browser.elementByCss('.blue-text').getComputedCss('color') - ).toBe(colorToRgb('blue')) - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) + expect( + await browser.elementByCss('.blue-text').getComputedCss('color') + ).toBe(colorToRgb('blue')) + }) + } +) diff --git a/test/e2e/app-dir/scss/nm-module-nested/nm-module-nested.test.ts b/test/e2e/app-dir/scss/nm-module-nested/nm-module-nested.test.ts index e0129f1ac27d5..28b20c1e498cf 100644 --- a/test/e2e/app-dir/scss/nm-module-nested/nm-module-nested.test.ts +++ b/test/e2e/app-dir/scss/nm-module-nested/nm-module-nested.test.ts @@ -3,27 +3,41 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Valid Nested CSS Module Usage from within node_modules', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Valid Nested CSS Module Usage from within node_modules ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect(await browser.elementByCss('#other2').getComputedCss('color')).toBe( - colorToRgb('red') - ) - expect(await browser.elementByCss('#other3').getComputedCss('color')).toBe( - colorToRgb('black') - ) - expect( - await browser.elementByCss('#subclass').getComputedCss('color') - ).toBe(colorToRgb('yellow')) - expect( - await browser.elementByCss('#subclass').getComputedCss('background-color') - ).toBe(colorToRgb('blue')) - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#other2').getComputedCss('color') + ).toBe(colorToRgb('red')) + expect( + await browser.elementByCss('#other3').getComputedCss('color') + ).toBe(colorToRgb('black')) + expect( + await browser.elementByCss('#subclass').getComputedCss('color') + ).toBe(colorToRgb('yellow')) + expect( + await browser + .elementByCss('#subclass') + .getComputedCss('background-color') + ).toBe(colorToRgb('blue')) + }) + } +) diff --git a/test/e2e/app-dir/scss/nm-module/nm-module.test.ts b/test/e2e/app-dir/scss/nm-module/nm-module.test.ts index 08faa1b850a6f..0f6adfae3858a 100644 --- a/test/e2e/app-dir/scss/nm-module/nm-module.test.ts +++ b/test/e2e/app-dir/scss/nm-module/nm-module.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Valid CSS Module Usage from within node_modules', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Valid CSS Module Usage from within node_modules ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect(await browser.elementByCss('#nm-div').getComputedCss('color')).toBe( - colorToRgb('red') - ) - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#nm-div').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/npm-import-nested/npm-import-nested.test.ts b/test/e2e/app-dir/scss/npm-import-nested/npm-import-nested.test.ts index 08bec84775707..60b2d94f66675 100644 --- a/test/e2e/app-dir/scss/npm-import-nested/npm-import-nested.test.ts +++ b/test/e2e/app-dir/scss/npm-import-nested/npm-import-nested.test.ts @@ -3,21 +3,33 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Good Nested CSS Import from node_modules', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Good Nested CSS Import from node_modules ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) - expect( - await browser.elementByCss('.blue-text').getComputedCss('color') - ).toBe(colorToRgb('blue')) - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) + expect( + await browser.elementByCss('.blue-text').getComputedCss('color') + ).toBe(colorToRgb('blue')) + }) + } +) diff --git a/test/e2e/app-dir/scss/npm-import-tilde/next.config.js b/test/e2e/app-dir/scss/npm-import-tilde/next.config.js deleted file mode 100644 index c66405fc09a96..0000000000000 --- a/test/e2e/app-dir/scss/npm-import-tilde/next.config.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - experimental: { - turbo: { - resolveAlias: { - '/*': './*', - '~*': '*', - }, - }, - }, -} diff --git a/test/e2e/app-dir/scss/npm-import-tilde/npm-import-tilde.test.ts b/test/e2e/app-dir/scss/npm-import-tilde/npm-import-tilde.test.ts index 348f1b9e9aa9b..510852564de39 100644 --- a/test/e2e/app-dir/scss/npm-import-tilde/npm-import-tilde.test.ts +++ b/test/e2e/app-dir/scss/npm-import-tilde/npm-import-tilde.test.ts @@ -2,21 +2,47 @@ import { nextTestSetup } from 'e2e-utils' -describe('Good CSS Import from node_modules with tilde', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', - nprogress: '0.2.0', +const nextConfig = { + experimental: { + turbo: { + resolveAlias: { + '/*': './*', + '~*': '*', + }, }, - }) + }, +} - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser - .elementByCss('#nprogress .bar') - .getComputedCss('background-color') - ).toBe('rgb(34, 153, 221)') - }) -}) +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + ...nextConfig, + sassOptions: { + implementation: 'sass-embedded', + }, + }, + }, +])( + 'Good CSS Import from node_modules with tilde ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies: { + ...dependencies, + nprogress: '0.2.0', + }, + nextConfig, + }) + + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser + .elementByCss('#nprogress .bar') + .getComputedCss('background-color') + ).toBe('rgb(34, 153, 221)') + }) + } +) diff --git a/test/e2e/app-dir/scss/npm-import/npm-import.test.ts b/test/e2e/app-dir/scss/npm-import/npm-import.test.ts index d94c316685252..ad8b61795747a 100644 --- a/test/e2e/app-dir/scss/npm-import/npm-import.test.ts +++ b/test/e2e/app-dir/scss/npm-import/npm-import.test.ts @@ -2,21 +2,35 @@ import { nextTestSetup } from 'e2e-utils' -describe('Good CSS Import from node_modules', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', - nprogress: '0.2.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Good CSS Import from node_modules ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies: { + ...dependencies, + nprogress: '0.2.0', + }, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser - .elementByCss('#nprogress .bar') - .getComputedCss('background-color') - ).toBe('rgb(34, 153, 221)') - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser + .elementByCss('#nprogress .bar') + .getComputedCss('background-color') + ).toBe('rgb(34, 153, 221)') + }) + } +) diff --git a/test/e2e/app-dir/scss/prod-module/prod-module.test.ts b/test/e2e/app-dir/scss/prod-module/prod-module.test.ts index 21658002fafb5..e29c584445525 100644 --- a/test/e2e/app-dir/scss/prod-module/prod-module.test.ts +++ b/test/e2e/app-dir/scss/prod-module/prod-module.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Has CSS Module in computed styles in Production', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Has CSS Module in computed styles in Production ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('#verify-red').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('#verify-red').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/single-global-src/single-global-src.test.ts b/test/e2e/app-dir/scss/single-global-src/single-global-src.test.ts index a7413e89c4e8d..4e459264a2511 100644 --- a/test/e2e/app-dir/scss/single-global-src/single-global-src.test.ts +++ b/test/e2e/app-dir/scss/single-global-src/single-global-src.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Basic Global Support with src/ dir', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Basic Global Support with src/ dir ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/single-global/single-global.test.ts b/test/e2e/app-dir/scss/single-global/single-global.test.ts index 21b61bfa5252f..a53b68a96f62e 100644 --- a/test/e2e/app-dir/scss/single-global/single-global.test.ts +++ b/test/e2e/app-dir/scss/single-global/single-global.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Basic Global Support scss', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Basic Global Support scss ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) - }) -}) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) + }) + } +) diff --git a/test/e2e/app-dir/scss/unused/unused.test.ts b/test/e2e/app-dir/scss/unused/unused.test.ts index 88cae05bf67d5..16eb97b4ce533 100644 --- a/test/e2e/app-dir/scss/unused/unused.test.ts +++ b/test/e2e/app-dir/scss/unused/unused.test.ts @@ -2,13 +2,22 @@ import { nextTestSetup } from 'e2e-utils' -describe('unused scss', () => { - describe('Body is not hidden when unused in Development', () => { +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, + }, + }, +])('unused scss', ({ dependencies, nextConfig }) => { + describe('Body is not hidden when unused in Development ($dependencies)', () => { const { next, isNextDev } = nextTestSetup({ files: __dirname, - dependencies: { - sass: '1.54.0', - }, + dependencies, + nextConfig, }) ;(isNextDev ? describe : describe.skip)('development only', () => { @@ -25,9 +34,8 @@ describe('unused scss', () => { describe('Body is not hidden when broken in Development', () => { const { next, isNextDev } = nextTestSetup({ files: __dirname, - dependencies: { - sass: '1.54.0', - }, + dependencies, + nextConfig, }) ;(isNextDev ? describe : describe.skip)('development only', () => { diff --git a/test/e2e/app-dir/scss/url-global-asset-prefix-1/url-global-asset-prefix-1.test.ts b/test/e2e/app-dir/scss/url-global-asset-prefix-1/url-global-asset-prefix-1.test.ts index 554baf64ac7a8..5748d8393bdb4 100644 --- a/test/e2e/app-dir/scss/url-global-asset-prefix-1/url-global-asset-prefix-1.test.ts +++ b/test/e2e/app-dir/scss/url-global-asset-prefix-1/url-global-asset-prefix-1.test.ts @@ -5,33 +5,45 @@ import { colorToRgb, getUrlFromBackgroundImage } from 'next-test-utils' // TODO: Skipped as this test should set up the server to handle assetPrefix which it currently does not do. describe.skip('SCSS Support loader handling', () => { - describe('CSS URL via `file-loader` and asset prefix (1)', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', + describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, + ])( + 'CSS URL via `file-loader` and asset prefix (1) ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) - const background = await browser - .elementByCss('.red-text') - .getComputedCss('background-image') - expect(background).toMatch( - /url\(".*\/foo\/_next\/static\/media\/dark\..*\.svg"\), url\(".*\/foo\/_next\/static\/media\/dark2\..*\.svg"\)/ - ) + const background = await browser + .elementByCss('.red-text') + .getComputedCss('background-image') + expect(background).toMatch( + /url\(".*\/foo\/_next\/static\/media\/dark\..*\.svg"\), url\(".*\/foo\/_next\/static\/media\/dark2\..*\.svg"\)/ + ) - const urls = getUrlFromBackgroundImage(background) + const urls = getUrlFromBackgroundImage(background) - for (const url of urls) { - const response = await next.fetch(url) - expect(response.status).toBe(200) - } - }) - }) + for (const url of urls) { + const response = await next.fetch(url) + expect(response.status).toBe(200) + } + }) + } + ) }) diff --git a/test/e2e/app-dir/scss/url-global-asset-prefix-2/url-global-asset-prefix-2.test.ts b/test/e2e/app-dir/scss/url-global-asset-prefix-2/url-global-asset-prefix-2.test.ts index 73cfd03024cc9..e62b53115a931 100644 --- a/test/e2e/app-dir/scss/url-global-asset-prefix-2/url-global-asset-prefix-2.test.ts +++ b/test/e2e/app-dir/scss/url-global-asset-prefix-2/url-global-asset-prefix-2.test.ts @@ -5,33 +5,45 @@ import { colorToRgb, getUrlFromBackgroundImage } from 'next-test-utils' // TODO: Skipped as this test should set up the server to handle assetPrefix which it currently does not do. describe.skip('SCSS Support loader handling', () => { - describe('CSS URL via `file-loader` and asset prefix (2)', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', + describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, + ])( + 'CSS URL via `file-loader` and asset prefix (2) ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) - const background = await browser - .elementByCss('.red-text') - .getComputedCss('background-image') - expect(background).toMatch( - /url\(".*\/foo\/_next\/static\/media\/dark\..*\.svg"\), url\(".*\/foo\/_next\/static\/media\/dark2\..*\.svg"\)/ - ) + const background = await browser + .elementByCss('.red-text') + .getComputedCss('background-image') + expect(background).toMatch( + /url\(".*\/foo\/_next\/static\/media\/dark\..*\.svg"\), url\(".*\/foo\/_next\/static\/media\/dark2\..*\.svg"\)/ + ) - const urls = getUrlFromBackgroundImage(background) + const urls = getUrlFromBackgroundImage(background) - for (const url of urls) { - const response = await next.fetch(url) - expect(response.status).toBe(200) - } - }) - }) + for (const url of urls) { + const response = await next.fetch(url) + expect(response.status).toBe(200) + } + }) + } + ) }) diff --git a/test/e2e/app-dir/scss/url-global-partial/url-global-partial.test.ts b/test/e2e/app-dir/scss/url-global-partial/url-global-partial.test.ts index 7709276f9c6e6..c9ba7aca60bb6 100644 --- a/test/e2e/app-dir/scss/url-global-partial/url-global-partial.test.ts +++ b/test/e2e/app-dir/scss/url-global-partial/url-global-partial.test.ts @@ -4,33 +4,45 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb, getUrlFromBackgroundImage } from 'next-test-utils' describe('SCSS Support loader handling', () => { - describe('CSS URL via file-loader sass partial', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', + describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, + ])( + 'CSS URL via file-loader sass partial ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) - const background = await browser - .elementByCss('.red-text') - .getComputedCss('background-image') - expect(background).toMatch( - /url\(".*\/_next\/static\/media\/darka\..*\.svg"\), url\(".*\/_next\/static\/media\/darkb\..*\.svg"\)/ - ) + const background = await browser + .elementByCss('.red-text') + .getComputedCss('background-image') + expect(background).toMatch( + /url\(".*\/_next\/static\/media\/darka\..*\.svg"\), url\(".*\/_next\/static\/media\/darkb\..*\.svg"\)/ + ) - const urls = getUrlFromBackgroundImage(background) + const urls = getUrlFromBackgroundImage(background) - for (const url of urls) { - const response = await next.fetch(url) - expect(response.status).toBe(200) - } - }) - }) + for (const url of urls) { + const response = await next.fetch(url) + expect(response.status).toBe(200) + } + }) + } + ) }) diff --git a/test/e2e/app-dir/scss/url-global/url-global.test.ts b/test/e2e/app-dir/scss/url-global/url-global.test.ts index 461afe4d5908d..b1b737a0b3ffd 100644 --- a/test/e2e/app-dir/scss/url-global/url-global.test.ts +++ b/test/e2e/app-dir/scss/url-global/url-global.test.ts @@ -3,34 +3,46 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb, getUrlFromBackgroundImage } from 'next-test-utils' -describe('SCSS Support loader handling', () => { - describe('CSS URL via `file-loader`', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', }, - }) + }, + }, +])( + 'SCSS Support loader handling ($dependencies)', + ({ dependencies, nextConfig }) => { + describe('CSS URL via `file-loader`', () => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should render the page', async () => { - const browser = await next.browser('/') - expect( - await browser.elementByCss('.red-text').getComputedCss('color') - ).toBe(colorToRgb('red')) + it('should render the page', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.red-text').getComputedCss('color') + ).toBe(colorToRgb('red')) - const background = await browser - .elementByCss('.red-text') - .getComputedCss('background-image') - expect(background).toMatch( - /url\(".*\/_next\/static\/media\/dark\..*\.svg"\), url\(".*\/_next\/static\/media\/dark2\..*\.svg"\)/ - ) + const background = await browser + .elementByCss('.red-text') + .getComputedCss('background-image') + expect(background).toMatch( + /url\(".*\/_next\/static\/media\/dark\..*\.svg"\), url\(".*\/_next\/static\/media\/dark2\..*\.svg"\)/ + ) - const urls = getUrlFromBackgroundImage(background) + const urls = getUrlFromBackgroundImage(background) - for (const url of urls) { - const response = await next.fetch(url) - expect(response.status).toBe(200) - } + for (const url of urls) { + const response = await next.fetch(url) + expect(response.status).toBe(200) + } + }) }) - }) -}) + } +) diff --git a/test/e2e/app-dir/scss/with-styled-jsx/with-styled-jsx.test.ts b/test/e2e/app-dir/scss/with-styled-jsx/with-styled-jsx.test.ts index 91e3aa5f52a8c..eb948be15d5ce 100644 --- a/test/e2e/app-dir/scss/with-styled-jsx/with-styled-jsx.test.ts +++ b/test/e2e/app-dir/scss/with-styled-jsx/with-styled-jsx.test.ts @@ -3,18 +3,30 @@ import { nextTestSetup } from 'e2e-utils' import { colorToRgb } from 'next-test-utils' -describe('Ordering with styled-jsx', () => { - const { next } = nextTestSetup({ - files: __dirname, - dependencies: { - sass: '1.54.0', +describe.each([ + { dependencies: { sass: '1.54.0' }, nextConfig: undefined }, + { + dependencies: { 'sass-embedded': '1.75.0' }, + nextConfig: { + sassOptions: { + implementation: 'sass-embedded', + }, }, - }) + }, +])( + 'Ordering with styled-jsx ($dependencies)', + ({ dependencies, nextConfig }) => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies, + nextConfig, + }) - it('should have the correct color (css ordering)', async () => { - const browser = await next.browser('/') - expect(await browser.elementByCss('.my-text').getComputedCss('color')).toBe( - colorToRgb('green') - ) - }) -}) + it('should have the correct color (css ordering)', async () => { + const browser = await next.browser('/') + expect( + await browser.elementByCss('.my-text').getComputedCss('color') + ).toBe(colorToRgb('green')) + }) + } +) diff --git a/test/turbopack-build-tests-manifest.json b/test/turbopack-build-tests-manifest.json index f3aa0ab4ed35e..db9b91f4ebbe7 100644 --- a/test/turbopack-build-tests-manifest.json +++ b/test/turbopack-build-tests-manifest.json @@ -3060,7 +3060,10 @@ "runtimeError": false }, "test/e2e/app-dir/scss/3rd-party-module/3rd-party-module.test.ts": { - "passed": ["3rd Party CSS Module Support should render the module"], + "passed": [ + "3rd Party CSS Module Support ({\"sass\": \"1.54.0\"}) should render the module", + "3rd Party CSS Module Support ({\"sass-embedded\": \"1.75.0\"}) should render the module" + ], "failed": [], "pending": [], "flakey": [], @@ -3068,7 +3071,8 @@ }, "test/e2e/app-dir/scss/basic-module-additional-data/basic-module-additional-data.test.ts": { "passed": [ - "Basic Module Additional Data Support should render the module" + "Basic Module Additional Data Support ({\"sass\": \"1.54.0\"}) should render the module", + "Basic Module Additional Data Support ({\"sass-embedded\": \"1.75.0\"}) should render the module" ], "failed": [], "pending": [], @@ -3076,28 +3080,40 @@ "runtimeError": false }, "test/e2e/app-dir/scss/basic-module-include-paths/basic-module-include-paths.test.ts": { - "passed": ["Basic Module Include Paths Support should render the module"], + "passed": [ + "Basic Module Include Paths Support ({\"sass\": \"1.54.0\"}) should render the module", + "Basic Module Include Paths Support ({\"sass-embedded\": \"1.75.0\"}) should render the module" + ], "failed": [], "pending": [], "flakey": [], "runtimeError": false }, "test/e2e/app-dir/scss/basic-module-prepend-data/basic-module-prepend-data.test.ts": { - "passed": ["Basic Module Prepend Data Support should render the module"], + "passed": [ + "Basic Module Prepend Data Support ({\"sass\": \"1.54.0\"}) should render the module", + "Basic Module Prepend Data Support ({\"sass-embedded\": \"1.75.0\"}) should render the module" + ], "failed": [], "pending": [], "flakey": [], "runtimeError": false }, "test/e2e/app-dir/scss/basic-module/basic-module.test.ts": { - "passed": ["Basic SCSS Module Support should render the module"], + "passed": [ + "Basic SCSS Module Support ({\"sass\": \"1.54.0\"}) should render the module", + "Basic SCSS Module Support ({\"sass-embedded\": \"1.75.0\"}) should render the module" + ], "failed": [], "pending": [], "flakey": [], "runtimeError": false }, "test/e2e/app-dir/scss/catch-all-module/catch-all-module.test.ts": { - "passed": ["Catch-all Route CSS Module Usage should render the module"], + "passed": [ + "Catch-all Route CSS Module Usage ({\"sass\": \"1.54.0\"}) should render the module", + "Catch-all Route CSS Module Usage ({\"sass-embedded\": \"1.75.0\"}) should render the module" + ], "failed": [], "pending": [], "flakey": [], @@ -3106,15 +3122,20 @@ "test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts": { "passed": [], "failed": [ - "SCSS Support Production only CSS Compilation and Prefixing should've compiled and prefixed", - "SCSS Support Production only CSS Compilation and Prefixing should've emitted a source map" + "SCSS Support ({\"sass\": \"1.54.0\"}) Production only CSS Compilation and Prefixing should've compiled and prefixed", + "SCSS Support ({\"sass\": \"1.54.0\"}) Production only CSS Compilation and Prefixing should've emitted a source map", + "SCSS Support ({\"sass-embedded\": \"1.75.0\"}) Production only CSS Compilation and Prefixing should've compiled and prefixed", + "SCSS Support ({\"sass-embedded\": \"1.75.0\"}) Production only CSS Compilation and Prefixing should've emitted a source map" ], "pending": [], "flakey": [], "runtimeError": false }, "test/e2e/app-dir/scss/composes-basic/composes-basic.test.ts": { - "passed": ["CSS Module Composes Usage (Basic) should render the module"], + "passed": [ + "CSS Module Composes Usage (Basic) ({\"sass\": \"1.54.0\"}) should render the module", + "CSS Module Composes Usage (Basic) ({\"sass-embedded\": \"1.75.0\"}) should render the module" + ], "failed": [], "pending": [], "flakey": [], @@ -3122,7 +3143,8 @@ }, "test/e2e/app-dir/scss/composes-external/composes-external.test.ts": { "passed": [ - "CSS Module Composes Usage (External) should render the module" + "CSS Module Composes Usage (External) ({\"sass\": \"1.54.0\"}) should render the module", + "CSS Module Composes Usage (External) ({\"sass-embedded\": \"1.75.0\"}) should render the module" ], "failed": [], "pending": [], @@ -3131,7 +3153,8 @@ }, "test/e2e/app-dir/scss/data-url/data-url.test.ts": { "passed": [ - "SCSS Support loader handling Data Urls should render the module" + "SCSS Support loader handling Data Urls ({\"sass\": \"1.54.0\"}) should render the module", + "SCSS Support loader handling Data Urls ({\"sass-embedded\": \"1.75.0\"}) should render the module" ], "failed": [], "pending": [], @@ -3140,7 +3163,8 @@ }, "test/e2e/app-dir/scss/dev-module/dev-module.test.ts": { "passed": [ - "Has CSS Module in computed styles in Development should have CSS for page" + "Has CSS Module in computed styles in Development ({\"sass\": \"1.54.0\"}) should have CSS for page", + "Has CSS Module in computed styles in Development ({\"sass-embedded\": \"1.75.0\"}) should have CSS for page" ], "failed": [], "pending": [], @@ -3149,7 +3173,8 @@ }, "test/e2e/app-dir/scss/dynamic-route-module/dynamic-route-module.test.ts": { "passed": [ - "Dynamic Route CSS Module Usage should apply styles correctly" + "Dynamic Route CSS Module Usage ({\"sass\": \"1.54.0\"}) should apply styles correctly", + "Dynamic Route CSS Module Usage ({\"sass-embedded\": \"1.75.0\"}) should apply styles correctly" ], "failed": [], "pending": [], @@ -3158,7 +3183,8 @@ }, "test/e2e/app-dir/scss/external-url/external-url.test.ts": { "passed": [ - "SCSS Support loader handling External imports should include font on the page" + "SCSS Support loader handling External imports ({\"sass\": \"1.54.0\"}) should include font on the page", + "SCSS Support loader handling External imports ({\"sass-embedded\": \"1.75.0\"}) should include font on the page" ], "failed": [], "pending": [], @@ -3169,7 +3195,8 @@ "passed": [], "failed": [], "pending": [ - "Can hot reload CSS Module without losing state development only should update CSS color without remounting " + "Can hot reload CSS Module without losing state ({\"sass\": \"1.54.0\"}) development only should update CSS color without remounting ", + "Can hot reload CSS Module without losing state ({\"sass-embedded\": \"1.75.0\"}) development only should update CSS color without remounting " ], "flakey": [], "runtimeError": false @@ -3219,7 +3246,8 @@ }, "test/e2e/app-dir/scss/loader-order/loader-order.test.ts": { "passed": [ - "SCSS Support loader handling Preprocessor loader order should render the module" + "SCSS Support loader handling Preprocessor loader order ({\"sass\": \"1.54.0\"}) should render the module", + "SCSS Support loader handling Preprocessor loader order ({\"sass-embedded\": \"1.75.0\"}) should render the module" ], "failed": [], "pending": [], @@ -3228,7 +3256,8 @@ }, "test/e2e/app-dir/scss/multi-global-reversed/multi-global-reversed.test.ts": { "passed": [ - "(SCSS) Multi Global Support (reversed) should render the page" + "(SCSS) Multi Global Support (reversed) ({\"sass\": \"1.54.0\"}) should render the page", + "(SCSS) Multi Global Support (reversed) ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "failed": [], "pending": [], @@ -3236,7 +3265,10 @@ "runtimeError": false }, "test/e2e/app-dir/scss/multi-global/multi-global.test.ts": { - "passed": ["Multi Global Support should render the page"], + "passed": [ + "Multi Global Support ({\"sass\": \"1.54.0\"}) should render the page", + "Multi Global Support ({\"sass-embedded\": \"1.75.0\"}) should render the page" + ], "failed": [], "pending": [], "flakey": [], @@ -3244,8 +3276,10 @@ }, "test/e2e/app-dir/scss/multi-page/multi-page.test.ts": { "passed": [ - "SCSS Support Has CSS in computed styles in Development should have CSS for page", - "SCSS Support Has CSS in computed styles in Production should have CSS for page" + "SCSS Support ({\"sass\": \"1.54.0\"}) Has CSS in computed styles in Development should have CSS for page", + "SCSS Support ({\"sass-embedded\": \"1.75.0\"}) Has CSS in computed styles in Development should have CSS for page", + "SCSS Support ({\"sass\": \"1.54.0\"}) Has CSS in computed styles in Production should have CSS for page", + "SCSS Support ({\"sass-embedded\": \"1.75.0\"}) Has CSS in computed styles in Production should have CSS for page" ], "failed": [], "pending": [], @@ -3253,7 +3287,10 @@ "runtimeError": false }, "test/e2e/app-dir/scss/nested-global/nested-global.test.ts": { - "passed": ["Nested @import() Global Support should render the page"], + "passed": [ + "Nested @import() Global Support ({\"sass\": \"1.54.0\"}) should render the page", + "Nested @import() Global Support ({\"sass-embedded\": \"1.75.0\"}) should render the page" + ], "failed": [], "pending": [], "flakey": [], @@ -3261,7 +3298,8 @@ }, "test/e2e/app-dir/scss/nm-module-nested/nm-module-nested.test.ts": { "passed": [ - "Valid Nested CSS Module Usage from within node_modules should render the page" + "Valid Nested CSS Module Usage from within node_modules ({\"sass\": \"1.54.0\"}) should render the page", + "Valid Nested CSS Module Usage from within node_modules ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "failed": [], "pending": [], @@ -3270,7 +3308,8 @@ }, "test/e2e/app-dir/scss/nm-module/nm-module.test.ts": { "passed": [ - "Valid CSS Module Usage from within node_modules should render the page" + "Valid CSS Module Usage from within node_modules ({\"sass\": \"1.54.0\"}) should render the page", + "Valid CSS Module Usage from within node_modules ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "failed": [], "pending": [], @@ -3288,7 +3327,8 @@ }, "test/e2e/app-dir/scss/npm-import-nested/npm-import-nested.test.ts": { "passed": [ - "Good Nested CSS Import from node_modules should render the page" + "Good Nested CSS Import from node_modules ({\"sass\": \"1.54.0\"}) should render the page", + "Good Nested CSS Import from node_modules ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "failed": [], "pending": [], @@ -3297,7 +3337,8 @@ }, "test/e2e/app-dir/scss/npm-import-tilde/npm-import-tilde.test.ts": { "passed": [ - "Good CSS Import from node_modules with tilde should render the page" + "Good CSS Import from node_modules with tilde ({\"sass\": \"1.54.0\"}) should render the page", + "Good CSS Import from node_modules with tilde ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "failed": [], "pending": [], @@ -3305,7 +3346,10 @@ "runtimeError": false }, "test/e2e/app-dir/scss/npm-import/npm-import.test.ts": { - "passed": ["Good CSS Import from node_modules should render the page"], + "passed": [ + "Good CSS Import from node_modules ({\"sass\": \"1.54.0\"}) should render the page", + "Good CSS Import from node_modules ({\"sass-embedded\": \"1.75.0\"}) should render the page" + ], "failed": [], "pending": [], "flakey": [], @@ -3313,7 +3357,8 @@ }, "test/e2e/app-dir/scss/prod-module/prod-module.test.ts": { "passed": [ - "Has CSS Module in computed styles in Production should render the page" + "Has CSS Module in computed styles in Production ({\"sass\": \"1.54.0\"}) should render the page", + "Has CSS Module in computed styles in Production ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "failed": [], "pending": [], @@ -3328,14 +3373,20 @@ "runtimeError": false }, "test/e2e/app-dir/scss/single-global-src/single-global-src.test.ts": { - "passed": ["Basic Global Support with src/ dir should render the page"], + "passed": [ + "Basic Global Support with src/ dir ({\"sass\": \"1.54.0\"}) should render the page", + "Basic Global Support with src/ dir ({\"sass-embedded\": \"1.75.0\"}) should render the page" + ], "failed": [], "pending": [], "flakey": [], "runtimeError": false }, "test/e2e/app-dir/scss/single-global/single-global.test.ts": { - "passed": ["Basic Global Support scss should render the page"], + "passed": [ + "Basic Global Support scss ({\"sass\": \"1.54.0\"}) should render the page", + "Basic Global Support scss ({\"sass-embedded\": \"1.75.0\"}) should render the page" + ], "failed": [], "pending": [], "flakey": [], @@ -3345,8 +3396,10 @@ "passed": [], "failed": [], "pending": [ - "unused scss Body is not hidden when broken in Development development only should have body visible", - "unused scss Body is not hidden when unused in Development development only should have body visible" + "unused scss Body is not hidden when broken in Development ({\"sass\": \"1.54.0\"}) development only should have body visible", + "unused scss Body is not hidden when broken in Development ({\"sass-embedded\": \"1.75.0\"}) development only should have body visible", + "unused scss Body is not hidden when unused in Development ({\"sass\": \"1.54.0\"}) development only should have body visible", + "unused scss Body is not hidden when unused in Development ({\"sass-embedded\": \"1.75.0\"}) development only should have body visible" ], "flakey": [], "runtimeError": false @@ -3355,7 +3408,8 @@ "passed": [], "failed": [], "pending": [ - "SCSS Support loader handling CSS URL via `file-loader` and asset prefix (1) should render the page" + "SCSS Support loader handling CSS URL via `file-loader` and asset prefix (1) ({\"sass\": \"1.54.0\"}) should render the page", + "SCSS Support loader handling CSS URL via `file-loader` and asset prefix (1) ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "flakey": [], "runtimeError": false @@ -3364,14 +3418,16 @@ "passed": [], "failed": [], "pending": [ - "SCSS Support loader handling CSS URL via `file-loader` and asset prefix (2) should render the page" + "SCSS Support loader handling CSS URL via `file-loader` and asset prefix (2) ({\"sass\": \"1.54.0\"}) should render the page", + "SCSS Support loader handling CSS URL via `file-loader` and asset prefix (2) ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "flakey": [], "runtimeError": false }, "test/e2e/app-dir/scss/url-global-partial/url-global-partial.test.ts": { "passed": [ - "SCSS Support loader handling CSS URL via file-loader sass partial should render the page" + "SCSS Support loader handling CSS URL via file-loader sass partial ({\"sass\": \"1.54.0\"}) should render the page", + "SCSS Support loader handling CSS URL via file-loader sass partial ({\"sass-embedded\": \"1.75.0\"}) should render the page" ], "failed": [], "pending": [], @@ -3380,7 +3436,8 @@ }, "test/e2e/app-dir/scss/url-global/url-global.test.ts": { "passed": [ - "SCSS Support loader handling CSS URL via `file-loader` should render the page" + "SCSS Support loader handling ({\"sass\": \"1.54.0\"}) CSS URL via `file-loader` should render the page", + "SCSS Support loader handling ({\"sass-embedded\": \"1.75.0\"}) CSS URL via `file-loader` should render the page" ], "failed": [], "pending": [], @@ -3407,7 +3464,8 @@ }, "test/e2e/app-dir/scss/with-styled-jsx/with-styled-jsx.test.ts": { "passed": [ - "Ordering with styled-jsx should have the correct color (css ordering)" + "Ordering with styled-jsx ({\"sass\": \"1.54.0\"}) should have the correct color (css ordering)", + "Ordering with styled-jsx ({\"sass-embedded\": \"1.75.0\"}) should have the correct color (css ordering)" ], "failed": [], "pending": [],