feat: add CSS Layer support to internal input styles

.changeset/css-layers-internal-inputs.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Caret, InputLabel, InputValidation, TextInputInnerAction, TextInputInnerVisualSlot, TextInputWrapper, UnderlineTabbedInterface, UnstyledTextInput, ValidationAnimationContainer, Label: Add CSS layer support for component styles

packages/react/src/Label/Label.module.css

@@ -1,79 +1,81 @@
-:where(.Label) {
-  display: inline-flex;
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-medium);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 1;
-  color: var(--fgColor-default);
-  white-space: nowrap;
-  background-color: transparent;
-  border-style: solid;
-  border-width: var(--borderWidth-thin);
-  border-radius: var(--borderRadius-full);
-  align-items: center;
+@layer primer.components.Label {
+  :where(.Label) {
+    display: inline-flex;
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-medium);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: 1;
+    color: var(--fgColor-default);
+    white-space: nowrap;
+    background-color: transparent;
+    border-style: solid;
+    border-width: var(--borderWidth-thin);
+    border-radius: var(--borderRadius-full);
+    align-items: center;
 
-  &:where([data-size='small']) {
-    height: var(--base-size-20);
-    padding: 0 var(--base-size-6);
-  }
+    &:where([data-size='small']) {
+      height: var(--base-size-20);
+      padding: 0 var(--base-size-6);
+    }
 
-  &:where([data-size='large']) {
-    height: var(--base-size-24);
-    padding: 0 var(--base-size-8);
-  }
+    &:where([data-size='large']) {
+      height: var(--base-size-24);
+      padding: 0 var(--base-size-8);
+    }
 
-  &:where([data-variant='default']) {
-    border-color: var(--borderColor-default);
-  }
+    &:where([data-variant='default']) {
+      border-color: var(--borderColor-default);
+    }
 
-  &:where([data-variant='primary']) {
-    /* stylelint-disable-next-line primer/colors */
-    border-color: var(--fgColor-default);
-  }
+    &:where([data-variant='primary']) {
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--fgColor-default);
+    }
 
-  &:where([data-variant='secondary']) {
-    color: var(--fgColor-muted);
-    border-color: var(--borderColor-muted);
-  }
+    &:where([data-variant='secondary']) {
+      color: var(--fgColor-muted);
+      border-color: var(--borderColor-muted);
+    }
 
-  &:where([data-variant='accent']) {
-    color: var(--fgColor-accent);
-    /* stylelint-disable-next-line primer/colors */
-    border-color: var(--bgColor-accent-emphasis);
-  }
+    &:where([data-variant='accent']) {
+      color: var(--fgColor-accent);
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--bgColor-accent-emphasis);
+    }
 
-  &:where([data-variant='success']) {
-    color: var(--fgColor-success);
-    /* stylelint-disable-next-line primer/colors */
-    border-color: var(--bgColor-success-emphasis);
-  }
+    &:where([data-variant='success']) {
+      color: var(--fgColor-success);
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--bgColor-success-emphasis);
+    }
 
-  &:where([data-variant='attention']) {
-    color: var(--fgColor-attention);
-    /* stylelint-disable-next-line primer/colors */
-    border-color: var(--bgColor-attention-emphasis);
-  }
+    &:where([data-variant='attention']) {
+      color: var(--fgColor-attention);
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--bgColor-attention-emphasis);
+    }
 
-  &:where([data-variant='severe']) {
-    color: var(--fgColor-severe);
-    /* stylelint-disable-next-line primer/colors */
-    border-color: var(--bgColor-severe-emphasis);
-  }
+    &:where([data-variant='severe']) {
+      color: var(--fgColor-severe);
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--bgColor-severe-emphasis);
+    }
 
-  &:where([data-variant='danger']) {
-    color: var(--fgColor-danger);
-    border-color: var(--borderColor-danger-emphasis);
-  }
+    &:where([data-variant='danger']) {
+      color: var(--fgColor-danger);
+      border-color: var(--borderColor-danger-emphasis);
+    }
 
-  &:where([data-variant='done']) {
-    color: var(--fgColor-done);
-    /* stylelint-disable-next-line primer/colors */
-    border-color: var(--bgColor-done-emphasis);
-  }
+    &:where([data-variant='done']) {
+      color: var(--fgColor-done);
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--bgColor-done-emphasis);
+    }
 
-  &:where([data-variant='sponsors']) {
-    color: var(--fgColor-sponsors);
-    /* stylelint-disable-next-line primer/colors */
-    border-color: var(--bgColor-sponsors-emphasis);
+    &:where([data-variant='sponsors']) {
+      color: var(--fgColor-sponsors);
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--bgColor-sponsors-emphasis);
+    }
   }
 }

packages/react/src/__tests__/css-layers.test.ts

@@ -25,6 +25,16 @@ const allowlist = new Set([
   path.resolve(import.meta.dirname, '../Hidden/Hidden.module.css'),
   path.resolve(import.meta.dirname, '../InlineMessage/InlineMessage.module.css'),
   path.resolve(import.meta.dirname, '../internal/components/ButtonReset.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/Caret.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/InputLabel.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/InputValidation.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/TextInputInnerAction.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/TextInputInnerVisualSlot.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/TextInputWrapper.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/UnderlineTabbedInterface.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/UnstyledTextInput.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/ValidationAnimationContainer.module.css'),
+  path.resolve(import.meta.dirname, '../Label/Label.module.css'),
 ])
 const files = Array.from(allowlist).map(file => {
   return [path.relative(path.resolve(import.meta.dirname, '..'), file), file]

packages/react/src/internal/components/Caret.module.css

@@ -1,16 +1,18 @@
-.Caret {
-  pointer-events: none;
-  position: absolute;
-}
+@layer primer.components.Caret {
+  .Caret {
+    pointer-events: none;
+    position: absolute;
+  }
 
-.CaretTriangle {
-  /* stylelint-disable-next-line primer/colors */
-  fill: var(--caret-bg, var(--bgColor-default));
-}
+  .CaretTriangle {
+    /* stylelint-disable-next-line primer/colors */
+    fill: var(--caret-bg, var(--bgColor-default));
+  }
 
-.CaretBorder {
-  fill: none;
-  /* stylelint-disable-next-line primer/colors */
-  stroke: var(--caret-border-color, var(--borderColor-default));
-  stroke-width: var(--caret-border-width, var(--borderWidth-thin));
+  .CaretBorder {
+    fill: none;
+    /* stylelint-disable-next-line primer/colors */
+    stroke: var(--caret-border-color, var(--borderColor-default));
+    stroke-width: var(--caret-border-width, var(--borderWidth-thin));
+  }
 }

packages/react/src/internal/components/InputLabel.module.css

@@ -1,33 +1,35 @@
-.Label {
-  display: block;
-  font-size: var(--text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
-  color: var(--fgColor-default);
-  cursor: pointer;
-  align-self: flex-start;
+@layer primer.components.InputLabel {
+  .Label {
+    display: block;
+    font-size: var(--text-body-size-medium);
+    font-weight: var(--base-text-weight-semibold);
+    color: var(--fgColor-default);
+    cursor: pointer;
+    align-self: flex-start;
 
-  &:where([data-control-disabled]) {
-    color: var(--control-fgColor-disabled);
-    cursor: not-allowed;
-  }
+    &:where([data-control-disabled]) {
+      color: var(--control-fgColor-disabled);
+      cursor: not-allowed;
+    }
 
-  &:where([data-visually-hidden]) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    /* stylelint-disable-next-line primer/spacing */
-    margin: -1px;
-    overflow: hidden;
-    /* stylelint-disable-next-line property-no-deprecated */
-    clip: rect(0 0 0 0);
-    white-space: nowrap;
-    border: 0;
-    clip-path: inset(50%);
+    &:where([data-visually-hidden]) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      /* stylelint-disable-next-line primer/spacing */
+      margin: -1px;
+      overflow: hidden;
+      /* stylelint-disable-next-line property-no-deprecated */
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      border: 0;
+      clip-path: inset(50%);
+    }
   }
-}
 
-.RequiredText {
-  display: flex;
-  column-gap: var(--base-size-4);
+  .RequiredText {
+    display: flex;
+    column-gap: var(--base-size-4);
+  }
 }

packages/react/src/internal/components/InputValidation.module.css

@@ -1,32 +1,34 @@
-.InputValidation {
-  display: flex;
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-semibold);
-  /* stylelint-disable-next-line primer/colors */
-  color: var(--inputValidation-fgColor);
+@layer primer.components.InputValidation {
+  .InputValidation {
+    display: flex;
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-semibold);
+    /* stylelint-disable-next-line primer/colors */
+    color: var(--inputValidation-fgColor);
 
-  & :where(a) {
-    color: currentColor;
-    text-decoration: underline;
-  }
+    & :where(a) {
+      color: currentColor;
+      text-decoration: underline;
+    }
 
-  &:where([data-validation-status='success']) {
-    --inputValidation-fgColor: var(--fgColor-success);
-  }
+    &:where([data-validation-status='success']) {
+      --inputValidation-fgColor: var(--fgColor-success);
+    }
 
-  &:where([data-validation-status='error']) {
-    --inputValidation-fgColor: var(--fgColor-danger);
+    &:where([data-validation-status='error']) {
+      --inputValidation-fgColor: var(--fgColor-danger);
+    }
   }
-}
 
-.ValidationIcon {
-  display: flex;
-  margin-top: var(--base-size-2);
-  margin-inline-end: var(--base-size-4);
-  min-height: var(--inputValidation-iconSize);
-}
+  .ValidationIcon {
+    display: flex;
+    margin-top: var(--base-size-2);
+    margin-inline-end: var(--base-size-4);
+    min-height: var(--inputValidation-iconSize);
+  }
 
-.ValidationText {
-  /* stylelint-disable-next-line primer/typography */
-  line-height: var(--inputValidation-lineHeight);
+  .ValidationText {
+    /* stylelint-disable-next-line primer/typography */
+    line-height: var(--inputValidation-lineHeight);
+  }
 }