Update primer/spacing for CSS properties (#400)

* Update primer/spacing for CSS properties

* Adjust the rest of the test for new plugin

* Make lint fixes

* Writing a tsx test case

* Fix no-override test by not using default config

* Switch to cjs

* Fix good example code

* Add fix for names like border-top

* Fix error end column

* Final fix

* Add ability to replace +-1 space sizes

* Remove semicolons

* Create seven-apples-rhyme.md

* Ignore js files

* Enable spacing in css modules

* Enable spacing in tsx files

* Ignore themeGet

* Updating primitives

* Using createRequire

* Use 7.17.1

.changeset/seven-apples-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@primer/stylelint-config": minor
+---
+
+Update primer/spacing for CSS properties

.stylelintrc.json

@@ -1 +1 @@
-{ "extends": ["./dist/index.cjs"], "cache": false }
+{ "extends": ["./dist/index.cjs"], "ignoreFiles": ["**/*.js", "**/*.cjs", "**/*.ts", "**/*.mjs"], "cache": false }

__tests__/__fixtures__/good/example.module.css

@@ -21,13 +21,16 @@
 }
 
 .gradient-left {
+  /* stylelint-disable-next-line primer/spacing */
   top: var(--offset);
+  /* stylelint-disable-next-line primer/spacing */
   left: var(--offset);
   /* stylelint-disable-next-line primer/colors */
   background: radial-gradient(30% 70% at 50% 50%, rgb(130 80 223 / 0.2) 0%, rgb(130 80 223 / 0) 100%);
 }
 
 .gradient-right {
+  /* stylelint-disable-next-line primer/spacing */
   right: var(--offset);
   /* stylelint-disable-next-line primer/colors */
   background: radial-gradient(30% 70% at 50% 50%, rgb(9 107 222 / 0.3) 0%, rgb(9 107 222 / 0) 100%);
@@ -39,13 +42,16 @@
 }
 
 .header-background {
+  /* stylelint-disable-next-line primer/spacing */
   top: -220px;
+  /* stylelint-disable-next-line primer/spacing */
   right: -110px;
   height: 580px;
 }
 
 .header-copilot {
   top: -35%;
+  /* stylelint-disable-next-line primer/spacing */
   right: 100px;
   height: 146px;
 }
@@ -56,6 +62,7 @@
 }
 
 .negative-margin {
+  /* stylelint-disable-next-line primer/spacing */
   margin: -0.5rem;
 }
 
@@ -120,6 +127,7 @@
   place-items: center;
   width: var(--container-size);
   height: var(--container-size);
+  /* stylelint-disable-next-line primer/spacing */
   padding: var(--space-xsmall);
 }
 

__tests__/__fixtures__/good/example.scss

@@ -5,7 +5,7 @@
   min-width: 180px;
   padding: 0;
   margin: 0;
-  margin-top: $spacer-4;
+  margin-top: var(--base-size-16);
   list-style: none;
   cursor: pointer;
   background: var(--overlay-bgColor);
@@ -15,7 +15,7 @@
 
   .li {
     display: block;
-    padding: $spacer-1 $spacer-2;
+    padding: var(--base-size-4) var(--base-size-8);
     font-weight: $font-weight-semibold;
     border-bottom: $border-width $border-style var(--borderColor-muted);
 
@@ -78,12 +78,12 @@
 .responsive-page {
   @media (max-width: $width-sm) {
     .sugest-container {
-      right: $spacer-2 !important;
-      left: $spacer-2 !important;
+      right: var(--base-size-8) !important;
+      left: var(--base-size-8) !important;
     }
 
     .sugest .li {
-      padding: $spacer-2 $spacer-3;
+      padding: var(--base-size-8) var(--base-size-12);
     }
   }
 }

__tests__/__fixtures__/good/example.tsx

@@ -9,8 +9,9 @@ import {TOAST_ANIMATION_LENGTH, type ToastItem, ToastType} from './types'
 type IToastCloseButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>
 
 const StyledButton = styled.button`
-  padding: 8px;
-  margin: 8px 10px 8px 0px;
+  padding: var(--base-size-8);
+  /* stylelint-disable-next-line primer/spacing */
+  margin: var(--base-size-8) 10px var(--base-size-8) 0px;
   border-radius: 3px;
   color: ${themeGet('colors.fg.onEmphasis')};
   border: 0;
@@ -87,8 +88,10 @@ export const StyledToast = styled.div`
   box-sizing: border-box;
   overflow: hidden;
   max-width: 400px;
+  /* stylelint-disable-next-line primer/spacing */
   bottom: 66px;
-  left: 12px;z-index:99;
+  left: var(--base-size-12);
+  z-index:99;
 
   animation: ${toastEnter} ${TOAST_ANIMATION_LENGTH}ms cubic-bezier(0.25, 1, 0.5, 1);
 

__tests__/index.js

@@ -34,9 +34,10 @@ describe('stylelint-config', () => {
         }
       `).then(data => {
       expect(data).toHaveErrored()
-      expect(data).toHaveWarningsLength(2)
+      expect(data).toHaveWarningsLength(3)
       expect(data).toHaveWarnings([
         'Expected "top" to come before "width" (order/properties-order)',
+        "Please use a primer size variable instead of '.2em'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size (primer/spacing)",
         'Unexpected value "initial" for property "max-width" (declaration-property-value-disallowed-list)',
       ])
     })