Created
December 21, 2023 02:36
-
-
Save shun-shobon/8254ad7eab692c9e22c3a0f5421f9b54 to your computer and use it in GitHub Desktop.
Reset CSS for vanilla-extract.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import "./layers.css"; | |
| import "./reset.css"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { layer } from "@vanilla-extract/css"; | |
| export const reset = layer("reset"); | |
| export const components = layer("components"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * The new CSS resetを参考に、Vanilla ExtractでCSSリセットを行います。 詳しくは | |
| * https://github.com/elad2412/the-new-css-reset/blob/main/css/reset.css | |
| * を参照して下さい。 | |
| */ | |
| import { globalStyle } from "@vanilla-extract/css"; | |
| import * as layers from "./layers.css"; | |
| /** | |
| * Remove all the styles of the "User-Agent-Stylesheet", except for the | |
| * 'display' property | |
| * | |
| * - The "symbol *" part is to solve Firefox SVG sprite bug | |
| * - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS | |
| * hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) | |
| */ | |
| globalStyle( | |
| "*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *))", | |
| { | |
| "@layer": { | |
| [layers.reset]: { | |
| all: "unset", | |
| display: "revert", | |
| }, | |
| }, | |
| }, | |
| ); | |
| /** | |
| * Preferred box-sizing value | |
| */ | |
| globalStyle("*, *::before, *::after", { | |
| "@layer": { | |
| [layers.reset]: { | |
| boxSizing: "border-box", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Fix mobile Safari increase font-size on landscape mode | |
| */ | |
| globalStyle("html", { | |
| "@layer": { | |
| [layers.reset]: { | |
| MozTextSizeAdjust: "none", | |
| WebkitTextSizeAdjust: "none", | |
| textSizeAdjust: "none", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Reapply the pointer cursor for anchor tags | |
| */ | |
| globalStyle("a, button", { | |
| "@layer": { | |
| [layers.reset]: { | |
| cursor: "pointer", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Remove list styles (bullets/numbers) | |
| */ | |
| globalStyle("ol, ul, menu, summary", { | |
| "@layer": { | |
| [layers.reset]: { | |
| listStyle: "none", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * For images to not be able to exceed their container | |
| */ | |
| globalStyle("img", { | |
| "@layer": { | |
| [layers.reset]: { | |
| maxInlineSize: "100%", | |
| maxBlockSize: "100%", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Removes spacing between cells in tables | |
| */ | |
| globalStyle("table", { | |
| "@layer": { | |
| [layers.reset]: { | |
| borderCollapse: "collapse", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Safari - solving issue when using user-select:none on the <body> text input | |
| * doesn't working | |
| */ | |
| globalStyle("input, textarea", { | |
| "@layer": { | |
| [layers.reset]: { | |
| WebkitUserSelect: "auto", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Revert the 'white-space' property for textarea elements on Safari | |
| */ | |
| globalStyle("textarea", { | |
| "@layer": { | |
| [layers.reset]: { | |
| whiteSpace: "revert", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Minimum style to allow to style meter element | |
| */ | |
| globalStyle("meter", { | |
| "@layer": { | |
| [layers.reset]: { | |
| WebkitAppearance: "revert", | |
| appearance: "revert", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Preformatted text - use only for this feature | |
| */ | |
| globalStyle(":where(pre)", { | |
| "@layer": { | |
| [layers.reset]: { | |
| all: "revert", | |
| boxSizing: "border-box", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Reset default text opacity of input placeholder | |
| */ | |
| globalStyle("::placeholder", { | |
| "@layer": { | |
| [layers.reset]: { | |
| color: "unset", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Fix the feature of 'hidden' attribute. display:revert; revert to element | |
| * instead of attribute | |
| */ | |
| globalStyle(":where([hidden])", { | |
| "@layer": { | |
| [layers.reset]: { | |
| display: "none", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Revert for bug in Chromium browsers | |
| * | |
| * - Fix for the content editable attribute will work properly. | |
| * - Webkit-user-select: auto; added for Safari in case of using user-select:none | |
| * on wrapper element | |
| */ | |
| globalStyle(':where([contenteditable]:not([contenteditable="false"]))', { | |
| // @ts-expect-error: -webkit-line-break is a non-standard property | |
| "@layer": { | |
| [layers.reset]: { | |
| MozUserModify: "read-write", | |
| WebkitUserModify: "read-write", | |
| overflowWrap: "break-word", | |
| WebkitLineBreak: "after-white-space", | |
| WebkitUserSelect: "auto", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Apply back the draggable feature - exist only in Chromium and Safari | |
| */ | |
| globalStyle(':where([draggable="true"])', { | |
| "@layer": { | |
| [layers.reset]: { | |
| // @ts-expect-error: -webkit-user-drag is a non-standard property | |
| WebkitUserDrag: "element", | |
| }, | |
| }, | |
| }); | |
| /** | |
| * Revert Modal native behavior | |
| */ | |
| globalStyle(":where(dialog:modal)", { | |
| "@layer": { | |
| [layers.reset]: { | |
| all: "revert", | |
| boxSizing: "border-box", | |
| }, | |
| }, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment