Bug Fix: Fixing bad CSS in action-list.css and writing test to check …

…for error (#1539)

.changeset/little-bees-doubt.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Bug Fix: Fixing bad CSS in action-list.css and writing test to check for error

.stylelintrc.json

@@ -8,6 +8,7 @@
     "no-descending-specificity": null,
     "declaration-block-no-redundant-longhand-properties": null,
     "color-function-notation": "legacy",
+    "selector-nested-pattern": "^&\\s?\\W",
     "at-rule-no-unknown": [
       true,
       {

app/components/primer/alpha/action_list/action-list.pcss

@@ -47,7 +47,7 @@
   /* hide divider if item is active */
   & .ActionListItem--navActive {
     & .ActionListItem-label::before,
-    + .ActionListItem .ActionListItem-label::before {
+    & + .ActionListItem .ActionListItem-label::before {
       visibility: hidden;
     }
   }
@@ -196,7 +196,7 @@
 
   &.ActionListItem--navActive {
     &:not(.ActionListItem--subItem) {
-      .ActionListItem-label {
+      & .ActionListItem-label {
         font-weight: var(--base-text-weight-semibold, 600);
       }
     }
@@ -406,7 +406,7 @@
       }
 
       &::before,
-      + .ActionListItem::before {
+      & + .ActionListItem::before {
         visibility: hidden;
       }
 
@@ -579,7 +579,7 @@
     border: 0;
   }
 
-  .ActionList-sectionDivider-title {
+  & .ActionList-sectionDivider-title {
     font-size: var(--primer-text-body-size-small, 12px);
     font-weight: var(--base-text-weight-semibold, 600);
     color: var(--color-fg-muted);

app/components/primer/beta/button.pcss

@@ -127,11 +127,11 @@ summary.Button {
   padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);
   gap: var(--primer-control-small-gap, 4px);
 
-  .Button-label {
+  & .Button-label {
     line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
   }
 
-  .Button-content {
+  & .Button-content {
     & > :not(:last-child) {
       margin-right: var(--primer-control-small-gap, 4px);
     }
@@ -143,11 +143,11 @@ summary.Button {
   padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);
   gap: var(--primer-control-large-gap, 8px);
 
-  .Button-label {
+  & .Button-label {
     line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));
   }
 
-  .Button-content {
+  & .Button-content {
     & > :not(:last-child) {
       margin-right: var(--primer-control-large-gap, 8px);
     }

test/components/component_css_test.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require "components/test_helper"
+
+class ComponentCssTest < Minitest::Test
+  include Primer::ComponentTestHelpers
+
+  def test_css_gets_compiled
+    assert File.exist?("app/assets/styles/primer_view_components.css"), "Compiled CSS file not found"
+  end
+
+  def test_css_is_compiled_correctly
+    Dir["app/components/**/*.css"].each do |file|
+      css = File.read(file)
+
+      refute(css.include?("@import"), "CSS files should not import other CSS files:\n#{file} contains @import")
+      refute(css.include?("&"), "CSS Nesting wasn't compiled correctly:\n#{file} contains &")
+    end
+  end
+end