_shadow-dom.scss 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491
  1. //
  2. // Copyright 2020 Google Inc.
  3. //
  4. // Permission is hereby granted, free of charge, to any person obtaining a copy
  5. // of this software and associated documentation files (the "Software"), to deal
  6. // in the Software without restriction, including without limitation the rights
  7. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8. // copies of the Software, and to permit persons to whom the Software is
  9. // furnished to do so, subject to the following conditions:
  10. //
  11. // The above copyright notice and this permission notice shall be included in
  12. // all copies or substantial portions of the Software.
  13. //
  14. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  19. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  20. // THE SOFTWARE.
  21. //
  22. @use 'sass:selector';
  23. @use 'sass:string';
  24. @use 'sass:list';
  25. @use 'sass:map';
  26. @use 'sass:meta';
  27. /// Global variable used to conditionally emit CSS selector fallback
  28. /// declarations in addition to CSS custom property overrides for IE11 support.
  29. /// Use `enable-css-selector-fallback-declarations()` mixin to configure this
  30. /// flag.
  31. ///
  32. /// @example
  33. ///
  34. /// @include shadow-dom.enable-css-selector-fallback-declarations();
  35. /// @include foo-bar-theme.theme($theme);
  36. ///
  37. /// CSS output =>
  38. ///
  39. /// --foo-bar: red;
  40. ///
  41. /// // Fallback declarations for IE11 support
  42. /// .mdc-foo-bar__baz {
  43. /// color: red;
  44. /// }
  45. $css-selector-fallback-declarations: false;
  46. /// Enables CSS selector fallback declarations for IE11 support by setting
  47. /// global variable `$css-selector-fallback-declarations` to true. Call this
  48. /// mixin before theme mixin call.
  49. /// @param {Boolean} $enable Set to `true` to emit CSS selector fallback
  50. /// declarations.
  51. /// @example
  52. /// @include shadow-dom.enable-css-selector-fallback-declarations()
  53. /// @include foo-bar-theme.theme($theme);
  54. @mixin enable-css-selector-fallback-declarations($enable) {
  55. $css-selector-fallback-declarations: $enable !global;
  56. }
  57. $_host: ':host';
  58. $_host-parens: ':host(';
  59. $_end-parens: ')';
  60. /// @deprecated - Use selector-ext.append-strict() instead:
  61. ///
  62. /// @example - scss
  63. /// :host([outlined]), :host, :host button {
  64. /// @include selector-ext.append-strict(&, ':hover') {
  65. /// --my-custom-prop: blue;
  66. /// }
  67. /// }
  68. ///
  69. /// @example - css
  70. /// :host([outlined]:hover), :host(:hover), :host button:hover {
  71. /// --my-custom-prop: blue;
  72. /// }
  73. ///
  74. /// @example - scss
  75. /// :host([outlined]), :host, :host button {
  76. /// @at-root {
  77. /// #{selector-ext.append-strict(&, ':hover')},
  78. /// & {
  79. /// --my-custom-prop: blue;
  80. /// }
  81. /// }
  82. /// }
  83. ///
  84. /// @example - css
  85. /// :host([outlined]:hover), :host(:hover), :host button:hover,
  86. /// :host([outlined]), :host, :host button {
  87. /// --my-custom-prop: blue;
  88. /// }
  89. ///
  90. /// Given one or more selectors, this mixin will fix any invalid `:host` parent
  91. /// nesting by adding parentheses or inserting the nested selector into the
  92. /// parent `:host()` selector's parentheses. The content block provided to
  93. /// this mixin
  94. /// will be projected under the new selectors.
  95. ///
  96. /// @example
  97. /// :host([outlined]), :host, :host button {
  98. /// @include host-aware(selector.append(&, ':hover'), &)) {
  99. /// --my-custom-prop: blue;
  100. /// }
  101. /// }
  102. ///
  103. /// will output (but with selectors on a single line):
  104. /// :host([outlined]:hover), // Appended :hover argument
  105. /// :host(:hover),
  106. /// :host button:hover,
  107. /// :host([outlined]), // Ampersand argument
  108. /// :host,
  109. /// :host button, {
  110. /// --my-custom-prop: blue;
  111. /// };
  112. ///
  113. /// @param {List} $selector-args - One or more selectors to be fixed for invalid
  114. /// :host syntax.
  115. @mixin host-aware($selector-args...) {
  116. @each $selector in $selector-args {
  117. @if not _is-sass-selector($selector) {
  118. @error 'mdc-theme: host-aware() expected a sass:selector value type but received #{$selector}';
  119. }
  120. }
  121. @if not _share-common-parent($selector-args...) {
  122. @error 'mdc-theme: host-aware() requires all selectors to use the parent selector (&)';
  123. }
  124. $selectors: _flatten-selectors($selector-args...);
  125. $processed-selectors: ();
  126. @each $selector in $selectors {
  127. $first-selector: list.nth($selector, 1);
  128. @if _host-selector-needs-to-be-fixed($first-selector) {
  129. $selector: list.set-nth(
  130. $selector,
  131. 1,
  132. _fix-host-selector($first-selector)
  133. );
  134. $processed-selectors: list.append(
  135. $processed-selectors,
  136. $selector,
  137. $separator: comma
  138. );
  139. } @else {
  140. // Either not in :host, or there are more selectors following the :host
  141. // and nothing needs to be modified. The content can be placed within the
  142. // original selector
  143. $processed-selectors: list.append(
  144. $processed-selectors,
  145. $selector,
  146. $separator: comma
  147. );
  148. }
  149. }
  150. @if list.length($processed-selectors) > 0 {
  151. @at-root {
  152. #{$processed-selectors} {
  153. @content;
  154. }
  155. }
  156. }
  157. }
  158. /// Determines whether a selector needs to be processed.
  159. /// Selectors that need to be processed would include anything of the format
  160. /// `^:host(\(.*\))?.+` e.g. `:host([outlined]):hover` or `:host:hover` but not
  161. /// `:host` or `:host([outlined])`
  162. ///
  163. /// @param {String} $selector - Selector string to be processed
  164. /// @return {Boolean} Whether or not the given selector string needs to be fixed
  165. /// for an invalid :host selector
  166. @function _host-selector-needs-to-be-fixed($selector) {
  167. $host-index: string.index($selector, $_host);
  168. $begins-with-host: $host-index == 1;
  169. @if not $begins-with-host {
  170. @return false;
  171. }
  172. $_host-parens-index: _get-last-end-parens-index($selector);
  173. $has-parens: $_host-parens-index != null;
  174. @if $has-parens {
  175. // e.g. :host(.inside).after -> needs to be fixed
  176. // :host(.inside) -> does not need to be fixed
  177. $end-parens-index: string.index($selector, $_end-parens);
  178. $content-after-parens: string.slice($selector, $end-parens-index + 1);
  179. $has-content-after-parens: string.length($selector) > $end-parens-index;
  180. @return $has-content-after-parens;
  181. } @else {
  182. // e.g. :host.after -> needs to be fixed
  183. // :host -> does not need to be fixed
  184. $has-content-after-host: $selector != $_host;
  185. @return $has-content-after-host;
  186. }
  187. }
  188. /// Flattens a list of selectors
  189. ///
  190. /// @param {List} $selector-args - A list of selectors to flatten
  191. /// @return {List} Flattened selectors
  192. @function _flatten-selectors($selector-args...) {
  193. $selectors: ();
  194. @each $selector-list in $selector-args {
  195. $selectors: list.join($selectors, $selector-list);
  196. }
  197. @return $selectors;
  198. }
  199. /// Fixes an invalid `:host` selector of the format `^:host(\(.*\))?.+` to
  200. /// `:host(.+)`
  201. /// @example
  202. /// @debug _fix-host-selector(':host:hover') // :host(:hover)
  203. /// @debug _fix-host-selector(':host([outlined]):hover) // :host([outlined]:hover)
  204. ///
  205. /// @param {String} $selector - Selector string to be fixed that follows the
  206. /// following format: `^:host(\(.*\))?.+`
  207. /// @return {String} Fixed host selector.
  208. @function _fix-host-selector($selector) {
  209. $_host-parens-index: string.index($selector, $_host-parens);
  210. $has-parens: $_host-parens-index != null;
  211. $new-host-inside: '';
  212. @if $has-parens {
  213. // e.g. :host(.inside).after -> :host(.inside.after)
  214. $end-parens-index: _get-last-end-parens-index($selector);
  215. $inside-host-parens: string.slice(
  216. $selector,
  217. string.length($_host-parens) + 1,
  218. $end-parens-index - 1
  219. );
  220. $after-host-parens: string.slice($selector, $end-parens-index + 1);
  221. $new-host-inside: $inside-host-parens + $after-host-parens;
  222. } @else {
  223. // e.g. :host.after -> :host(.after)
  224. $new-host-inside: string.slice($selector, string.length($_host) + 1);
  225. }
  226. @return ':host(#{$new-host-inside})';
  227. }
  228. /// Returns the index of the final occurrence of the end-parenthesis in the
  229. /// given string or null if there is none.
  230. ///
  231. /// @param {String} $string - The string to be searched
  232. /// @return {null|Number}
  233. @function _get-last-end-parens-index($string) {
  234. $index: string.length($string);
  235. @while $index > 0 {
  236. $char: string.slice($string, $index, $index);
  237. @if $char == $_end-parens {
  238. @return $index;
  239. }
  240. $index: $index - 1;
  241. }
  242. @return null;
  243. }
  244. /// Returns true if the provided List of Sass selectors share a common parent
  245. /// selector. This function ensures that the parent selector (`&`) is used with
  246. /// `host-aware()`.
  247. ///
  248. /// @example
  249. /// _share-common-parent(
  250. /// ('.foo:hover'), ('.foo' '.bar'), ('.baz' '.foo')
  251. /// ); // true
  252. ///
  253. /// _share-common-parent(
  254. /// ('.foo:hover'), ('.foo' '.bar'), ('.baz' '.bar')
  255. /// ); // false
  256. ///
  257. /// The purpose of this function is to make sure that a group of selectors do
  258. /// not violate Sass nesting rules. Due to the dynamic nature of `host-aware()`,
  259. /// it's possible to provide invalid selector combinations.
  260. ///
  261. /// @example
  262. /// // Valid native nesting
  263. /// :host {
  264. /// &:hover,
  265. /// .foo,
  266. /// .bar & {
  267. /// color: blue;
  268. /// }
  269. /// }
  270. /// // Valid host-aware() nesting
  271. /// :host {
  272. /// @include host-aware(
  273. /// selector.append(&, ':hover'),
  274. /// selector.nest(&, '.foo'),
  275. /// selector.nest('.bar', &),
  276. /// ) {
  277. /// color: blue;
  278. /// }
  279. /// }
  280. /// // Output
  281. /// :host(:hover),
  282. /// :host .foo,
  283. /// .bar :host {
  284. /// color: blue;
  285. /// }
  286. ///
  287. /// // Invalid use of host-aware()
  288. /// :host {
  289. /// @include host-aware(
  290. /// selector.append(&, ':hover'),
  291. /// selector.parse('.foo') // Does not share a common parent via `&`
  292. /// ) {
  293. /// color: blue;
  294. /// }
  295. /// }
  296. /// // Invalid output: no way to write this natively without using @at-root
  297. /// :host(:hover),
  298. /// .foo {
  299. /// color: blue;
  300. /// }
  301. ///
  302. /// @param {Arglist} $selector-lists - An argument list of Sass selectors.
  303. /// @return true if the selectors share a common parent selector, or false
  304. /// if not.
  305. @function _share-common-parent($selector-lists...) {
  306. // To validate, this function will extract the simple selectors from each
  307. // complex selector and compare them to each other. Every complex selector
  308. // should share at least one common simple parent selector.
  309. //
  310. // We do this by keeping track of each simple selector and if they're present
  311. // within a complex selector. At the end of checking all the selectors, at
  312. // least one of simple selectors should have been seen for each one of the
  313. // complex selectors.
  314. //
  315. // Each selector list index needs to track its own selector count Map. This is
  316. // because each comma-separated list has its own root parent selector that
  317. // we're looking for:
  318. // .foo,
  319. // .bar {
  320. // &:hover,
  321. // .baz & { ... }
  322. // }
  323. // ('.foo:hover', '.bar:hover'), ('.baz' '.foo', '.baz' '.bar')
  324. //
  325. // In the first index of each selector list, we're looking for the parent
  326. // ".foo". In the second index we're looking for the parent ".bar".
  327. $selector-counts-by-index: ();
  328. $expected-counts-by-index: ();
  329. @each $selector-list in $selector-lists {
  330. @each $complex-selector in $selector-list {
  331. $selector-list-index: list.index($selector-list, $complex-selector);
  332. $selector-count-map: map.get(
  333. $selector-counts-by-index,
  334. $selector-list-index
  335. );
  336. @if not $selector-count-map {
  337. $selector-count-map: ();
  338. }
  339. $expected-count: map.get($expected-counts-by-index, $selector-list-index);
  340. @if not $expected-count {
  341. $expected-count: 0;
  342. }
  343. $simple-selectors-set: ();
  344. @each $selector in $complex-selector {
  345. @each $simple-selector in selector.simple-selectors($selector) {
  346. // Don't use list.join() because there may be duplicate selectors
  347. // within the complex selector. We want to treat $simple-selectors-set
  348. // like a Set where there are no duplicate values so that we don't
  349. // mess up our count by counting one simple selector too many times
  350. // for a single complex selector.
  351. @if not list.index($simple-selectors-set, $simple-selector) {
  352. $simple-selectors-set: list.append(
  353. $simple-selectors-set,
  354. $simple-selector
  355. );
  356. }
  357. }
  358. }
  359. // Now that we have a "Set" of simple selectors for this complex
  360. // selector, we can go through each one and update the selector count Map.
  361. @each $simple-selector in $simple-selectors-set {
  362. $count: map.get($selector-count-map, $simple-selector);
  363. @if $count {
  364. $count: $count + 1;
  365. } @else {
  366. $count: 1;
  367. }
  368. $selector-count-map: map.merge(
  369. $selector-count-map,
  370. (
  371. $simple-selector: $count,
  372. )
  373. );
  374. }
  375. $selector-counts-by-index: map.merge(
  376. $selector-counts-by-index,
  377. (
  378. $selector-list-index: $selector-count-map,
  379. )
  380. );
  381. $expected-counts-by-index: map.merge(
  382. $expected-counts-by-index,
  383. (
  384. $selector-list-index: $expected-count + 1,
  385. )
  386. );
  387. }
  388. }
  389. @each $index, $selector-count-map in $selector-counts-by-index {
  390. // If one of the selectors was seen the expected number of times, then we
  391. // can reasonably assume that each selector shares a common parent.
  392. // Verify for each index if there are multiple parents.
  393. $found-parent: false;
  394. @each $selector, $count in $selector-count-map {
  395. $expected-count: map.get($expected-counts-by-index, $index);
  396. @if $count == $expected-count {
  397. $found-parent: true;
  398. }
  399. }
  400. @if not $found-parent {
  401. @return false;
  402. }
  403. }
  404. // A common parent was found for each selector, or there were no selectors
  405. // provided and we did not enter any for loops.
  406. @return true;
  407. }
  408. /// Returns true if the value is a Sass selector type.
  409. ///
  410. /// Selector types are a 2D List: a comma-separated list (the selector list)
  411. /// that contains space-separated lists (the complex selectors) that contain
  412. /// unquoted strings (the compound selectors).
  413. /// @link https://sass-lang.com/documentation/modules/selector
  414. ///
  415. /// @example
  416. /// .foo, .bar button:hover { }
  417. /// $type: ((unquote('.foo')), (unquote('.bar') unquote('button:hover')),);
  418. ///
  419. /// @param {*} $selector-list - A value to check.
  420. /// @return {Boolean} true if the value is a Sass selector, or false if not.
  421. @function _is-sass-selector($selector-list) {
  422. // For the purposes of these utility functions, we don't care if the lists
  423. // have the correct separated or if the strings are unquoted. All that
  424. // matters is that the type is a 2D array and the values are strings to
  425. // ensure "close enough" that the selector was generated by Sass.
  426. //
  427. // This function is primarily a safe-guard against an accidental string
  428. // slipping in and forgetting to use a selector.append() which would cause a
  429. // hard-to-debug problem.
  430. @if meta.type-of($selector-list) != 'list' {
  431. @return false;
  432. }
  433. // First level is the selector list: what's separated by commas
  434. // e.g. ".foo, .bar"
  435. @each $complex-selector in $selector-list {
  436. // Second level is the complex selector: what's separated by spaces
  437. // e.g. ".foo .bar"
  438. @if meta.type-of($complex-selector) != 'list' {
  439. @return false;
  440. }
  441. // Third level is the compound selector: the actual string
  442. // e.g. ".foo"
  443. @each $selector in $complex-selector {
  444. @if meta.type-of($selector) != 'string' {
  445. @return false;
  446. }
  447. }
  448. }
  449. @return true;
  450. }