From 3088d596424e874858a9e3d44500d626c83bb0ad Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 1 Sep 2021 14:48:48 -0400 Subject: [PATCH] Inline modern-normalize, consolidate with preflight --- package-lock.json | 17 -- package.json | 1 - src/plugins/css/LICENSE | 2 + src/plugins/css/preflight.css | 451 ++++++++++++++++++++-------------- src/plugins/preflight.js | 4 - 5 files changed, 275 insertions(+), 200 deletions(-) diff --git a/package-lock.json b/package-lock.json index 250eb6eae323..864bf753a69a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,6 @@ "glob-parent": "^6.0.1", "is-glob": "^4.0.1", "lodash": "^4.17.21", - "modern-normalize": "^1.1.0", "normalize-path": "^3.0.0", "object-hash": "^2.2.0", "postcss-js": "^3.0.3", @@ -7315,17 +7314,6 @@ "node": ">=0.10.0" } }, - "node_modules/modern-normalize": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz", - "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==", - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -15868,11 +15856,6 @@ } } }, - "modern-normalize": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz", - "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==" - }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index d088ea81160c..a10066580b76 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,6 @@ "glob-parent": "^6.0.1", "is-glob": "^4.0.1", "lodash": "^4.17.21", - "modern-normalize": "^1.1.0", "normalize-path": "^3.0.0", "object-hash": "^2.2.0", "postcss-js": "^3.0.3", diff --git a/src/plugins/css/LICENSE b/src/plugins/css/LICENSE index 5bd420b8631d..a1fb0394c924 100644 --- a/src/plugins/css/LICENSE +++ b/src/plugins/css/LICENSE @@ -1,6 +1,8 @@ MIT License Copyright (c) Nicolas Gallagher +Copyright (c) Jonathan Neal +Copyright (c) Sindre Sorhus (sindresorhus.com) Copyright (c) Adam Wathan Copyright (c) Jonathan Reinink diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index 372368c6532e..d74d89b06256 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -1,229 +1,327 @@ -/** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ -/** - * Removes the default spacing and border for appropriate elements. - */ +*, +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: currentColor; /* 2 */ +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +*/ + +html { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ + tab-size: 4; /* 3 */ + font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; /* 1 */ + line-height: inherit; /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ -blockquote, -dl, -dd, h1, h2, h3, h4, h5, -h6, -hr, -figure, -p, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, pre { - margin: 0; + font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */ + font-size: 1em; /* 2 */ } -button { - background-color: transparent; - background-image: none; +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; } -fieldset { - margin: 0; - padding: 0; +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } -ol, -ul { - list-style: none; - margin: 0; - padding: 0; +sub { + bottom: -0.25em; } -/** - * Tailwind custom reset styles - */ +sup { + top: -0.5em; +} -/** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ -html { - font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 1 */ - line-height: 1.5; /* 2 */ +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ } +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ -/** - * Inherit font-family and line-height from `html` so users can set them as - * a class directly on the `html` element. - */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: inherit; /* 1 */ + color: inherit; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 3 */ +} -body { - font-family: inherit; - line-height: inherit; -} - -/** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: currentColor; /* 2 */ +button, +select { + text-transform: none; } /* - * Ensure horizontal rules are visible by default - */ +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ -hr { - border-top-width: 1px; +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; /* 1 */ + background-color: transparent; /* 2 */ + background-image: none; /* 2 */ } -/** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ +/* +Use the modern Firefox focus style for all focusable elements. +*/ -img { - border-style: solid; +:-moz-focusring { + outline: auto; } -textarea { - resize: vertical; +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; } -input::placeholder, -textarea::placeholder { - opacity: 1; - color: theme('colors.gray.400', #a1a1aa); +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; } -button, -[role="button"] { - cursor: pointer; +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; } -/** - * Override legacy focus reset from Normalize with modern Firefox focus styles. - * - * This is actually an improvement over the new defaults in Firefox in our testing, - * as it triggers the better focus styles even for links, which still use a dotted - * outline in Firefox by default. - */ - -:-moz-focusring { - outline: auto; +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } -table { - border-collapse: collapse; +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; } +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, h1, h2, h3, h4, h5, -h6 { - font-size: inherit; - font-weight: inherit; +h6, +hr, +figure, +p, +pre { + margin: 0; } -/** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ +fieldset { + margin: 0; + padding: 0; +} -a { - color: inherit; - text-decoration: inherit; +legend { + padding: 0; } -/** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ +ol, +ul { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ -button, -input, -optgroup, -select, textarea { - padding: 0; - line-height: inherit; - color: inherit; + resize: vertical; } -/** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ -pre, -code, -kbd, -samp { - font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); -} - -/** - * 1. Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - * - * 2. Add `vertical-align: middle` to align replaced elements more - * sensibly by default when overriding `display` by adding a - * utility like `inline`. - * - * This can trigger a poorly considered linting error in some - * tools but is included by design. - * - * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 - */ +input::placeholder, +textarea::placeholder { + opacity: 1; /* 1 */ + color: theme('colors.gray.400', #9ca3af); /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ img, svg, @@ -237,12 +335,9 @@ object { vertical-align: middle; /* 2 */ } -/** - * Constrain images and videos to the parent width and preserve - * their intrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ img, video { @@ -250,9 +345,9 @@ video { height: auto; } -/** - * Ensure the default browser behavior of the `hidden` attribute. - */ +/* +Ensure the default browser behavior of the `hidden` attribute. +*/ [hidden] { display: none; diff --git a/src/plugins/preflight.js b/src/plugins/preflight.js index 0dd2343725e0..8657aebc1986 100644 --- a/src/plugins/preflight.js +++ b/src/plugins/preflight.js @@ -4,16 +4,12 @@ import packageJson from '../../package.json' export default function () { return function ({ addBase }) { - const normalizeStyles = postcss.parse( - fs.readFileSync(require.resolve('modern-normalize'), 'utf8') - ) const preflightStyles = postcss.parse(fs.readFileSync(`${__dirname}/css/preflight.css`, 'utf8')) addBase([ postcss.comment({ text: `! tailwindcss v${packageJson.version} | MIT License | https://tailwindcss.com`, }), - ...normalizeStyles.nodes, ...preflightStyles.nodes, ]) }