정규화된 Preflight CSS 범위 지정

Tailwind CSS 또는 WindiCSS 과 같은 최신 유틸리티 기반 CSS 프레임워크로 구성 요소 라이브러리를 작성하거나 레거시 코드베이스를 포팅하고 싶었던 적이 있습니까? 받을 만하다?

Preflight는 전역 CSS 네임스페이스에 있으므로 일부 성가심 없이 이러한 사용 사례 중 하나에 대해 안정적으로 사용하거나 비활성화할 수 없습니다. 일반적으로 사용할 필요가 없는 유틸리티 클래스, 레거시 CSS에서 재설정해야 합니다. 프레임워크는 기본 스타일 등을 재정의합니다.

짜증나! 개발자가 Tailwind CSS와 WindiCSS를 좋아하는 이유는 대체로 뇌가 없는 작업이기 때문입니다. 요소에 일부 유틸리티 클래스를 추가하기만 하면 됩니다. 실패했을 때 Preflight의 단점을 해킹하려고 하면 이 편리함이 사라집니다.

다행히 쉽게 고칠 수 있습니다!

Enter :where() , 우리에게 강력한 기능을 제공하는 놀라운 CSS 의사 선택기.

이 작은 녀석은 CSS 특이성에 영향을 미치지 않습니다. 예를 들어 :where(.preflight) 와 같이 상위 선택자를 래핑하고 CSS를 약간 수정하면 전역 CSS 네임스페이스에서 제거하고 웹 애플리케이션에서 완전한 제어를 원하는 부분만 재설정하도록 조정할 수 있습니다. 위에.

이제 구성 요소 라이브러리를 만들거나 기존 코드베이스를 Tailwind CSS 또는 WindiCSS로 이식하고 전역 네임스페이스 충돌에 대한 걱정 없이 멋진 Preflight 재설정을 사용할 수 있습니다.

아래에서 상위.preflight 클래스로 범위가 지정된 Tailwind CSS 3 Preflight의 변경된 버전을 찾을 수 있습니다. 약간의 청소가 필요할 수 있지만 99%의 결과를 얻을 수 있습니다.

희망적으로 Tailwind CSS 또는 WindiCSS는 이러한 종류의 기능을 핵심으로 굽습니다. 그때까지는 :where() 덕분에 해결 방법이 있습니다.

:where(.preflight) {
  --font-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";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --border-color: rgb(209 213 219);
  --placeholder-color: rgb(156 163 175);
}
:where(.preflight) *,
:where(.preflight) ::before,
:where(.preflight) ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color);
}
:where(.preflight)  {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-sans);
}
:where(.preflight)  {
  margin: 0;
  line-height: inherit;
}
:where(.preflight) hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
:where(.preflight) abbr:where([title]) {
  text-decoration: underline dotted;
}
:where(.preflight) h1,
:where(.preflight) h2,
:where(.preflight) h3,
:where(.preflight) h4,
:where(.preflight) h5,
:where(.preflight) h6 {
  font-size: inherit;
  font-weight: inherit;
}
:where(.preflight) a {
  color: inherit;
  text-decoration: inherit;
}
:where(.preflight) b,
:where(.preflight) strong {
  font-weight: bolder;
}
:where(.preflight) code,
:where(.preflight) kbd,
:where(.preflight) samp,
:where(.preflight) pre {
  font-family: var(--font-mono);
  font-size: 1em;
}
:where(.preflight) small {
  font-size: 80%;
}
:where(.preflight) sub,
:where(.preflight) sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
:where(.preflight) sub {
  bottom: -0.25em;
}
:where(.preflight) sup {
  top: -0.5em;
}
:where(.preflight) table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:where(.preflight) button,
:where(.preflight) input,
:where(.preflight) optgroup,
:where(.preflight) select,
:where(.preflight) textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
:where(.preflight) button,
:where(.preflight) select {
  text-transform: none;
}
:where(.preflight) button,
:where(.preflight) [type='button'],
:where(.preflight) [type='reset'],
:where(.preflight) [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:where(.preflight) :-moz-focusring {
  outline: auto;
}
:where(.preflight) :-moz-ui-invalid {
  box-shadow: none;
}
:where(.preflight) progress {
  vertical-align: baseline;
}
:where(.preflight) ::-webkit-inner-spin-button,
:where(.preflight) ::-webkit-outer-spin-button {
  height: auto;
}
:where(.preflight) [type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
:where(.preflight) ::-webkit-search-decoration {
  -webkit-appearance: none;
}
:where(.preflight) ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
:where(.preflight) summary {
  display: list-item;
}
:where(.preflight) blockquote,
:where(.preflight) dl,
:where(.preflight) dd,
:where(.preflight) h1,
:where(.preflight) h2,
:where(.preflight) h3,
:where(.preflight) h4,
:where(.preflight) h5,
:where(.preflight) h6,
:where(.preflight) hr,
:where(.preflight) figure,
:where(.preflight) p,
:where(.preflight) pre {
  margin: 0;
}
:where(.preflight) fieldset {
  margin: 0;
  padding: 0;
}
:where(.preflight) legend {
  padding: 0;
}
:where(.preflight) ol,
:where(.preflight) ul,
:where(.preflight) menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(.preflight) textarea {
  resize: vertical;
}
:where(.preflight) input::placeholder,
:where(.preflight) textarea::placeholder {
  opacity: 1;
  color: var(--placeholder-color);
}
:where(.preflight) button,
:where(.preflight) [role="button"] {
  cursor: pointer;
}
:where(.preflight) :disabled {
  cursor: default;
}
:where(.preflight) img,
:where(.preflight) svg,
:where(.preflight) video,
:where(.preflight) canvas,
:where(.preflight) audio,
:where(.preflight) iframe,
:where(.preflight) embed,
:where(.preflight) object {
  display: block;
  vertical-align: middle;
}
:where(.preflight) img,
:where(.preflight) video {
  max-width: 100%;
  height: auto;
}
:where(.preflight) [hidden] {
  display: none;
}