fix: flatten v2 into styles for future rework

.github/workflows/stylelint.yml

@@ -0,0 +1,25 @@
+name: Stylelint CSS
+
+on:
+  pull_request:
+    paths:
+      - 'packages/**/*.css'
+
+jobs:
+  stylelint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run stylelint on CSS files
+        run: yarn lint:css

.stylelintrc.json

@@ -0,0 +1,12 @@
+{
+  "plugins": ["stylelint-order"],
+  "ignoreFiles": [
+    "**/dist/**",
+    "**/node_modules/**",
+    "**/examples/**",
+    "**/devTemplate/**"
+  ],
+  "rules": {
+    "order/properties-alphabetical-order": true
+  }
+}

package.json

@@ -86,6 +86,8 @@
     "sass": "^1.89.2",
     "storybook": "^10.1.11",
     "storybook-addon-fetch-mock": "^2.0.1",
+    "stylelint": "^17.3.0",
+    "stylelint-order": "^7.0.1",
     "syncpack": "^13.0.4",
     "use-debounce": "^10.1.0",
     "vite": "^7.3.1",
@@ -100,6 +102,9 @@
     "./packages/*/src/**/*.{js,jsx,ts,tsx}": [
       "eslint --config .eslintrc.json",
       "npx prettier --write"
+    ],
+    "packages/**/*.css": [
+      "stylelint --fix"
     ]
   },
   "private": true,
@@ -138,6 +143,8 @@
     "knip:unused-exports": "knip --include exports,types",
     "knip:unused-files": "knip --include files",
     "lint": "eslint packages/*/src/**/*.{js,jsx,ts,tsx}",
+    "lint:css": "stylelint 'packages/**/*.css'",
+    "lint:css:fix": "stylelint 'packages/**/*.css' --fix",
     "postinstall": "patch-package",
     "predeploy": "storybook build --output-dir .storybook_build && touch .storybook_build/.nojekyll",
     "prepare": "husky install",

packages/chart/src/components/Annotations/components/AnnotationDraggable.styles.css

@@ -1,6 +1,6 @@
 .cdc-open-viz-module.type-chart .annotation__desktop-label {
-  line-height: 1.1rem;
   font-size: 16px;
+  line-height: 1.1rem;
 }
 
 .cdc-open-viz-module.type-chart {
@@ -9,17 +9,17 @@
   }
 
   .annotation__has-dropdown-number {
-    display: flex;
-    justify-content: center;
     align-items: center;
+    border: 1px solid #666;
     border-radius: 50%;
-    width: 24px;
+    box-sizing: border-box;
+    display: flex;
+    font-size: 14px;
     height: 24px;
-    min-width: 24px;
+    justify-content: center;
     min-height: 24px;
-    border: 1px solid #666;
+    min-width: 24px;
     text-align: center;
-    font-size: 14px;
-    box-sizing: border-box;
+    width: 24px;
   }
 }

packages/chart/src/components/Annotations/components/AnnotationList.styles.css

@@ -1,23 +1,23 @@
 .cdc-open-viz-module.type-chart {
   .annotation__title-circle {
-    display: flex;
-    justify-content: center;
     align-items: center;
+    border: 1px solid #666;
     border-radius: 50%;
-    padding: 8px;
-    width: 24px;
+    display: flex;
+    font-size: 14px;
     height: 24px;
-    margin-right: 5px;
+    justify-content: center;
     line-height: 1.5rem;
-    border: 1px solid #666;
+    margin-right: 5px;
+    padding: 8px;
     text-align: center;
-    font-size: 14px;
+    width: 24px;
   }
 
   .annotation__title-wrapper {
+    align-items: center;
     display: flex;
     flex-wrap: nowrap;
-    align-items: center;
   }
 
   .annotation__title-wrapper .annotation__title-text {
@@ -33,7 +33,7 @@
   }
 
   .cove-component__content {
-    container-type: inline-size;
     container-name: content;
+    container-type: inline-size;
   }
 }

packages/chart/src/components/EditorPanel/components/Panels/Panel.Visual.tsx

@@ -32,7 +32,7 @@ import { PaletteSelector, DeveloperPaletteRollback } from '@cdc/core/components/
 import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 import { CustomColorsEditor } from '@cdc/core/components/CustomColorsEditor'
 import { getColorScale } from '../../../../helpers/getColorScale'
-import '@cdc/core/styles/v2/components/editor.scss'
+import '@cdc/core/styles/components/editor.scss'
 import './panelVisual.styles.css'
 
 const PanelVisual: FC<PanelProps> = props => {

packages/chart/src/components/Legend/LegendGroup/LegendGroup.styles.css

@@ -6,14 +6,14 @@
     margin-bottom: 0.5rem;
 
     .group-item .visx-legend-label {
-      font-weight: 400;
       font-size: 0.889rem;
+      font-weight: 400;
       margin-bottom: 0.5rem;
     }
     .group-label {
-      font-weight: 500;
       font-family: Nunito, sans-serif;
       font-size: 1rem;
+      font-weight: 500;
     }
   }
 
@@ -22,19 +22,19 @@
     grid-gap: 10px;
 
     &.group-item {
+      align-items: flex-start;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
     }
 
     & .inactive {
       opacity: 0.5;
       transition: 0.2s all;
     }
     & .highlighted {
+      border-radius: 1px;
       outline: 1px solid #005ea2;
       outline-offset: 5px;
-      border-radius: 1px;
     }
   }
 }

packages/chart/src/components/SmallMultiples/SmallMultiples.css

@@ -1,13 +1,13 @@
 .small-multiples-container {
-  width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .small-multiples-grid {
   display: grid;
-  width: 100%;
   flex: 1;
+  width: 100%;
 }
 
 .small-multiple-tile {
@@ -20,13 +20,13 @@
 }
 
 .tile-title {
-  margin: 0;
   font-weight: 700;
-  text-align: left;
   line-height: 1.3;
+  margin: 0;
+  text-align: left;
 }
 
 .tile-chart {
-  width: 100%;
   flex-shrink: 0;
+  width: 100%;
 }

packages/chart/src/components/WarmingStripes/WarmingStripesGradientLegend.css

@@ -4,16 +4,16 @@
 }
 
 .warming-stripes-gradient-legend__title {
+  font-size: 16px;
   font-weight: 600;
   margin-bottom: 0.5rem;
-  font-size: 16px;
 }
 
 .warming-stripes-gradient-legend__description {
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-  font-size: 14px;
   color: #555;
+  font-size: 14px;
+  margin-bottom: 1rem;
+  margin-top: 0.5rem;
 }
 
 .warming-stripes-gradient-legend__container {
@@ -22,14 +22,14 @@
 
 .warming-stripes-gradient-legend__svg {
   display: block;
-  width: 100%;
   overflow: visible;
+  width: 100%;
 }
 
 .warming-stripes-gradient-legend__series-label {
-  text-align: center;
-  margin-top: 0.5rem;
+  color: #333;
   font-size: 14px;
   font-weight: 500;
-  color: #333;
+  margin-top: 0.5rem;
+  text-align: center;
 }

packages/chart/src/scss/main.scss

@@ -1,4 +1,4 @@
-@import '@cdc/core/styles/v2/utils/breakpoints';
+@import '@cdc/core/styles/utils/breakpoints';
 
 .form-container {
   overflow-y: auto;

packages/core/components/Alert/components/Alert.styles.css

@@ -5,8 +5,8 @@
 
   .alert {
     align-items: center;
-    justify-content: center;
     display: inline-flex;
+    justify-content: center;
 
     .cove-icon {
       margin: 5px;