From 4907496c37da4bfa0da88517bff9b2cfad236ddc Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Tue, 4 Aug 2020 20:33:21 +0300 Subject: [PATCH] fix: resolution algorithm --- src/utils.js | 6 +- test/__snapshots__/loader.test.js.snap | 1556 ++++++++++++++++++++ test/helpers/getCodeFromSass.js | 5 + test/loader.test.js | 32 + test/sass/use-material-components-web.sass | 1 + test/scss/use-material-components-web.scss | 1 + 6 files changed, 1600 insertions(+), 1 deletion(-) diff --git a/src/utils.js b/src/utils.js index 2cf720d8..e58bbd20 100644 --- a/src/utils.js +++ b/src/utils.js @@ -256,7 +256,7 @@ export default function getPossibleRequests( return [ ...new Set( [`${dirname}/_${basename}`, request].concat( - forWebpackResolver ? [url] : [] + forWebpackResolver ? [`${path.dirname(url)}/_${basename}`, url] : [] ) ), ]; @@ -391,6 +391,10 @@ function getWebpackImporter(loaderContext, implementation, includePaths) { possibleRequests: webpackPossibleRequests, }); + // console.log(originalUrl); + // console.log(needEmulateSassResolver); + // console.log(resolutionMap); + startResolving(resolutionMap) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers .catch(() => ({ file: originalUrl })) diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 222db7d9..b72e3db3 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -165215,3 +165215,1559 @@ exports[`loader should work with the "material-components-web" package (dart-sas exports[`loader should work with the "material-components-web" package (dart-sass) (scss): warnings 1`] = `Array []`; exports[`loader should work with the "material-components-web" package (dart-sass) (scss): warnings 2`] = `Array []`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (sass): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + opacity: 0; + pointer-events: none; + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-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); +} +.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; +} +.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-theme-primary, #6200ee); +} +.test .mdc-button:hover .mdc-button__ripple::before { + 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; +} +.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; +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-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-theme-on-primary, #fff); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before { + 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; +} +.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; +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: 0.24; +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (sass): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + opacity: 0; + pointer-events: none; + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-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); +} +.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; +} +.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-theme-primary, #6200ee); +} +.test .mdc-button:hover .mdc-button__ripple::before { + 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; +} +.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; +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-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-theme-on-primary, #fff); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before { + 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; +} +.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; +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: 0.24; +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (sass): errors 1`] = `Array []`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (sass): errors 2`] = `Array []`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (sass): warnings 1`] = `Array []`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (sass): warnings 2`] = `Array []`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (scss): css 1`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + opacity: 0; + pointer-events: none; + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-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); +} +.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; +} +.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-theme-primary, #6200ee); +} +.test .mdc-button:hover .mdc-button__ripple::before { + 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; +} +.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; +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-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-theme-on-primary, #fff); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before { + 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; +} +.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; +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: 0.24; +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (scss): css 2`] = ` +".test .mdc-touch-target-wrapper { + display: inline; +} +.test .mdc-elevation-overlay { + position: absolute; + border-radius: inherit; + opacity: 0; + pointer-events: none; + transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); + background-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); +} +.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; +} +.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-theme-primary, #6200ee); +} +.test .mdc-button:hover .mdc-button__ripple::before { + 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; +} +.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; +} +.test .mdc-button.mdc-ripple-upgraded { + --mdc-ripple-fg-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-theme-on-primary, #fff); +} +.test .mdc-button--raised:hover .mdc-button__ripple::before, +.test .mdc-button--unelevated:hover .mdc-button__ripple::before { + 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; +} +.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; +} +.test .mdc-button--raised.mdc-ripple-upgraded, +.test .mdc-button--unelevated.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: 0.24; +}" +`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (scss): errors 1`] = `Array []`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (scss): errors 2`] = `Array []`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (scss): warnings 1`] = `Array []`; + +exports[`loader should work with the "material-components-web" package without the "includePaths" option (dart-sass) (scss): warnings 2`] = `Array []`; diff --git a/test/helpers/getCodeFromSass.js b/test/helpers/getCodeFromSass.js index e538bff9..79a79b64 100644 --- a/test/helpers/getCodeFromSass.js +++ b/test/helpers/getCodeFromSass.js @@ -271,6 +271,10 @@ function getCodeFromSass(testId, options) { testFolder, 'node_modules/package-with-same-import/style.scss' ); + const pathToMaterial = path.resolve( + __dirname, + '../../node_modules/@material' + ); // Pseudo importer for tests function testImporter(url) { @@ -741,6 +745,7 @@ function getCodeFromSass(testId, options) { /^package-with-same-import\/style/, pathToPackageWithSameImport ) + .replace(/@material/, pathToMaterial) .replace(/^~/, testNodeModules); } diff --git a/test/loader.test.js b/test/loader.test.js index 859ba7bf..e2e9094c 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -1346,6 +1346,22 @@ describe('loader', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); + it(`should work with the "material-components-web" package without the "includePaths" option (${implementationName}) (${syntax})`, async () => { + const testId = getTestId('import-material-components-web', syntax); + const options = { + implementation: getImplementationByName(implementationName), + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = 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}) (${syntax})`, async () => { const testId = getTestId('use-material-components-web', syntax); const options = { @@ -1364,6 +1380,22 @@ describe('loader', () => { expect(getWarnings(stats)).toMatchSnapshot('warnings'); expect(getErrors(stats)).toMatchSnapshot('errors'); }); + + it(`should work with the "material-components-web" package without the "includePaths" option (${implementationName}) (${syntax})`, async () => { + const testId = getTestId('use-material-components-web', syntax); + const options = { + implementation: getImplementationByName(implementationName), + }; + const compiler = getCompiler(testId, { loader: { options } }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromSass = getCodeFromSass(testId, options); + + expect(codeFromBundle.css).toBe(codeFromSass.css); + expect(codeFromBundle.css).toMatchSnapshot('css'); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); } }); }); diff --git a/test/sass/use-material-components-web.sass b/test/sass/use-material-components-web.sass index 8980f0ee..2b3753c1 100644 --- a/test/sass/use-material-components-web.sass +++ b/test/sass/use-material-components-web.sass @@ -1,4 +1,5 @@ @use '@material/button/mixins' as button +@use '@material/elevation' .test @include button.core-styles() diff --git a/test/scss/use-material-components-web.scss b/test/scss/use-material-components-web.scss index 6146e5e5..d3fad419 100644 --- a/test/scss/use-material-components-web.scss +++ b/test/scss/use-material-components-web.scss @@ -1,4 +1,5 @@ @use '@material/button/mixins' as button; +@use '@material/elevation'; .test { @include button.core-styles();