Skip to content

Adds default styles for [popover] #17945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −0
Open

Adds default styles for [popover] #17945

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/tailwindcss/preflight.css
View file
Original file line number Diff line number Diff line change
@@ -15,6 +15,12 @@
border: 0 solid; /* 3 */
}

[popover] {
margin: auto;
background-color: transparent;
color: inherit;
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.

Unchanged files with check annotations Beta

View file
packages/@tailwindcss-postcss/src/index.test.ts
let result = await processor.process(`@import 'tailwindcss'`, { from: inputCssFilePath() })
expect(result.css.trim()).toMatchSnapshot()

Check failure on line 29 in packages/@tailwindcss-postcss/src/index.test.ts

GitHub Actions / Linux

src/index.test.ts > `@import 'tailwindcss'` is replaced with the generated CSS 

Error: Snapshot ``@import 'tailwindcss'` is replaced with the generated CSS 1` mismatched

- Expected
+ Received

  "@layer properties {
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-   *, :before, :after, ::backdrop {
+     *, :before, :after, ::backdrop {
-     --tw-font-weight: initial;
+       --tw-font-weight: initial;
-   }
+     }
- }
+   }
  }

  @layer theme {
- :root, :host {
+   :root, :host {
-   --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-   --color-black: #000;
+     --color-black: #000;
-   --text-2xl: 1.5rem;
+     --text-2xl: 1.5rem;
-   --text-2xl--line-height: calc(2 / 1.5);
+     --text-2xl--line-height: calc(2 / 1.5);
-   --font-weight-bold: 700;
+     --font-weight-bold: 700;
-   --default-font-family: var(--font-sans);
+     --default-font-family: var(--font-sans);
-   --default-mono-font-family: var(--font-mono);
+     --default-mono-font-family: var(--font-mono);
- }
+   }
  }

  @layer base {
- *, :after, :before, ::backdrop {
+   *, :after, :before, ::backdrop {
-   box-sizing: border-box;
+     box-sizing: border-box;
-   border: 0 solid;
+     border: 0 solid;
-   margin: 0;
+     margin: 0;
-   padding: 0;
+     padding: 0;
- }
+   }

- ::file-selector-button {
+   ::file-selector-button {
-   box-sizing: border-box;
+     box-sizing: border-box;
-   border: 0 solid;
+     border: 0 solid;
-   margin: 0;
+     margin: 0;
-   padding: 0;
+     padding: 0;
- }
+   }
+
+   [popover] {
+     color: inherit;
+     background-color: #0000;
+     margin: auto;
+   }

- html, :host {
+   html, :host {
-   -webkit-text-size-adjust: 100%;
+     -webkit-text-size-adjust: 100%;
-   tab-size: 4;
+     tab-size: 4;
-   line-height: 1.5;
+     line-height: 1.5;
-   font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+     font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-   font-feature-settings: var(--default-font-feature-settings, normal);
+     font-feature-settings: var(--default-font-feature-settings, normal);
-   font-variation-settings: var(--default-font-variation-settings, normal);
+     font-variation-settings: var(--default-font-variation-settings, normal);
-   -webkit-tap-highlight-color: transparent;
+     -webkit-tap-highlight-color: transparent;
- }
+   }

- hr {
+   hr {
-   height: 0;
+     height: 0;
-   color: inherit;
+     color: inherit;
-   border-top-width: 1px;
+     border-top-width: 1px;
- }
+   }

- abbr:where([title]) {
+   abbr:where([title]) {
-   -webkit-text-decoration: underline dotted;
+     -webkit-text-decoration: underline dotted;
-   text-decoration: underline dotted;
+     text-decoration: underline dotted;
- }
+   }

- h1, h2, h3, h4, h5, h6 {
+   h1, h2, h3, h4, h5, h6 {
-   font-size: inherit;
+     font-size: inherit;
-   font-weight: inherit;
+     font-weight: inherit;
- }
+   }

- a {
+   a {
-   color: inherit;
+     color: inherit;
-   -webkit-text-decoration: inherit;
+     -webkit-text-decoration: inherit;
-   -webkit-text-decoration: inherit;
+     -webkit-text-decoration: inherit;
-   -webkit-text-decoration: inherit;
+     -webkit-text-decoration: inherit;
-   text-decoration: inherit;
+     text-decoration: inherit;
- }
+   }

- b, strong {
+   b, strong {
-   fo
// Check for dependency messages
expect(result.messages).toContainEqual({
View file
packages/tailwindcss/src/index.test.ts
},
},
),
).toMatchSnapshot()

Check failure on line 139 in packages/tailwindcss/src/index.test.ts

GitHub Actions / Linux

src/index.test.ts > compiling CSS > prefix all CSS variables inside preflight 

Error: Snapshot `compiling CSS > prefix all CSS variables inside preflight 1` mismatched

- Expected
+ Received

  "@layer theme {
- :root, :host {
+   :root, :host {
-   --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+     --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-   --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+     --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-   --tw-default-font-family: var(--tw-font-sans);
+     --tw-default-font-family: var(--tw-font-sans);
-   --tw-default-mono-font-family: var(--tw-font-mono);
+     --tw-default-mono-font-family: var(--tw-font-mono);
- }
+   }
  }

  @layer base {
- *, :after, :before, ::backdrop {
+   *, :after, :before, ::backdrop {
-   box-sizing: border-box;
+     box-sizing: border-box;
-   border: 0 solid;
+     border: 0 solid;
-   margin: 0;
+     margin: 0;
-   padding: 0;
+     padding: 0;
- }
+   }

- ::file-selector-button {
+   ::file-selector-button {
-   box-sizing: border-box;
+     box-sizing: border-box;
-   border: 0 solid;
+     border: 0 solid;
-   margin: 0;
+     margin: 0;
-   padding: 0;
+     padding: 0;
- }
+   }
+
+   [popover] {
+     color: inherit;
+     background-color: #0000;
+     margin: auto;
+   }

- html, :host {
+   html, :host {
-   -webkit-text-size-adjust: 100%;
+     -webkit-text-size-adjust: 100%;
-   tab-size: 4;
+     tab-size: 4;
-   line-height: 1.5;
+     line-height: 1.5;
-   font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+     font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-   font-feature-settings: var(--tw-default-font-feature-settings, normal);
+     font-feature-settings: var(--tw-default-font-feature-settings, normal);
-   font-variation-settings: var(--tw-default-font-variation-settings, normal);
+     font-variation-settings: var(--tw-default-font-variation-settings, normal);
-   -webkit-tap-highlight-color: transparent;
+     -webkit-tap-highlight-color: transparent;
- }
+   }

- hr {
+   hr {
-   height: 0;
+     height: 0;
-   color: inherit;
+     color: inherit;
-   border-top-width: 1px;
+     border-top-width: 1px;
- }
+   }

- abbr:where([title]) {
+   abbr:where([title]) {
-   -webkit-text-decoration: underline dotted;
+     -webkit-text-decoration: underline dotted;
-   text-decoration: underline dotted;
+     text-decoration: underline dotted;
- }
+   }

- h1, h2, h3, h4, h5, h6 {
+   h1, h2, h3, h4, h5, h6 {
-   font-size: inherit;
+     font-size: inherit;
-   font-weight: inherit;
+     font-weight: inherit;
- }
+   }

- a {
+   a {
-   color: inherit;
+     color: inherit;
-   -webkit-text-decoration: inherit;
+     -webkit-text-decoration: inherit;
-   -webkit-text-decoration: inherit;
+     -webkit-text-decoration: inherit;
-   -webkit-text-decoration: inherit;
+     -webkit-text-decoration: inherit;
-   text-decoration: inherit;
+     text-decoration: inherit;
- }
+   }

- b, strong {
+   b, strong {
-   font-weight: bolder;
+     font-weight: bolder;
- }
+   }

- code, kbd, samp, pre {
+   code, kbd, samp, pre {
-   font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+     font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-   font-feature-settings: var(--tw-default-mono-font-feature-settings, normal);
+     font-feature-settings: var(--tw-default-mono-font-feature-settings, normal);
-   font-variation-settings: var(--tw-default-mono-font-variation-settings, normal);
+     font
})
test('unescapes underscores to spaces inside arbitrary values except for `url()` and first argument of `var()` and `theme()`', async () => {
View file
packages/tailwindcss/src/source-maps/source-map.test.ts
// The output CSS should include annotations linking back to:
// 1. The class definition `.foo`
// 2. The `@apply underline` line inside of it
expect(annotations).toEqual([

Check failure on line 173 in packages/tailwindcss/src/source-maps/source-map.test.ts

GitHub Actions / Linux

src/source-maps/source-map.test.ts > source maps trace back to @import location 

AssertionError: expected [ …(123) ] to deeply equal [ …(119) ]

- Expected
+ Received

  Array [
    "index.css: 1:0-41 <- 1:0-41",
    "index.css: 2:0-13 <- 3:0-34",
    "theme.css: 3:2-15 <- 1:0-15",
    "theme.css: 4:4 <- 2:2-4:0",
    "theme.css: 5:22 <- 4:22",
    "theme.css: 6:4 <- 6:2-8:0",
    "theme.css: 7:13 <- 8:13",
    "theme.css: 8:4-43 <- 446:2-54",
    "theme.css: 9:4-48 <- 449:2-59",
    "index.css: 12:0-12 <- 4:0-37",
    "preflight.css: 13:2-59 <- 7:0-11:23",
    "preflight.css: 14:4-26 <- 12:2-24",
    "preflight.css: 15:4-13 <- 13:2-11",
    "preflight.css: 16:4-14 <- 14:2-12",
    "preflight.css: 17:4-19 <- 15:2-17",
-   "preflight.css: 19:2-14 <- 28:0-29:6",
-   "preflight.css: 20:4-20 <- 30:2-18",
-   "preflight.css: 21:4-34 <- 31:2-32",
-   "preflight.css: 22:4-15 <- 32:2-13",
-   "preflight.css: 23:4-159 <- 33:2-42:3",
-   "preflight.css: 24:4-71 <- 43:2-73",
-   "preflight.css: 25:4-75 <- 44:2-77",
-   "preflight.css: 26:4-44 <- 45:2-42",
-   "preflight.css: 28:2-5 <- 54:0-3",
-   "preflight.css: 29:4-13 <- 55:2-11",
-   "preflight.css: 30:4-18 <- 56:2-16",
-   "preflight.css: 31:4-25 <- 57:2-23",
-   "preflight.css: 33:2-22 <- 64:0-20",
-   "preflight.css: 34:4-45 <- 65:2-43",
-   "preflight.css: 35:4-37 <- 66:2-35",
-   "preflight.css: 37:2-25 <- 73:0-78:3",
-   "preflight.css: 38:4-22 <- 79:2-20",
-   "preflight.css: 39:4-24 <- 80:2-22",
-   "preflight.css: 41:2-4 <- 87:0-2",
-   "preflight.css: 42:4-18 <- 88:2-16",
-   "preflight.css: 43:4-36 <- 89:2-34",
-   "preflight.css: 44:4-28 <- 90:2-26",
-   "preflight.css: 46:2-12 <- 97:0-98:7",
-   "preflight.css: 47:4-23 <- 99:2-21",
-   "preflight.css: 49:2-23 <- 109:0-112:4",
-   "preflight.css: 50:4-148 <- 113:2-123:3",
-   "preflight.css: 51:4-76 <- 124:2-78",
-   "preflight.css: 52:4-80 <- 125:2-82",
-   "preflight.css: 53:4-18 <- 126:2-16",
-   "preflight.css: 55:2-8 <- 133:0-6",
-   "preflight.css: 56:4-18 <- 134:2-16",
-   "preflight.css: 58:2-11 <- 141:0-142:4",
-   "preflight.css: 59:4-18 <- 143:2-16",
-   "preflight.css: 60:4-18 <- 144:2-16",
-   "preflight.css: 61:4-22 <- 145:2-20",
-   "preflight.css: 62:4-28 <- 146:2-26",
-   "preflight.css: 64:2-6 <- 149:0-4",
-   "preflight.css: 65:4-19 <- 150:2-17",
-   "preflight.css: 67:2-6 <- 153:0-4",
-   "preflight.css: 68:4-15 <- 154:2-13",
-   "preflight.css: 70:2-8 <- 163:0-6",
-   "preflight.css: 71:4-18 <- 164:2-16",
-   "preflight.css: 72:4-25 <- 165:2-23",
-   "preflight.css: 73:4-29 <- 166:2-27",
-   "preflight.css: 75:2-18 <- 173:0-16",
-   "preflight.css: 76:4-17 <- 174:2-15",
-   "preflight.css: 78:2-11 <- 181:0-9",
-   "preflight.css: 79:4-28 <- 182:2-26",
-   "preflight.css: 81:2-10 <- 189:0-8",
-   "preflight.css: 82:4-22 <- 190:2-20",
-   "preflight.css: 84:2-15 <- 197:0-199:5",
-   "preflight.css: 85:4-20 <- 200:2-18",
-   "preflight.css: 87:2-56 <- 209:0-216:7",
-   "preflight.css: 88:4-18 <- 217:2-16",
-   "preflight.css: 89:4-26 <- 218:2-24",
-   "preflight.css: 91:2-13 <- 225:0-226:6",
-   "preflight.css: 92:4-19 <- 227:2-17",
-   "preflight.css: 93:4-16 <- 228:2-14",
-   "preflight.css: 95:2-68 <- 238:0-243:23",
-   "preflight.css: 96:4-17 <- 244:2-15",
-   "preflight.css: 97:4-34 <- 245:2-32",
-   "preflight.css: 98:4-36 <- 246:2-34",
-   "preflight.css: 99:4-27 <- 247:2-25",
-   "preflight.css: 100:4-18 <- 248:2-16",
-   "preflight.css: 101:4-20 <- 249:2-18",
-   "preflight.css: 102:4-33 <- 250:2-31",
-   "preflight.css: 103:4-14 <- 251:2-12",
-   "preflight.css: 105:2-49 <- 258:0-47",
-   "preflight.css: 106:4-23 <- 259:2-21",
-   "preflight.css: 108:2-56 <- 266:0-54",
-   "preflight.css: 109:4-30 <- 267:2-28",
-   "preflight.css: 111:2-25 <- 274:0-23",
-   "preflight.css: 112:4-26 <- 275:2-24",
-   "preflight.css: 114:2-16 <- 282:0-14",
-   "preflight.css: 115:4-14 <- 283:2-12",
-   "preflight.css: 117:2-92 <- 291:0-292:49",
-   "preflight.css: 118:4-18 <- 293:2-16",
-   "preflight.css: 119:6-25 <- 294:4-61",
-   "preflight.css: 120:6-53 <- 294:4-61",
-   "preflight.css: 121:8-65 <- 294:4-61",
-   "preflight.css: 125:2-11 <- 302:0-9",
-   "preflight.css: 126:4-20 <-
'index.css: 1:0-41 <- 1:0-41',
'index.css: 2:0-13 <- 3:0-34',
'theme.css: 3:2-15 <- 1:0-15',
View file
integrations/cli/index.test.ts
},
async ({ exec, fs, expect }) => {
await exec('pnpm tailwindcss --input ./index.css --output ./dist/out.css')
expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`

Check failure on line 1778 in integrations/cli/index.test.ts

GitHub Actions / Linux / cli

cli/index.test.ts > polyfills should be imported after external `@import url(…)` statements 

Error: Snapshot `polyfills should be imported after external `@import url(…)` statements 1` mismatched

- Expected
+ Received

@@ -19,10 +19,15 @@
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0 solid;
    }
+   [popover] {
+     margin: auto;
+     background-color: transparent;
+     color: inherit;
+   }
    html, :host {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      tab-size: 4;
      font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');

 ❯ cli/index.test.ts:1778:48
 ❯ utils.ts:449:14

Check failure on line 1778 in integrations/cli/index.test.ts

GitHub Actions / Linux / cli

cli/index.test.ts > polyfills should be imported after external `@import url(…)` statements 

Error: Snapshot `polyfills should be imported after external `@import url(…)` statements 2` mismatched

- Expected
+ Received

@@ -19,10 +19,15 @@
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0 solid;
    }
+   [popover] {
+     margin: auto;
+     background-color: transparent;
+     color: inherit;
+   }
    html, :host {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      tab-size: 4;
      font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');

 ❯ cli/index.test.ts:1778:48
 ❯ utils.ts:449:14

Check failure on line 1778 in integrations/cli/index.test.ts

GitHub Actions / Linux / cli

cli/index.test.ts > polyfills should be imported after external `@import url(…)` statements 

Error: Snapshot `polyfills should be imported after external `@import url(…)` statements 3` mismatched

- Expected
+ Received

@@ -19,10 +19,15 @@
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0 solid;
    }
+   [popover] {
+     margin: auto;
+     background-color: transparent;
+     color: inherit;
+   }
    html, :host {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      tab-size: 4;
      font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');

 ❯ cli/index.test.ts:1778:48
 ❯ utils.ts:449:14
"
--- ./dist/out.css ---
@import url('https://fonts.googleapis.com');