@@ -1563,6 +1563,287 @@ test(
1563
1563
} ,
1564
1564
)
1565
1565
1566
+ test (
1567
+ 'polyfills should be imported after external `@import url(…)` statements' ,
1568
+ {
1569
+ fs : {
1570
+ 'package.json' : json `
1571
+ {
1572
+ "dependencies": {
1573
+ "tailwindcss": "workspace:^",
1574
+ "@tailwindcss/cli": "workspace:^"
1575
+ }
1576
+ }
1577
+ ` ,
1578
+ 'index.css' : css `
1579
+ @import url('https://fonts.googleapis.com');
1580
+ @import 'tailwindcss';
1581
+ ` ,
1582
+ 'index.html' : html `< div class ="bg-red-500/50 shadow-md "> </ div > ` ,
1583
+ } ,
1584
+ } ,
1585
+ async ( { exec, fs, expect } ) => {
1586
+ await exec ( 'pnpm tailwindcss --input ./index.css --output ./dist/out.css' )
1587
+ expect ( await fs . dumpFiles ( './dist/*.css' ) ) . toMatchInlineSnapshot ( `
1588
+ "
1589
+ --- ./dist/out.css ---
1590
+ @import url('https://fonts.googleapis.com');
1591
+ @layer theme, base, components, utilities;
1592
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1593
+ @layer base {
1594
+ *, ::before, ::after, ::backdrop {
1595
+ --tw-shadow: 0 0 #0000;
1596
+ --tw-shadow-color: initial;
1597
+ --tw-shadow-alpha: 100%;
1598
+ --tw-inset-shadow: 0 0 #0000;
1599
+ --tw-inset-shadow-color: initial;
1600
+ --tw-inset-shadow-alpha: 100%;
1601
+ --tw-ring-color: initial;
1602
+ --tw-ring-shadow: 0 0 #0000;
1603
+ --tw-inset-ring-color: initial;
1604
+ --tw-inset-ring-shadow: 0 0 #0000;
1605
+ --tw-ring-inset: initial;
1606
+ --tw-ring-offset-width: 0px;
1607
+ --tw-ring-offset-color: #fff;
1608
+ --tw-ring-offset-shadow: 0 0 #0000;
1609
+ }
1610
+ }
1611
+ }
1612
+ @layer theme {
1613
+ :root, :host {
1614
+ --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
1615
+ 'Noto Color Emoji';
1616
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
1617
+ monospace;
1618
+ --color-red-500: oklch(63.7% 0.237 25.331);
1619
+ --default-font-family: var(--font-sans);
1620
+ --default-mono-font-family: var(--font-mono);
1621
+ }
1622
+ }
1623
+ @layer base {
1624
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
1625
+ box-sizing: border-box;
1626
+ margin: 0;
1627
+ padding: 0;
1628
+ border: 0 solid;
1629
+ }
1630
+ html, :host {
1631
+ line-height: 1.5;
1632
+ -webkit-text-size-adjust: 100%;
1633
+ tab-size: 4;
1634
+ 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');
1635
+ font-feature-settings: var(--default-font-feature-settings, normal);
1636
+ font-variation-settings: var(--default-font-variation-settings, normal);
1637
+ -webkit-tap-highlight-color: transparent;
1638
+ }
1639
+ hr {
1640
+ height: 0;
1641
+ color: inherit;
1642
+ border-top-width: 1px;
1643
+ }
1644
+ abbr:where([title]) {
1645
+ -webkit-text-decoration: underline dotted;
1646
+ text-decoration: underline dotted;
1647
+ }
1648
+ h1, h2, h3, h4, h5, h6 {
1649
+ font-size: inherit;
1650
+ font-weight: inherit;
1651
+ }
1652
+ a {
1653
+ color: inherit;
1654
+ -webkit-text-decoration: inherit;
1655
+ text-decoration: inherit;
1656
+ }
1657
+ b, strong {
1658
+ font-weight: bolder;
1659
+ }
1660
+ code, kbd, samp, pre {
1661
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
1662
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
1663
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
1664
+ font-size: 1em;
1665
+ }
1666
+ small {
1667
+ font-size: 80%;
1668
+ }
1669
+ sub, sup {
1670
+ font-size: 75%;
1671
+ line-height: 0;
1672
+ position: relative;
1673
+ vertical-align: baseline;
1674
+ }
1675
+ sub {
1676
+ bottom: -0.25em;
1677
+ }
1678
+ sup {
1679
+ top: -0.5em;
1680
+ }
1681
+ table {
1682
+ text-indent: 0;
1683
+ border-color: inherit;
1684
+ border-collapse: collapse;
1685
+ }
1686
+ :-moz-focusring {
1687
+ outline: auto;
1688
+ }
1689
+ progress {
1690
+ vertical-align: baseline;
1691
+ }
1692
+ summary {
1693
+ display: list-item;
1694
+ }
1695
+ ol, ul, menu {
1696
+ list-style: none;
1697
+ }
1698
+ img, svg, video, canvas, audio, iframe, embed, object {
1699
+ display: block;
1700
+ vertical-align: middle;
1701
+ }
1702
+ img, video {
1703
+ max-width: 100%;
1704
+ height: auto;
1705
+ }
1706
+ button, input, select, optgroup, textarea, ::file-selector-button {
1707
+ font: inherit;
1708
+ font-feature-settings: inherit;
1709
+ font-variation-settings: inherit;
1710
+ letter-spacing: inherit;
1711
+ color: inherit;
1712
+ border-radius: 0;
1713
+ background-color: transparent;
1714
+ opacity: 1;
1715
+ }
1716
+ :where(select:is([multiple], [size])) optgroup {
1717
+ font-weight: bolder;
1718
+ }
1719
+ :where(select:is([multiple], [size])) optgroup option {
1720
+ padding-inline-start: 20px;
1721
+ }
1722
+ ::file-selector-button {
1723
+ margin-inline-end: 4px;
1724
+ }
1725
+ ::placeholder {
1726
+ opacity: 1;
1727
+ }
1728
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
1729
+ ::placeholder {
1730
+ color: color-mix(in oklab, currentColor 50%, transparent);
1731
+ }
1732
+ }
1733
+ textarea {
1734
+ resize: vertical;
1735
+ }
1736
+ ::-webkit-search-decoration {
1737
+ -webkit-appearance: none;
1738
+ }
1739
+ ::-webkit-date-and-time-value {
1740
+ min-height: 1lh;
1741
+ text-align: inherit;
1742
+ }
1743
+ ::-webkit-datetime-edit {
1744
+ display: inline-flex;
1745
+ }
1746
+ ::-webkit-datetime-edit-fields-wrapper {
1747
+ padding: 0;
1748
+ }
1749
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
1750
+ padding-block: 0;
1751
+ }
1752
+ :-moz-ui-invalid {
1753
+ box-shadow: none;
1754
+ }
1755
+ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
1756
+ appearance: button;
1757
+ }
1758
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
1759
+ height: auto;
1760
+ }
1761
+ [hidden]:where(:not([hidden='until-found'])) {
1762
+ display: none !important;
1763
+ }
1764
+ }
1765
+ @layer utilities {
1766
+ .bg-red-500\\/50 {
1767
+ background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
1768
+ @supports (color: color-mix(in lab, red, red)) {
1769
+ background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1770
+ }
1771
+ }
1772
+ .shadow-md {
1773
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1774
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1775
+ }
1776
+ }
1777
+ @property --tw-shadow {
1778
+ syntax: "*";
1779
+ inherits: false;
1780
+ initial-value: 0 0 #0000;
1781
+ }
1782
+ @property --tw-shadow-color {
1783
+ syntax: "*";
1784
+ inherits: false;
1785
+ }
1786
+ @property --tw-shadow-alpha {
1787
+ syntax: "<percentage>";
1788
+ inherits: false;
1789
+ initial-value: 100%;
1790
+ }
1791
+ @property --tw-inset-shadow {
1792
+ syntax: "*";
1793
+ inherits: false;
1794
+ initial-value: 0 0 #0000;
1795
+ }
1796
+ @property --tw-inset-shadow-color {
1797
+ syntax: "*";
1798
+ inherits: false;
1799
+ }
1800
+ @property --tw-inset-shadow-alpha {
1801
+ syntax: "<percentage>";
1802
+ inherits: false;
1803
+ initial-value: 100%;
1804
+ }
1805
+ @property --tw-ring-color {
1806
+ syntax: "*";
1807
+ inherits: false;
1808
+ }
1809
+ @property --tw-ring-shadow {
1810
+ syntax: "*";
1811
+ inherits: false;
1812
+ initial-value: 0 0 #0000;
1813
+ }
1814
+ @property --tw-inset-ring-color {
1815
+ syntax: "*";
1816
+ inherits: false;
1817
+ }
1818
+ @property --tw-inset-ring-shadow {
1819
+ syntax: "*";
1820
+ inherits: false;
1821
+ initial-value: 0 0 #0000;
1822
+ }
1823
+ @property --tw-ring-inset {
1824
+ syntax: "*";
1825
+ inherits: false;
1826
+ }
1827
+ @property --tw-ring-offset-width {
1828
+ syntax: "<length>";
1829
+ inherits: false;
1830
+ initial-value: 0px;
1831
+ }
1832
+ @property --tw-ring-offset-color {
1833
+ syntax: "*";
1834
+ inherits: false;
1835
+ initial-value: #fff;
1836
+ }
1837
+ @property --tw-ring-offset-shadow {
1838
+ syntax: "*";
1839
+ inherits: false;
1840
+ initial-value: 0 0 #0000;
1841
+ }
1842
+ "
1843
+ ` )
1844
+ } ,
1845
+ )
1846
+
1566
1847
function withBOM ( text : string ) : string {
1567
1848
return '\uFEFF' + text
1568
1849
}
0 commit comments