diff --git a/README.md b/README.md index 3406481c..b8f5e575 100644 --- a/README.md +++ b/README.md @@ -664,9 +664,9 @@ Default: `"legacy"` Allows you to switch between `legacy` and `modern` API. You can find more information [here](https://sass-lang.com/documentation/js-api). The `modern-compiler` option enables the modern API with support for [Shared Resources](https://github.com/sass/sass/blob/main/accepted/shared-resources.d.ts.md). -> **Warning** +> **Note** > -> "modern" API is experimental, so some features may not work (known: built-in `importer` is not working and files with errors is not watching on initial run), you can follow this [here](https://github.com/webpack-contrib/sass-loader/issues/774). +> Using `modern-compiler` and `sass-embedded` together significantly improve performance and decrease built time. We strongly recommend their use. We will enable them by default in a future major release. > **Warning** > diff --git a/src/index.js b/src/index.js index 0a6da521..9d270560 100644 --- a/src/index.js +++ b/src/index.js @@ -57,11 +57,9 @@ async function loader(content) { getWebpackImporter(this, implementation, includePaths), ); } else { - // TODO loadsPaths - const { loadPaths } = sassOptions; - sassOptions.importers.push( - getModernWebpackImporter(this, implementation, loadPaths), + // No need to pass `loadPaths`, because modern API handle them itself + getModernWebpackImporter(this, implementation, []), ); } } diff --git a/src/utils.js b/src/utils.js index 474aacb4..fee86ded 100644 --- a/src/utils.js +++ b/src/utils.js @@ -203,6 +203,24 @@ async function getSassOptions( } } + sassOptions.loadPaths = [] + .concat( + // We use `loadPaths` in context for resolver, so it should be always absolute + (sassOptions.loadPaths ? sassOptions.loadPaths.slice() : []).map( + (includePath) => + path.isAbsolute(includePath) + ? includePath + : path.join(process.cwd(), includePath), + ), + ) + .concat( + process.env.SASS_PATH + ? process.env.SASS_PATH.split( + process.platform === "win32" ? ";" : ":", + ) + : [], + ); + sassOptions.importers = sassOptions.importers ? Array.isArray(sassOptions.importers) ? sassOptions.importers.slice() @@ -458,8 +476,10 @@ function getWebpackResolver( implementation, includePaths = [], ) { - const isDartSass = - implementation && implementation.info.includes("dart-sass"); + const isModernSass = + implementation && + (implementation.info.includes("dart-sass") || + implementation.info.includes("sass-embedded")); // We only have one difference with the built-in sass resolution logic and out resolution logic: // First, we look at the files starting with `_`, then without `_` (i.e. `_name.sass`, `_name.scss`, `_name.css`, `name.sass`, `name.scss`, `name.css`), // although `sass` look together by extensions (i.e. `_name.sass`/`name.sass`/`_name.scss`/`name.scss`/`_name.css`/`name.css`). @@ -525,7 +545,7 @@ function getWebpackResolver( // See https://github.com/webpack/webpack/issues/12340 // Because `node-sass` calls our importer before `1. Filesystem imports relative to the base file.` // custom importer may not return `{ file: '/path/to/name.ext' }` and therefore our `context` will be relative - if (!isDartSass && !path.isAbsolute(context)) { + if (!isModernSass && !path.isAbsolute(context)) { return Promise.reject(); } @@ -574,7 +594,7 @@ function getWebpackResolver( ); // `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too - if (!isDartSass) { + if (!isModernSass) { resolutionMap = resolutionMap.concat({ resolve: fromImport ? sassImportResolve : sassModuleResolve, context: path.dirname(context), @@ -622,7 +642,6 @@ function getModernWebpackImporter(loaderContext, implementation, loadPaths) { return { async canonicalize(originalUrl, context) { const { fromImport } = context; - // TODO memorize? const prev = context.containingUrl ? url.fileURLToPath(context.containingUrl.toString()) : loaderContext.resourcePath; @@ -660,7 +679,6 @@ function getModernWebpackImporter(loaderContext, implementation, loadPaths) { const contents = await new Promise((resolve, reject) => { // Old version of `enhanced-resolve` supports only path as a string // TODO simplify in the next major release and pass URL - // TODO memorize? const canonicalPath = url.fileURLToPath(canonicalUrl); loaderContext.fs.readFile(canonicalPath, "utf8", (err, content) => { diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 23af8e9d..6893ac2e 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -2356,97 +2356,109 @@ exports[`loader should resolve absolute paths ('dart-sass', 'legacy' API, 'scss' exports[`loader should resolve absolute paths ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; -exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; -@import url(./file.css); +@import "./file.css"; body { font: 100% Helvetica, sans-serif; - color: #333; } + color: #333; +} nav ul { margin: 0; padding: 0; - list-style: none; } - + list-style: none; +} nav li { - display: inline-block; } - + display: inline-block; +} nav a { display: block; padding: 6px 12px; - text-decoration: none; } + text-decoration: none; +} .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; - border-radius: 10px; } + border-radius: 10px; +} -.message, .success, .error, .warning { +.message, .warning, .error, .success { border: 1px solid #ccc; padding: 10px; - color: #333; } + color: #333; +} .success { - border-color: green; } + border-color: green; +} .error { - border-color: red; } + border-color: red; +} .warning { - border-color: yellow; } + border-color: yellow; +} .foo:before { - content: ""; } + content: "\\e0c6"; +} .bar:before { - content: "∑"; } -" + content: "∑"; +}" `; -exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; -exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; -@import url(./file.css); +@import "./file.css"; body { font: 100% Helvetica, sans-serif; - color: #333; } + color: #333; +} nav ul { margin: 0; padding: 0; - list-style: none; } - + list-style: none; +} nav li { - display: inline-block; } - + display: inline-block; +} nav a { display: block; padding: 6px 12px; - text-decoration: none; } + text-decoration: none; +} .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; - border-radius: 10px; } + border-radius: 10px; +} .foo:before { - content: ""; } + content: "\\e0c6"; +} .bar:before { - content: "∑"; } -" + content: "∑"; +}" `; -exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; -exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -2502,11 +2514,11 @@ nav a { }" `; -exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; -exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -2544,113 +2556,101 @@ nav a { }" `; -exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; -@import "./file.css"; +@import url(./file.css); body { font: 100% Helvetica, sans-serif; - color: #333; -} + color: #333; } nav ul { margin: 0; padding: 0; - list-style: none; -} + list-style: none; } + nav li { - display: inline-block; -} + display: inline-block; } + nav a { display: block; padding: 6px 12px; - text-decoration: none; -} + text-decoration: none; } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; - border-radius: 10px; -} + border-radius: 10px; } -.message, .warning, .error, .success { +.message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; - color: #333; -} + color: #333; } .success { - border-color: green; -} + border-color: green; } .error { - border-color: red; -} + border-color: red; } .warning { - border-color: yellow; -} + border-color: yellow; } .foo:before { - content: "\\e0c6"; -} + content: ""; } .bar:before { - content: "∑"; -}" + content: "∑"; } +" `; -exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; -@import "./file.css"; +@import url(./file.css); body { font: 100% Helvetica, sans-serif; - color: #333; -} + color: #333; } nav ul { margin: 0; padding: 0; - list-style: none; -} + list-style: none; } + nav li { - display: inline-block; -} + display: inline-block; } + nav a { display: block; padding: 6px 12px; - text-decoration: none; -} + text-decoration: none; } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; - border-radius: 10px; -} + border-radius: 10px; } .foo:before { - content: "\\e0c6"; -} + content: ""; } .bar:before { - content: "∑"; -}" + content: "∑"; } +" `; -exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -2706,11 +2706,11 @@ nav a { }" `; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -2748,11 +2748,11 @@ nav a { }" `; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -2808,11 +2808,11 @@ nav a { }" `; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -2850,101 +2850,113 @@ nav a { }" `; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; -@import url(./file.css); +@import "./file.css"; body { font: 100% Helvetica, sans-serif; - color: #333; } + color: #333; +} nav ul { margin: 0; padding: 0; - list-style: none; } - + list-style: none; +} nav li { - display: inline-block; } - + display: inline-block; +} nav a { display: block; padding: 6px 12px; - text-decoration: none; } + text-decoration: none; +} .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; - border-radius: 10px; } + border-radius: 10px; +} -.message, .success, .error, .warning { +.message, .warning, .error, .success { border: 1px solid #ccc; padding: 10px; - color: #333; } + color: #333; +} .success { - border-color: green; } + border-color: green; +} .error { - border-color: red; } + border-color: red; +} .warning { - border-color: yellow; } + border-color: yellow; +} .foo:before { - content: ""; } + content: "\\e0c6"; +} .bar:before { - content: "∑"; } -" + content: "∑"; +}" `; -exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = ` +exports[`loader should resolve absolute paths ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; -@import url(./file.css); +@import "./file.css"; body { font: 100% Helvetica, sans-serif; - color: #333; } + color: #333; +} nav ul { margin: 0; padding: 0; - list-style: none; } - + list-style: none; +} nav li { - display: inline-block; } - + display: inline-block; +} nav a { display: block; padding: 6px 12px; - text-decoration: none; } + text-decoration: none; +} .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; - border-radius: 10px; } + border-radius: 10px; +} .foo:before { - content: ""; } + content: "\\e0c6"; +} .bar:before { - content: "∑"; } -" + content: "∑"; +}" `; -exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should resolve absolute paths ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` +exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -3000,11 +3012,11 @@ nav a { }" `; -exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; +exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = ` +exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -3042,11 +3054,407 @@ nav a { }" `; -exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should resolve server-relative URLs ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; -exports[`loader should resolve server-relative URLs ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` +"@charset "UTF-8"; +@import "./file.css"; +body { + font: 100% Helvetica, sans-serif; + color: #333; +} + +nav ul { + margin: 0; + padding: 0; + list-style: none; +} +nav li { + display: inline-block; +} +nav a { + display: block; + padding: 6px 12px; + text-decoration: none; +} + +.box { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; +} + +.message, .warning, .error, .success { + border: 1px solid #ccc; + padding: 10px; + color: #333; +} + +.success { + border-color: green; +} + +.error { + border-color: red; +} + +.warning { + border-color: yellow; +} + +.foo:before { + content: "\\e0c6"; +} + +.bar:before { + content: "∑"; +}" +`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` +"@charset "UTF-8"; +@import "./file.css"; +body { + font: 100% Helvetica, sans-serif; + color: #333; +} + +nav ul { + margin: 0; + padding: 0; + list-style: none; +} +nav li { + display: inline-block; +} +nav a { + display: block; + padding: 6px 12px; + text-decoration: none; +} + +.box { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; +} + +.foo:before { + content: "\\e0c6"; +} + +.bar:before { + content: "∑"; +}" +`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +"@charset "UTF-8"; +@import "./file.css"; +body { + font: 100% Helvetica, sans-serif; + color: #333; +} + +nav ul { + margin: 0; + padding: 0; + list-style: none; +} +nav li { + display: inline-block; +} +nav a { + display: block; + padding: 6px 12px; + text-decoration: none; +} + +.box { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; +} + +.message, .warning, .error, .success { + border: 1px solid #ccc; + padding: 10px; + color: #333; +} + +.success { + border-color: green; +} + +.error { + border-color: red; +} + +.warning { + border-color: yellow; +} + +.foo:before { + content: "\\e0c6"; +} + +.bar:before { + content: "∑"; +}" +`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +"@charset "UTF-8"; +@import "./file.css"; +body { + font: 100% Helvetica, sans-serif; + color: #333; +} + +nav ul { + margin: 0; + padding: 0; + list-style: none; +} +nav li { + display: inline-block; +} +nav a { + display: block; + padding: 6px 12px; + text-decoration: none; +} + +.box { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; +} + +.foo:before { + content: "\\e0c6"; +} + +.bar:before { + content: "∑"; +}" +`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = ` +"@charset "UTF-8"; +@import url(./file.css); +body { + font: 100% Helvetica, sans-serif; + color: #333; } + +nav ul { + margin: 0; + padding: 0; + list-style: none; } + +nav li { + display: inline-block; } + +nav a { + display: block; + padding: 6px 12px; + text-decoration: none; } + +.box { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; } + +.message, .success, .error, .warning { + border: 1px solid #ccc; + padding: 10px; + color: #333; } + +.success { + border-color: green; } + +.error { + border-color: red; } + +.warning { + border-color: yellow; } + +.foo:before { + content: ""; } + +.bar:before { + content: "∑"; } +" +`; + +exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = ` +"@charset "UTF-8"; +@import url(./file.css); +body { + font: 100% Helvetica, sans-serif; + color: #333; } + +nav ul { + margin: 0; + padding: 0; + list-style: none; } + +nav li { + display: inline-block; } + +nav a { + display: block; + padding: 6px 12px; + text-decoration: none; } + +.box { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; } + +.foo:before { + content: ""; } + +.bar:before { + content: "∑"; } +" +`; + +exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` +"@charset "UTF-8"; +@import "./file.css"; +body { + font: 100% Helvetica, sans-serif; + color: #333; +} + +nav ul { + margin: 0; + padding: 0; + list-style: none; +} +nav li { + display: inline-block; +} +nav a { + display: block; + padding: 6px 12px; + text-decoration: none; +} + +.box { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; +} + +.message, .warning, .error, .success { + border: 1px solid #ccc; + padding: 10px; + color: #333; +} + +.success { + border-color: green; +} + +.error { + border-color: red; +} + +.warning { + border-color: yellow; +} + +.foo:before { + content: "\\e0c6"; +} + +.bar:before { + content: "∑"; +}" +`; + +exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = ` +"@charset "UTF-8"; +@import "./file.css"; +body { + font: 100% Helvetica, sans-serif; + color: #333; +} + +nav ul { + margin: 0; + padding: 0; + list-style: none; +} +nav li { + display: inline-block; +} +nav a { + display: block; + padding: 6px 12px; + text-decoration: none; +} + +.box { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + border-radius: 10px; +} + +.foo:before { + content: "\\e0c6"; +} + +.bar:before { + content: "∑"; +}" +`; + +exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should resolve server-relative URLs ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; body { @@ -3542,6 +3950,34 @@ exports[`loader should respect resolving from the "SASS_PATH" environment variab exports[`loader should respect resolving from the "SASS_PATH" environment variable ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should respect resolving from the "SASS_PATH" environment variable ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".color-red { + color: red; +} + +.bar { + color: blue; +}" +`; + +exports[`loader should respect resolving from the "SASS_PATH" environment variable ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should respect resolving from the "SASS_PATH" environment variable ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should respect resolving from the "SASS_PATH" environment variable ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".color-red { + color: red; +} + +.bar { + color: blue; +}" +`; + +exports[`loader should respect resolving from the "SASS_PATH" environment variable ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should respect resolving from the "SASS_PATH" environment variable ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + exports[`loader should support resolving using the "file" schema ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @import "./file.css"; @@ -4776,6 +5212,46 @@ exports[`loader should watch firstly in the "includePaths" values ('dart-sass', exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` +".foo { + color: red; +}" +`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` +".foo { + color: red; +}" +`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".foo { + color: red; +}" +`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".foo { + color: red; +}" +`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + exports[`loader should watch firstly in the "includePaths" values ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = ` ".bar { color: red; } @@ -4816,6 +5292,46 @@ exports[`loader should watch firstly in the "includePaths" values ('sass-embedde exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` +".foo { + color: red; +}" +`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` +".foo { + color: red; +}" +`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".foo { + color: red; +}" +`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".foo { + color: red; +}" +`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should watch firstly in the "includePaths" values ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + exports[`loader should work ('dart-sass', 'legacy' API, 'sass' syntax) add "@charset "UTF-8";" for non ascii characters: css 1`] = ` "@charset "UTF-8"; p { @@ -10034,6 +10550,144 @@ exports[`loader should work and use the "style" field ('sass-embedded', 'modern- exports[`loader should work and use the "style" field ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = ` +"@use 'my-pkg-module' {} +" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = ` +"@use 'my-pkg-module'; +" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".my-pkg-path { + background: hotpink; +}" +`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work prefer \`loadPaths\` over \`SASS_PATH\` ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + exports[`loader should work when "@import" at-rules from scoped npm packages ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` "/* @import ~@org/pkg */ .org-pkg { @@ -988474,6 +989128,46 @@ exports[`loader should work with a package with "sass" and "exports" fields and exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` +".load-me { + color: red; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` +".load-me { + color: red; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".load-me { + color: red; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".load-me { + color: red; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = ` ".load-me { color: red; } @@ -988514,6 +989208,46 @@ exports[`loader should work with a package with "sass" and "exports" fields and exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` +".load-me { + color: red; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` +".load-me { + color: red; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".load-me { + color: red; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".load-me { + color: red; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` ".load-me { color: blue; @@ -988534,6 +989268,46 @@ exports[`loader should work with a package with "sass" and "exports" fields and exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` +".load-me { + color: blue; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` +".load-me { + color: blue; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".load-me { + color: blue; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".load-me { + color: blue; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = ` ".load-me { color: blue; } @@ -988574,6 +989348,46 @@ exports[`loader should work with a package with "sass" and "exports" fields and exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`; +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` +".load-me { + color: blue; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` +".load-me { + color: blue; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".load-me { + color: blue; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".load-me { + color: blue; +}" +`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; + exports[`loader should work with an alias ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` "a { color: red; @@ -1181469,12 +1182283,7 @@ html.is-reveal-open body { exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; @@ -1187574,12 +1188383,7 @@ html.is-reveal-open body { exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @@ -1193679,12 +1194483,7 @@ html.is-reveal-open body { exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; @@ -1199784,12 +1200583,7 @@ html.is-reveal-open body { exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @@ -1218089,12 +1218883,7 @@ html.is-reveal-open body { exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; @@ -1224194,12 +1224983,7 @@ html.is-reveal-open body { exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` "@charset "UTF-8"; @@ -1230299,12 +1231083,7 @@ html.is-reveal-open body { exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` "@charset "UTF-8"; @@ -1236404,12 +1237183,7 @@ html.is-reveal-open body { exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, adjusting CSS output ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` "/** @@ -1236448,12 +1237222,7 @@ exports[`loader should work with the "foundation-sites" package, import as a pac exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` "/** @@ -1236466,12 +1237235,7 @@ exports[`loader should work with the "foundation-sites" package, import as a pac exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` "/** @@ -1236484,12 +1237248,7 @@ exports[`loader should work with the "foundation-sites" package, import as a pac exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` "/** @@ -1236502,12 +1237261,7 @@ exports[`loader should work with the "foundation-sites" package, import as a pac exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, import as a package ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` "/** @@ -1236546,12 +1237300,7 @@ exports[`loader should work with the "foundation-sites" package, import as a pac exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` "/** @@ -1236564,12 +1237313,7 @@ exports[`loader should work with the "foundation-sites" package, import as a pac exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` "/** @@ -1236582,12 +1237326,7 @@ exports[`loader should work with the "foundation-sites" package, import as a pac exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = `[]`; exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` "/** @@ -1236600,12 +1237339,7 @@ exports[`loader should work with the "foundation-sites" package, import as a pac exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` -[ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", -] -`; +exports[`loader should work with the "foundation-sites" package, import as a package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = `[]`; exports[`loader should work with the "material-components-web" package ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` ".test .mdc-touch-target-wrapper { @@ -1238717,12 +1239451,435 @@ exports[`loader should work with the "material-components-web" package ('dart-sa }" `; +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'sass' syntax): errors 2`] = `[]`; + exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = ` [ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'sass' syntax): warnings 2`] = ` +[ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", "ModuleWarning: Module Warning (from ../src/cjs.js): @@ -1239144,12 +1240301,435 @@ exports[`loader should work with the "material-components-web" package ('dart-sa }" `; +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'scss' syntax): errors 2`] = `[]`; + exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = ` [ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern' API, 'scss' syntax): warnings 2`] = ` +[ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", "ModuleWarning: Module Warning (from ../src/cjs.js): @@ -1239571,12 +1241151,13172 @@ exports[`loader should work with the "material-components-web" package ('dart-sa }" `; -exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'sass' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern' API, 'scss' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'sass' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 2`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'scss' syntax): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = ` [ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", "ModuleWarning: Module Warning (from ../src/cjs.js): @@ -1239588,422 +1254328,8 @@ Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touc ] `; -exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` -".test .mdc-touch-target-wrapper { - display: inline; -} -.test .mdc-elevation-overlay { - position: absolute; - border-radius: inherit; - pointer-events: none; - opacity: 0; - /* @alternate */ - opacity: var(--mdc-elevation-overlay-opacity, 0); - transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); - background-color: #fff; - /* @alternate */ - background-color: var(--mdc-elevation-overlay-color, #fff); -} -.test .mdc-button { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Roboto, sans-serif; - /* @alternate */ - font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); - font-size: 0.875rem; - /* @alternate */ - font-size: var(--mdc-typography-button-font-size, 0.875rem); - line-height: 2.25rem; - /* @alternate */ - line-height: var(--mdc-typography-button-line-height, 2.25rem); - font-weight: 500; - /* @alternate */ - font-weight: var(--mdc-typography-button-font-weight, 500); - letter-spacing: 0.0892857143em; - /* @alternate */ - letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); - text-decoration: none; - /* @alternate */ - text-decoration: var(--mdc-typography-button-text-decoration, none); - text-transform: uppercase; - /* @alternate */ - text-transform: var(--mdc-typography-button-text-transform, uppercase); - padding: 0 8px 0 8px; - /* @alternate */ - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - min-width: 64px; - border: none; - outline: none; - /* @alternate */ - line-height: inherit; - user-select: none; - -webkit-appearance: none; - overflow: visible; - vertical-align: middle; - border-radius: 4px; - /* @alternate */ - border-radius: var(--mdc-shape-small, 4px); - height: 36px; -} -.test .mdc-button .mdc-elevation-overlay { - width: 100%; - height: 100%; - top: 0; - /* @noflip */ - left: 0; -} -.test .mdc-button::-moz-focus-inner { - padding: 0; - border: 0; -} -.test .mdc-button:active { - outline: none; -} -.test .mdc-button:hover { - cursor: pointer; -} -.test .mdc-button:disabled { - cursor: default; - pointer-events: none; -} -.test .mdc-button .mdc-button__ripple { - border-radius: 4px; - /* @alternate */ - border-radius: var(--mdc-shape-small, 4px); -} -.test .mdc-button:not(:disabled) { - background-color: transparent; -} -.test .mdc-button:disabled { - background-color: transparent; -} -.test .mdc-button .mdc-button__icon { - /* @noflip */ - margin-left: 0; - /* @noflip */ - margin-right: 8px; - display: inline-block; - width: 18px; - height: 18px; - font-size: 18px; - vertical-align: top; -} -[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { - /* @noflip */ - margin-left: 8px; - /* @noflip */ - margin-right: 0; -} -.test .mdc-button .mdc-button__touch { - position: absolute; - top: 50%; - right: 0; - height: 48px; - left: 0; - transform: translateY(-50%); -} -.test .mdc-button:not(:disabled) { - color: #6200ee; - /* @alternate */ - color: var(--mdc-theme-primary, #6200ee); -} -.test .mdc-button:disabled { - color: rgba(0, 0, 0, 0.38); -} -.test .mdc-button__label + .mdc-button__icon { - /* @noflip */ - margin-left: 8px; - /* @noflip */ - margin-right: 0; -} -[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { - /* @noflip */ - margin-left: 0; - /* @noflip */ - margin-right: 8px; -} -.test svg.mdc-button__icon { - fill: currentColor; -} -.test .mdc-button--raised .mdc-button__icon, -.test .mdc-button--unelevated .mdc-button__icon, -.test .mdc-button--outlined .mdc-button__icon { - /* @noflip */ - margin-left: -4px; - /* @noflip */ - margin-right: 8px; -} -[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], -[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, -.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], -[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, -.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { - /* @noflip */ - margin-left: 8px; - /* @noflip */ - margin-right: -4px; -} -.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, -.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, -.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { - /* @noflip */ - margin-left: 8px; - /* @noflip */ - margin-right: -4px; -} -[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], -[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, -.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], -[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, -.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { - /* @noflip */ - margin-left: -4px; - /* @noflip */ - margin-right: 8px; -} -.test .mdc-button--raised, -.test .mdc-button--unelevated { - padding: 0 16px 0 16px; -} -.test .mdc-button--raised:not(:disabled), -.test .mdc-button--unelevated:not(:disabled) { - background-color: #6200ee; - /* @alternate */ - background-color: var(--mdc-theme-primary, #6200ee); -} -.test .mdc-button--raised:not(:disabled), -.test .mdc-button--unelevated:not(:disabled) { - color: #fff; - /* @alternate */ - color: var(--mdc-theme-on-primary, #fff); -} -.test .mdc-button--raised:disabled, -.test .mdc-button--unelevated:disabled { - background-color: rgba(0, 0, 0, 0.12); -} -.test .mdc-button--raised:disabled, -.test .mdc-button--unelevated:disabled { - color: rgba(0, 0, 0, 0.38); -} -.test .mdc-button--raised { - /* @alternate */ - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); -} -.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { - /* @alternate */ - box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); -} -.test .mdc-button--raised:active { - /* @alternate */ - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); -} -.test .mdc-button--raised:disabled { - /* @alternate */ - box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); -} -.test .mdc-button--outlined { - padding: 0 15px 0 15px; - border-width: 1px; - border-style: solid; -} -.test .mdc-button--outlined .mdc-button__ripple { - top: -1px; - left: -1px; - border: 1px solid transparent; -} -.test .mdc-button--outlined .mdc-button__touch { - left: -1px; - width: calc(100% + 2 * 1px); -} -.test .mdc-button--outlined:not(:disabled) { - border-color: rgba(0, 0, 0, 0.12); -} -.test .mdc-button--outlined:disabled { - border-color: rgba(0, 0, 0, 0.12); -} -.test .mdc-button--touch { - margin-top: 6px; - margin-bottom: 6px; -} -@keyframes mdc-ripple-fg-radius-in { - from { - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); - } - to { - transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); - } -} -@keyframes mdc-ripple-fg-opacity-in { - from { - animation-timing-function: linear; - opacity: 0; - } - to { - opacity: var(--mdc-ripple-fg-opacity, 0); - } -} -@keyframes mdc-ripple-fg-opacity-out { - from { - animation-timing-function: linear; - opacity: var(--mdc-ripple-fg-opacity, 0); - } - to { - opacity: 0; - } -} -.test .mdc-button { - --mdc-ripple-fg-size: 0; - --mdc-ripple-left: 0; - --mdc-ripple-top: 0; - --mdc-ripple-fg-scale: 1; - --mdc-ripple-fg-translate-end: 0; - --mdc-ripple-fg-translate-start: 0; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - will-change: transform, opacity; -} -.test .mdc-button .mdc-button__ripple::before, -.test .mdc-button .mdc-button__ripple::after { - position: absolute; - border-radius: 50%; - opacity: 0; - pointer-events: none; - content: ""; -} -.test .mdc-button .mdc-button__ripple::before { - transition: opacity 15ms linear, background-color 15ms linear; - z-index: 1; - /* @alternate */ - z-index: var(--mdc-ripple-z-index, 1); -} -.test .mdc-button .mdc-button__ripple::after { - z-index: 0; - /* @alternate */ - z-index: var(--mdc-ripple-z-index, 0); -} -.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { - transform: scale(var(--mdc-ripple-fg-scale, 1)); -} -.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { - top: 0; - /* @noflip */ - left: 0; - transform: scale(0); - transform-origin: center center; -} -.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { - top: var(--mdc-ripple-top, 0); - /* @noflip */ - left: var(--mdc-ripple-left, 0); -} -.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { - animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; -} -.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { - animation: mdc-ripple-fg-opacity-out 150ms; - transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); -} -.test .mdc-button .mdc-button__ripple::before, -.test .mdc-button .mdc-button__ripple::after { - top: calc(50% - 100%); - /* @noflip */ - left: calc(50% - 100%); - width: 200%; - height: 200%; -} -.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { - width: var(--mdc-ripple-fg-size, 100%); - height: var(--mdc-ripple-fg-size, 100%); -} -.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { - background-color: #6200ee; - /* @alternate */ - background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); -} -.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { - opacity: 0.04; - /* @alternate */ - opacity: var(--mdc-ripple-hover-opacity, 0.04); -} -.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { - transition-duration: 75ms; - opacity: 0.12; - /* @alternate */ - opacity: var(--mdc-ripple-focus-opacity, 0.12); -} -.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { - transition: opacity 150ms linear; -} -.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { - transition-duration: 75ms; - opacity: 0.12; - /* @alternate */ - opacity: var(--mdc-ripple-press-opacity, 0.12); -} -.test .mdc-button.mdc-ripple-upgraded { - --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); -} -.test .mdc-button .mdc-button__ripple { - position: absolute; - box-sizing: content-box; - width: 100%; - height: 100%; - overflow: hidden; -} -.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { - top: 0; - left: 0; -} -.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, -.test .mdc-button--unelevated .mdc-button__ripple::before, -.test .mdc-button--unelevated .mdc-button__ripple::after { - background-color: #fff; - /* @alternate */ - background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); -} -.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, -.test .mdc-button--unelevated:hover .mdc-button__ripple::before, -.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { - opacity: 0.08; - /* @alternate */ - opacity: var(--mdc-ripple-hover-opacity, 0.08); -} -.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, -.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, -.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { - transition-duration: 75ms; - opacity: 0.24; - /* @alternate */ - opacity: var(--mdc-ripple-focus-opacity, 0.24); -} -.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, -.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { - transition: opacity 150ms linear; -} -.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, -.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { - transition-duration: 75ms; - opacity: 0.24; - /* @alternate */ - opacity: var(--mdc-ripple-press-opacity, 0.24); -} -.test .mdc-button--raised.mdc-ripple-upgraded, -.test .mdc-button--unelevated.mdc-ripple-upgraded { - --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); -}" -`; - -exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; - -exports[`loader should work with the "material-components-web" package ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 2`] = ` [ - "InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. -Invalid dependencies may lead to broken watching and caching.", "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", "ModuleWarning: Module Warning (from ../src/cjs.js): @@ -1240015,7 +1254341,7 @@ Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touc ] `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'sass' syntax): css 1`] = ` ".test .mdc-touch-target-wrapper { display: inline; } @@ -1240425,7 +1254751,7 @@ exports[`loader should work with the "material-components-web" package without t }" `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): css 2`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'sass' syntax): css 2`] = ` ".test .mdc-touch-target-wrapper { display: inline; } @@ -1240835,11 +1255161,11 @@ exports[`loader should work with the "material-components-web" package without t }" `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): errors 2`] = `[]`; +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'sass' syntax): errors 2`] = `[]`; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'sass' syntax): warnings 1`] = ` [ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", @@ -1240852,7 +1255178,7 @@ Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touc ] `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'sass' syntax): warnings 2`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'sass' syntax): warnings 2`] = ` [ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", @@ -1240865,7 +1255191,7 @@ Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touc ] `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'scss' syntax): css 1`] = ` ".test .mdc-touch-target-wrapper { display: inline; } @@ -1241275,7 +1255601,7 @@ exports[`loader should work with the "material-components-web" package without t }" `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): css 2`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'scss' syntax): css 2`] = ` ".test .mdc-touch-target-wrapper { display: inline; } @@ -1241685,11 +1256011,11 @@ exports[`loader should work with the "material-components-web" package without t }" `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): errors 2`] = `[]`; +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'scss' syntax): errors 2`] = `[]`; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'scss' syntax): warnings 1`] = ` [ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", @@ -1241702,7 +1256028,7 @@ Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touc ] `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'legacy' API, 'scss' syntax): warnings 2`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern' API, 'scss' syntax): warnings 2`] = ` [ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", @@ -1241715,7 +1256041,417 @@ Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touc ] `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): css 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + pointer-events: none; + opacity: 0; + /* @alternate */ + opacity: var(--mdc-elevation-overlay-opacity, 0); + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-elevation-overlay-color, #fff); +} +.test .mdc-button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.875rem; + /* @alternate */ + font-size: var(--mdc-typography-button-font-size, 0.875rem); + line-height: 2.25rem; + /* @alternate */ + line-height: var(--mdc-typography-button-line-height, 2.25rem); + font-weight: 500; + /* @alternate */ + font-weight: var(--mdc-typography-button-font-weight, 500); + letter-spacing: 0.0892857143em; + /* @alternate */ + letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); + text-decoration: none; + /* @alternate */ + text-decoration: var(--mdc-typography-button-text-decoration, none); + text-transform: uppercase; + /* @alternate */ + text-transform: var(--mdc-typography-button-text-transform, uppercase); + padding: 0 8px 0 8px; + /* @alternate */ + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 64px; + border: none; + outline: none; + /* @alternate */ + line-height: inherit; + user-select: none; + -webkit-appearance: none; + overflow: visible; + vertical-align: middle; + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); + height: 36px; +} +.test .mdc-button .mdc-elevation-overlay { + width: 100%; + height: 100%; + top: 0; + /* @noflip */ + left: 0; +} +.test .mdc-button::-moz-focus-inner { + padding: 0; + border: 0; +} +.test .mdc-button:active { + outline: none; +} +.test .mdc-button:hover { + cursor: pointer; +} +.test .mdc-button:disabled { + cursor: default; + pointer-events: none; +} +.test .mdc-button .mdc-button__ripple { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} +.test .mdc-button:not(:disabled) { + background-color: transparent; +} +.test .mdc-button:disabled { + background-color: transparent; +} +.test .mdc-button .mdc-button__icon { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; + display: inline-block; + width: 18px; + height: 18px; + font-size: 18px; + vertical-align: top; +} +[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +.test .mdc-button .mdc-button__touch { + position: absolute; + top: 50%; + right: 0; + height: 48px; + left: 0; + transform: translateY(-50%); +} +.test .mdc-button:not(:disabled) { + color: #6200ee; + /* @alternate */ + color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: 0; +} +[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 0; + /* @noflip */ + margin-right: 8px; +} +.test svg.mdc-button__icon { + fill: currentColor; +} +.test .mdc-button--raised .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { + /* @noflip */ + margin-left: 8px; + /* @noflip */ + margin-right: -4px; +} +[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, +.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], +[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, +.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { + /* @noflip */ + margin-left: -4px; + /* @noflip */ + margin-right: 8px; +} +.test .mdc-button--raised, +.test .mdc-button--unelevated { + padding: 0 16px 0 16px; +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-theme-primary, #6200ee); +} +.test .mdc-button--raised:not(:disabled), +.test .mdc-button--unelevated:not(:disabled) { + color: #fff; + /* @alternate */ + color: var(--mdc-theme-on-primary, #fff); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + background-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled, +.test .mdc-button--unelevated:disabled { + color: rgba(0, 0, 0, 0.38); +} +.test .mdc-button--raised { + /* @alternate */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { + /* @alternate */ + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:active { + /* @alternate */ + box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--raised:disabled { + /* @alternate */ + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined { + padding: 0 15px 0 15px; + border-width: 1px; + border-style: solid; +} +.test .mdc-button--outlined .mdc-button__ripple { + top: -1px; + left: -1px; + border: 1px solid transparent; +} +.test .mdc-button--outlined .mdc-button__touch { + left: -1px; + width: calc(100% + 2 * 1px); +} +.test .mdc-button--outlined:not(:disabled) { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--outlined:disabled { + border-color: rgba(0, 0, 0, 0.12); +} +.test .mdc-button--touch { + margin-top: 6px; + margin-bottom: 6px; +} +@keyframes mdc-ripple-fg-radius-in { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + to { + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} +@keyframes mdc-ripple-fg-opacity-in { + from { + animation-timing-function: linear; + opacity: 0; + } + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} +@keyframes mdc-ripple-fg-opacity-out { + from { + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + to { + opacity: 0; + } +} +.test .mdc-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + will-change: transform, opacity; +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} +.test .mdc-button .mdc-button__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 1); +} +.test .mdc-button .mdc-button__ripple::after { + z-index: 0; + /* @alternate */ + z-index: var(--mdc-ripple-z-index, 0); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + top: 0; + /* @noflip */ + left: 0; + transform: scale(0); + transform-origin: center center; +} +.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { + top: var(--mdc-ripple-top, 0); + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} +.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} +.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { + animation: mdc-ripple-fg-opacity-out 150ms; + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} +.test .mdc-button .mdc-button__ripple::before, +.test .mdc-button .mdc-button__ripple::after { + top: calc(50% - 100%); + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} +.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} +.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { + background-color: #6200ee; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); +} +.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.04; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.04); +} +.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.12); +} +.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.12; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); +} +.test .mdc-button .mdc-button__ripple { + position: absolute; + box-sizing: content-box; + width: 100%; + height: 100%; + overflow: hidden; +} +.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { + top: 0; + left: 0; +} +.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, +.test .mdc-button--unelevated .mdc-button__ripple::before, +.test .mdc-button--unelevated .mdc-button__ripple::after { + background-color: #fff; + /* @alternate */ + background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { + opacity: 0.08; + /* @alternate */ + opacity: var(--mdc-ripple-hover-opacity, 0.08); +} +.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, +.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-focus-opacity, 0.24); +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { + transition: opacity 150ms linear; +} +.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, +.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { + transition-duration: 75ms; + opacity: 0.24; + /* @alternate */ + opacity: var(--mdc-ripple-press-opacity, 0.24); +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'sass' syntax): css 2`] = ` ".test .mdc-touch-target-wrapper { display: inline; } @@ -1242125,9 +1256861,11 @@ exports[`loader should work with the "material-components-web" package without t }" `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): errors 1`] = `[]`; +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'sass' syntax): warnings 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'sass' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` [ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", @@ -1242140,419 +1256878,7 @@ Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touc ] `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): css 1`] = ` -".test .mdc-touch-target-wrapper { - display: inline; -} -.test .mdc-elevation-overlay { - position: absolute; - border-radius: inherit; - pointer-events: none; - opacity: 0; - /* @alternate */ - opacity: var(--mdc-elevation-overlay-opacity, 0); - transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); - background-color: #fff; - /* @alternate */ - background-color: var(--mdc-elevation-overlay-color, #fff); -} -.test .mdc-button { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Roboto, sans-serif; - /* @alternate */ - font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); - font-size: 0.875rem; - /* @alternate */ - font-size: var(--mdc-typography-button-font-size, 0.875rem); - line-height: 2.25rem; - /* @alternate */ - line-height: var(--mdc-typography-button-line-height, 2.25rem); - font-weight: 500; - /* @alternate */ - font-weight: var(--mdc-typography-button-font-weight, 500); - letter-spacing: 0.0892857143em; - /* @alternate */ - letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); - text-decoration: none; - /* @alternate */ - text-decoration: var(--mdc-typography-button-text-decoration, none); - text-transform: uppercase; - /* @alternate */ - text-transform: var(--mdc-typography-button-text-transform, uppercase); - padding: 0 8px 0 8px; - /* @alternate */ - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - min-width: 64px; - border: none; - outline: none; - /* @alternate */ - line-height: inherit; - user-select: none; - -webkit-appearance: none; - overflow: visible; - vertical-align: middle; - border-radius: 4px; - /* @alternate */ - border-radius: var(--mdc-shape-small, 4px); - height: 36px; -} -.test .mdc-button .mdc-elevation-overlay { - width: 100%; - height: 100%; - top: 0; - /* @noflip */ - left: 0; -} -.test .mdc-button::-moz-focus-inner { - padding: 0; - border: 0; -} -.test .mdc-button:active { - outline: none; -} -.test .mdc-button:hover { - cursor: pointer; -} -.test .mdc-button:disabled { - cursor: default; - pointer-events: none; -} -.test .mdc-button .mdc-button__ripple { - border-radius: 4px; - /* @alternate */ - border-radius: var(--mdc-shape-small, 4px); -} -.test .mdc-button:not(:disabled) { - background-color: transparent; -} -.test .mdc-button:disabled { - background-color: transparent; -} -.test .mdc-button .mdc-button__icon { - /* @noflip */ - margin-left: 0; - /* @noflip */ - margin-right: 8px; - display: inline-block; - width: 18px; - height: 18px; - font-size: 18px; - vertical-align: top; -} -[dir=rtl] .test .mdc-button .mdc-button__icon, .test .mdc-button .mdc-button__icon[dir=rtl] { - /* @noflip */ - margin-left: 8px; - /* @noflip */ - margin-right: 0; -} -.test .mdc-button .mdc-button__touch { - position: absolute; - top: 50%; - right: 0; - height: 48px; - left: 0; - transform: translateY(-50%); -} -.test .mdc-button:not(:disabled) { - color: #6200ee; - /* @alternate */ - color: var(--mdc-theme-primary, #6200ee); -} -.test .mdc-button:disabled { - color: rgba(0, 0, 0, 0.38); -} -.test .mdc-button__label + .mdc-button__icon { - /* @noflip */ - margin-left: 8px; - /* @noflip */ - margin-right: 0; -} -[dir=rtl] .test .mdc-button__label + .mdc-button__icon, .test .mdc-button__label + .mdc-button__icon[dir=rtl] { - /* @noflip */ - margin-left: 0; - /* @noflip */ - margin-right: 8px; -} -.test svg.mdc-button__icon { - fill: currentColor; -} -.test .mdc-button--raised .mdc-button__icon, -.test .mdc-button--unelevated .mdc-button__icon, -.test .mdc-button--outlined .mdc-button__icon { - /* @noflip */ - margin-left: -4px; - /* @noflip */ - margin-right: 8px; -} -[dir=rtl] .test .mdc-button--raised .mdc-button__icon, .test .mdc-button--raised .mdc-button__icon[dir=rtl], -[dir=rtl] .test .mdc-button--unelevated .mdc-button__icon, -.test .mdc-button--unelevated .mdc-button__icon[dir=rtl], -[dir=rtl] .test .mdc-button--outlined .mdc-button__icon, -.test .mdc-button--outlined .mdc-button__icon[dir=rtl] { - /* @noflip */ - margin-left: 8px; - /* @noflip */ - margin-right: -4px; -} -.test .mdc-button--raised .mdc-button__label + .mdc-button__icon, -.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, -.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon { - /* @noflip */ - margin-left: 8px; - /* @noflip */ - margin-right: -4px; -} -[dir=rtl] .test .mdc-button--raised .mdc-button__label + .mdc-button__icon, .test .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], -[dir=rtl] .test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, -.test .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], -[dir=rtl] .test .mdc-button--outlined .mdc-button__label + .mdc-button__icon, -.test .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { - /* @noflip */ - margin-left: -4px; - /* @noflip */ - margin-right: 8px; -} -.test .mdc-button--raised, -.test .mdc-button--unelevated { - padding: 0 16px 0 16px; -} -.test .mdc-button--raised:not(:disabled), -.test .mdc-button--unelevated:not(:disabled) { - background-color: #6200ee; - /* @alternate */ - background-color: var(--mdc-theme-primary, #6200ee); -} -.test .mdc-button--raised:not(:disabled), -.test .mdc-button--unelevated:not(:disabled) { - color: #fff; - /* @alternate */ - color: var(--mdc-theme-on-primary, #fff); -} -.test .mdc-button--raised:disabled, -.test .mdc-button--unelevated:disabled { - background-color: rgba(0, 0, 0, 0.12); -} -.test .mdc-button--raised:disabled, -.test .mdc-button--unelevated:disabled { - color: rgba(0, 0, 0, 0.38); -} -.test .mdc-button--raised { - /* @alternate */ - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); -} -.test .mdc-button--raised:hover, .test .mdc-button--raised:focus { - /* @alternate */ - box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); -} -.test .mdc-button--raised:active { - /* @alternate */ - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); -} -.test .mdc-button--raised:disabled { - /* @alternate */ - box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); -} -.test .mdc-button--outlined { - padding: 0 15px 0 15px; - border-width: 1px; - border-style: solid; -} -.test .mdc-button--outlined .mdc-button__ripple { - top: -1px; - left: -1px; - border: 1px solid transparent; -} -.test .mdc-button--outlined .mdc-button__touch { - left: -1px; - width: calc(100% + 2 * 1px); -} -.test .mdc-button--outlined:not(:disabled) { - border-color: rgba(0, 0, 0, 0.12); -} -.test .mdc-button--outlined:disabled { - border-color: rgba(0, 0, 0, 0.12); -} -.test .mdc-button--touch { - margin-top: 6px; - margin-bottom: 6px; -} -@keyframes mdc-ripple-fg-radius-in { - from { - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); - } - to { - transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); - } -} -@keyframes mdc-ripple-fg-opacity-in { - from { - animation-timing-function: linear; - opacity: 0; - } - to { - opacity: var(--mdc-ripple-fg-opacity, 0); - } -} -@keyframes mdc-ripple-fg-opacity-out { - from { - animation-timing-function: linear; - opacity: var(--mdc-ripple-fg-opacity, 0); - } - to { - opacity: 0; - } -} -.test .mdc-button { - --mdc-ripple-fg-size: 0; - --mdc-ripple-left: 0; - --mdc-ripple-top: 0; - --mdc-ripple-fg-scale: 1; - --mdc-ripple-fg-translate-end: 0; - --mdc-ripple-fg-translate-start: 0; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - will-change: transform, opacity; -} -.test .mdc-button .mdc-button__ripple::before, -.test .mdc-button .mdc-button__ripple::after { - position: absolute; - border-radius: 50%; - opacity: 0; - pointer-events: none; - content: ""; -} -.test .mdc-button .mdc-button__ripple::before { - transition: opacity 15ms linear, background-color 15ms linear; - z-index: 1; - /* @alternate */ - z-index: var(--mdc-ripple-z-index, 1); -} -.test .mdc-button .mdc-button__ripple::after { - z-index: 0; - /* @alternate */ - z-index: var(--mdc-ripple-z-index, 0); -} -.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { - transform: scale(var(--mdc-ripple-fg-scale, 1)); -} -.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { - top: 0; - /* @noflip */ - left: 0; - transform: scale(0); - transform-origin: center center; -} -.test .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { - top: var(--mdc-ripple-top, 0); - /* @noflip */ - left: var(--mdc-ripple-left, 0); -} -.test .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { - animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; -} -.test .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { - animation: mdc-ripple-fg-opacity-out 150ms; - transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); -} -.test .mdc-button .mdc-button__ripple::before, -.test .mdc-button .mdc-button__ripple::after { - top: calc(50% - 100%); - /* @noflip */ - left: calc(50% - 100%); - width: 200%; - height: 200%; -} -.test .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { - width: var(--mdc-ripple-fg-size, 100%); - height: var(--mdc-ripple-fg-size, 100%); -} -.test .mdc-button .mdc-button__ripple::before, .test .mdc-button .mdc-button__ripple::after { - background-color: #6200ee; - /* @alternate */ - background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); -} -.test .mdc-button:hover .mdc-button__ripple::before, .test .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { - opacity: 0.04; - /* @alternate */ - opacity: var(--mdc-ripple-hover-opacity, 0.04); -} -.test .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { - transition-duration: 75ms; - opacity: 0.12; - /* @alternate */ - opacity: var(--mdc-ripple-focus-opacity, 0.12); -} -.test .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { - transition: opacity 150ms linear; -} -.test .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { - transition-duration: 75ms; - opacity: 0.12; - /* @alternate */ - opacity: var(--mdc-ripple-press-opacity, 0.12); -} -.test .mdc-button.mdc-ripple-upgraded { - --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); -} -.test .mdc-button .mdc-button__ripple { - position: absolute; - box-sizing: content-box; - width: 100%; - height: 100%; - overflow: hidden; -} -.test .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { - top: 0; - left: 0; -} -.test .mdc-button--raised .mdc-button__ripple::before, .test .mdc-button--raised .mdc-button__ripple::after, -.test .mdc-button--unelevated .mdc-button__ripple::before, -.test .mdc-button--unelevated .mdc-button__ripple::after { - background-color: #fff; - /* @alternate */ - background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); -} -.test .mdc-button--raised:hover .mdc-button__ripple::before, .test .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before, -.test .mdc-button--unelevated:hover .mdc-button__ripple::before, -.test .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { - opacity: 0.08; - /* @alternate */ - opacity: var(--mdc-ripple-hover-opacity, 0.08); -} -.test .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .test .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before, -.test .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, -.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { - transition-duration: 75ms; - opacity: 0.24; - /* @alternate */ - opacity: var(--mdc-ripple-focus-opacity, 0.24); -} -.test .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after, -.test .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { - transition: opacity 150ms linear; -} -.test .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after, -.test .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { - transition-duration: 75ms; - opacity: 0.24; - /* @alternate */ - opacity: var(--mdc-ripple-press-opacity, 0.24); -} -.test .mdc-button--raised.mdc-ripple-upgraded, -.test .mdc-button--unelevated.mdc-ripple-upgraded { - --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); -}" -`; - -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): errors 1`] = `[]`; - -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern' API, 'scss' syntax): warnings 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'sass' syntax): warnings 2`] = ` [ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", @@ -1242565,7 +1256891,7 @@ Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touc ] `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): css 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 1`] = ` ".test .mdc-touch-target-wrapper { display: inline; } @@ -1242975,22 +1257301,7 @@ exports[`loader should work with the "material-components-web" package without t }" `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): errors 1`] = `[]`; - -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'sass' syntax): warnings 1`] = ` -[ - "ModuleWarning: Module Warning (from ../src/cjs.js): -Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", - "ModuleWarning: Module Warning (from ../src/cjs.js): -Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", - "ModuleWarning: Module Warning (from ../src/cjs.js): -Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", - "ModuleWarning: Module Warning (from ../src/cjs.js): -Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", -] -`; - -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): css 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'scss' syntax): css 2`] = ` ".test .mdc-touch-target-wrapper { display: inline; } @@ -1243400,9 +1257711,24 @@ exports[`loader should work with the "material-components-web" package without t }" `; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 1`] = `[]`; -exports[`loader should work with the "material-components-web" package without the "includePaths" option ('dart-sass', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'scss' syntax): errors 2`] = `[]`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 1`] = ` +[ + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 47, column 10 of file:///node_modules/@material/typography/_typography.scss:47:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 51, column 10 of file:///node_modules/@material/typography/_typography.scss:51:10:", + "ModuleWarning: Module Warning (from ../src/cjs.js): +Deprecation Warning on line 89, column 26 of file:///node_modules/@material/touch-target/_touch-target.scss:89:26:", +] +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option ('sass-embedded', 'modern-compiler' API, 'scss' syntax): warnings 2`] = ` [ "ModuleWarning: Module Warning (from ../src/cjs.js): Deprecation Warning on line 47, column 10 of file:///node_modules/@material/theme/_theme-color.scss:47:10:", diff --git a/test/helpers/getCodeFromSass.js b/test/helpers/getCodeFromSass.js index 4fda9327..b39ca24d 100644 --- a/test/helpers/getCodeFromSass.js +++ b/test/helpers/getCodeFromSass.js @@ -33,25 +33,31 @@ async function getCodeFromSass(testId, options, context = {}) { sassOptions.indentedSyntax = isSass; } - if (loaderOptions.additionalData) { - sassOptions.data = `$prepended-data: hotpink${ - isIndentedSyntax ? "\n" : ";" - }\n${fs.readFileSync(path.resolve(__dirname, "..", testId), "utf8")}`; - } else if (isModernAPI) { - const URL = pathToFileURL(path.resolve(__dirname, "..", testId)); + const URL = pathToFileURL(path.resolve(__dirname, "..", testId)); + if (isModernAPI) { sassOptions.url = URL; - sassOptions.data = fs.readFileSync(URL).toString(); } else { sassOptions.file = path.resolve(__dirname, "..", testId); } + sassOptions.data = fs.readFileSync(URL).toString(); + + if (typeof loaderOptions.additionalData === "string") { + sassOptions.data = `$prepended-data: hotpink${ + isIndentedSyntax ? "\n" : ";" + }\n${sassOptions.data}`; + } else if (typeof loaderOptions.additionalData === "function") { + sassOptions.data = await loaderOptions.additionalData(sassOptions.data, {}); + } + if (isModernAPI) { const loaderContext = { addDependency() {}, addContextDependency() {}, addMissingDependency() {}, fs, + resourcePath: path.resolve(__dirname, "..", "scss", "language.scss"), }; const getResolveContext = () => { @@ -920,6 +926,7 @@ async function getCodeFromSass(testId, options, context = {}) { ) .replace(/^package-with-exports$/, pathToSassPackageWithExportsFields) .replace(/^file:\/\/\/language/, pathToLanguage) + .replace(/^file:\/\/\/\/.+\/language\..+/, pathToLanguage) .replace(/^\/sass\/language.sass/, pathToLanguage) .replace(/^\/scss\/language.scss/, pathToLanguage) .replace(/^file:\/\/\/scss\/language.scss/, pathToLanguage) diff --git a/test/loader.test.js b/test/loader.test.js index 57210527..aef277d1 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -22,8 +22,6 @@ const syntaxStyles = ["scss", "sass"]; describe("loader", () => { implementations.forEach((item) => { const { name: implementationName, api, implementation } = item; - // TODO fix me https://github.com/webpack-contrib/sass-loader/issues/774 - const isSassEmbedded = implementationName === "sass-embedded"; const isNodeSass = implementationName === "node-sass"; const isModernAPI = api === "modern" || api === "modern-compiler"; @@ -943,42 +941,45 @@ describe("loader", () => { delete process.env.SASS_PATH; }); - it(`should respect resolving from "process.cwd()" ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { - const testId = getTestId("process-cwd", syntax); - const options = { - implementation, - api, - }; - const compiler = getCompiler(testId, { loader: { options } }); - const stats = await compile(compiler); - const codeFromBundle = getCodeFromBundle(stats, compiler); - const codeFromSass = await getCodeFromSass(testId, options); + // Modern API doesn't support resolving from `process.cwd()` + if (!isModernAPI) { + it(`should respect resolving from "process.cwd()" ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { + const testId = getTestId("process-cwd", syntax); + const options = { + implementation, + api, + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = await getCodeFromSass(testId, options); - expect(codeFromBundle.css).toBe(codeFromSass.css); - expect(codeFromBundle.css).toMatchSnapshot("css"); - expect(getWarnings(stats)).toMatchSnapshot("warnings"); - expect(getErrors(stats)).toMatchSnapshot("errors"); - }); + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); - it(`should respect resolving directory with the "index" file from "process.cwd()" ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { - const testId = getTestId( - "process-cwd-with-index-file-inside-directory", - syntax, - ); - const options = { - implementation, - api, - }; - const compiler = getCompiler(testId, { loader: { options } }); - const stats = await compile(compiler); - const codeFromBundle = getCodeFromBundle(stats, compiler); - const codeFromSass = await getCodeFromSass(testId, options); + it(`should respect resolving directory with the "index" file from "process.cwd()" ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { + const testId = getTestId( + "process-cwd-with-index-file-inside-directory", + syntax, + ); + const options = { + implementation, + api, + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = await getCodeFromSass(testId, options); - expect(codeFromBundle.css).toBe(codeFromSass.css); - expect(codeFromBundle.css).toMatchSnapshot("css"); - expect(getWarnings(stats)).toMatchSnapshot("warnings"); - expect(getErrors(stats)).toMatchSnapshot("errors"); - }); + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + } it(`should work with a package with "sass" and "exports" fields ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { const testId = getTestId("import-package-with-exports", syntax); @@ -1200,6 +1201,45 @@ describe("loader", () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); + it(`should work prefer \`loadPaths\` over \`SASS_PATH\` ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { + process.env.SASS_PATH = + process.platform === "win32" + ? `${path.resolve("test", syntax, "sass_path")};${path.resolve( + __dirname, + "outside", + "my-pkg-env", + )}` + : `${path.resolve("test", syntax, "sass_path")}:${path.resolve( + __dirname, + "outside", + "my-pkg-env", + )}`; + + const testId = getTestId("env-and-paths", syntax); + const options = { + implementation, + api, + sassOptions: isModernAPI + ? { loadPaths: [path.resolve(__dirname, "outside", "my-pkg-path")] } + : { + includePaths: [ + path.resolve(__dirname, "outside", "my-pkg-path"), + ], + }, + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = await getCodeFromSass(testId, options); + + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + + delete process.env.SASS_PATH; + }); + if ( implementationName === "dart-sass" || implementationName === "sass-embedded" @@ -1774,87 +1814,79 @@ describe("loader", () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); - if (!isSassEmbedded) { - it(`should work with the "material-components-web" package ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { - const testId = getTestId("import-material-components-web", syntax); - const options = { - implementation, - api, - sassOptions: isModernAPI - ? { loadPaths: ["node_modules"] } - : { includePaths: ["node_modules"] }, - }; - const compiler = getCompiler(testId, { loader: { options } }); - const stats = await compile(compiler); - const codeFromBundle = getCodeFromBundle(stats, compiler); - const codeFromSass = await getCodeFromSass(testId, options); - - expect(codeFromBundle.css).toBe(codeFromSass.css); - expect(codeFromBundle.css).toMatchSnapshot("css"); - expect(getWarnings(stats)).toMatchSnapshot("warnings"); - expect(getErrors(stats)).toMatchSnapshot("errors"); - }); - } + it(`should work with the "material-components-web" package ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { + const testId = getTestId("import-material-components-web", syntax); + const options = { + implementation, + api, + sassOptions: isModernAPI + ? { loadPaths: ["node_modules"] } + : { includePaths: ["node_modules"] }, + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = await getCodeFromSass(testId, options); - if (!isSassEmbedded) { - it(`should work with the "material-components-web" package without the "includePaths" option ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { - const testId = getTestId("import-material-components-web", syntax); - const options = { - implementation, - api, - }; - const compiler = getCompiler(testId, { loader: { options } }); - const stats = await compile(compiler); - const codeFromBundle = getCodeFromBundle(stats, compiler); - const codeFromSass = await getCodeFromSass(testId, options); - - expect(codeFromBundle.css).toBe(codeFromSass.css); - expect(codeFromBundle.css).toMatchSnapshot("css"); - expect(getWarnings(stats)).toMatchSnapshot("warnings"); - expect(getErrors(stats)).toMatchSnapshot("errors"); - }); - } + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); - if (!isSassEmbedded) { - it(`should work with the "material-components-web" package ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { - const testId = getTestId("use-material-components-web", syntax); - const options = { - implementation, - api, - sassOptions: isModernAPI - ? { loadPaths: ["node_modules"] } - : { includePaths: ["node_modules"] }, - }; - const compiler = getCompiler(testId, { loader: { options } }); - const stats = await compile(compiler); - const codeFromBundle = getCodeFromBundle(stats, compiler); - const codeFromSass = await getCodeFromSass(testId, options); - - expect(codeFromBundle.css).toBe(codeFromSass.css); - expect(codeFromBundle.css).toMatchSnapshot("css"); - expect(getWarnings(stats)).toMatchSnapshot("warnings"); - expect(getErrors(stats)).toMatchSnapshot("errors"); - }); - } + it(`should work with the "material-components-web" package without the "includePaths" option ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { + const testId = getTestId("import-material-components-web", syntax); + const options = { + implementation, + api, + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = await getCodeFromSass(testId, options); - if (!isSassEmbedded) { - it(`should work with the "material-components-web" package without the "includePaths" option ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { - const testId = getTestId("use-material-components-web", syntax); - const options = { - implementation, - api, - }; - const compiler = getCompiler(testId, { loader: { options } }); - const stats = await compile(compiler); - const codeFromBundle = getCodeFromBundle(stats, compiler); - const codeFromSass = await getCodeFromSass(testId, options); - - expect(codeFromBundle.css).toBe(codeFromSass.css); - expect(codeFromBundle.css).toMatchSnapshot("css"); - expect(getWarnings(stats)).toMatchSnapshot("warnings"); - expect(getErrors(stats)).toMatchSnapshot("errors"); - }); - } + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + + it(`should work with the "material-components-web" package ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { + const testId = getTestId("use-material-components-web", syntax); + const options = { + implementation, + api, + sassOptions: isModernAPI + ? { loadPaths: ["node_modules"] } + : { includePaths: ["node_modules"] }, + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = await getCodeFromSass(testId, options); + + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + + it(`should work with the "material-components-web" package without the "includePaths" option ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { + const testId = getTestId("use-material-components-web", syntax); + const options = { + implementation, + api, + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = await getCodeFromSass(testId, options); + + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); it(`should import .import.${syntax} files ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => { const testId = getTestId("import-index-import", syntax); diff --git a/test/outside/my-pkg-env/my-pkg-module.scss b/test/outside/my-pkg-env/my-pkg-module.scss new file mode 100644 index 00000000..e8afa8a1 --- /dev/null +++ b/test/outside/my-pkg-env/my-pkg-module.scss @@ -0,0 +1,3 @@ +.my-pkg-env { + background: hotpink; +} diff --git a/test/outside/my-pkg-env/package.json b/test/outside/my-pkg-env/package.json new file mode 100644 index 00000000..cbd070ab --- /dev/null +++ b/test/outside/my-pkg-env/package.json @@ -0,0 +1,3 @@ +{ + "main": "./module.scss" +} diff --git a/test/outside/my-pkg-path/my-pkg-module.scss b/test/outside/my-pkg-path/my-pkg-module.scss new file mode 100644 index 00000000..94f06cf4 --- /dev/null +++ b/test/outside/my-pkg-path/my-pkg-module.scss @@ -0,0 +1,3 @@ +.my-pkg-path { + background: hotpink; +} diff --git a/test/outside/my-pkg-path/package.json b/test/outside/my-pkg-path/package.json new file mode 100644 index 00000000..cbd070ab --- /dev/null +++ b/test/outside/my-pkg-path/package.json @@ -0,0 +1,3 @@ +{ + "main": "./module.scss" +} diff --git a/test/sass/env-and-paths.sass b/test/sass/env-and-paths.sass new file mode 100644 index 00000000..4376d14f --- /dev/null +++ b/test/sass/env-and-paths.sass @@ -0,0 +1 @@ +@use 'my-pkg-module' diff --git a/test/scss/env-and-paths.scss b/test/scss/env-and-paths.scss new file mode 100644 index 00000000..a5191434 --- /dev/null +++ b/test/scss/env-and-paths.scss @@ -0,0 +1 @@ +@use 'my-pkg-module';