fe48ca83d8
Prior to this PR, we'd put all of the `@defaults` (the CSS variables and
stuff) _after_ the `base` rules. This creates an issue when using
`optimizeUniversalDefaults` with CSS that looks like this:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
input {
@apply shadow;
}
}
```
…because the default shadow stuff ends up after the base `input` rules,
so the generated styles are like this:
```css
input {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
input {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
```
This means all of the actual shadow values for the input are reset and
the shadow doesn't work.
Fixes https://github.com/tailwindlabs/tailwindcss/issues/14426.
Lots of failing tests right because this changes a ton of stuff, albeit
in a totally inconsequential way. @thecrypticace if you could update
these for me this week that would be a huge help, just banging this fix
out quick while the kids are napping 😴
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
74 lines
1.3 KiB
JavaScript
74 lines
1.3 KiB
JavaScript
import { run, html, css, defaults } from './util/run'
|
|
|
|
it('should generate the partial selector, if only a partial is used (base layer)', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
|
|
@layer base {
|
|
:root {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* --- */
|
|
|
|
:root,
|
|
.a {
|
|
color: black;
|
|
}
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
return expect(result.css).toMatchFormattedCss(css`
|
|
${defaults}
|
|
:root {
|
|
font-weight: bold;
|
|
}
|
|
:root,
|
|
.a {
|
|
color: #000;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('should generate the partial selector, if only a partial is used (utilities layer)', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="a"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
|
|
@layer utilities {
|
|
:root {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* --- */
|
|
|
|
:root,
|
|
.a {
|
|
color: black;
|
|
}
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
return expect(result.css).toMatchFormattedCss(css`
|
|
:root {
|
|
font-weight: bold;
|
|
}
|
|
:root,
|
|
.a {
|
|
color: #000;
|
|
}
|
|
`)
|
|
})
|
|
})
|