don't auto-install peers, fix 5 vulnerabilities and upgrade stylelint

.npmrc

@@ -1 +1,2 @@
-strict-peer-dependencies=false
+strict-peer-dependencies=false
+auto-install-peers=false

.stylelintrc.json

@@ -1,16 +1,12 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
   "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-styled-components",
-    "stylelint-config-prettier"
+    "stylelint-config-standard"
   ],
-  "customSyntax": "postcss-scss",
+  "customSyntax": "postcss-styled-syntax",
   "rules": {
     "selector-type-case": ["lower", { "ignoreTypes": ["/^\\$\\w+/"] }],
     "selector-type-no-unknown": [true, { "ignoreTypes": ["/-styled-mixin/", "/^\\$\\w+/"] }],
     "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue", "currentColor"] }],
-    "declaration-colon-newline-after": null,
     "declaration-empty-line-before": null,
     "property-no-unknown": [
       true,
@@ -20,11 +16,19 @@
     ],
     "color-function-notation": "legacy",
     "alpha-value-notation": "number",
-    "scss/operator-no-newline-after": null,
-    "scss/operator-no-unspaced": null,
     "custom-property-pattern": null,
     "rule-empty-line-before": null,
     "keyframes-name-pattern": null,
-    "keyframe-block-no-duplicate-selectors": null
+    "keyframe-block-no-duplicate-selectors": null,
+    "no-empty-source": null,
+    "media-query-no-invalid": null,
+    "at-rule-empty-line-before": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "media-feature-range-notation": null,
+    "declaration-property-value-no-unknown": [true, {
+      "ignoreProperties": {
+        "-moz-background-clip": ["text"]
+      }
+    }]
   }
 }

package.json

@@ -19,7 +19,7 @@
     "buildandstart:glocal": "pnpm build:glocal && pnpm start",
     "tenv": "ens-test-env -a",
     "denv": "pnpm tenv start --no-graph --no-build --extra-time 12232000 --verbosity 1",
-    "lint": "next lint && pnpm stylelint stylelint \"./src/**/*.tsx\"",
+    "lint": "next lint && stylelint \"./src/**/*.tsx\"",
     "lint:types": "tsc --noEmit",
     "lint:fix": "next lint --fix",
     "export": "next export",
@@ -75,7 +75,7 @@
     "immer": "^9.0.15",
     "iso-639-1": "^2.1.15",
     "markdown-to-jsx": "^7.7.3",
-    "next": "13.5.6",
+    "next": "13.5.8",
     "node-fetch": "^3.3.2",
     "react": "*",
     "react-confetti": "^6.1.0",
@@ -108,8 +108,9 @@
     "@openzeppelin/contracts": "^4.7.3",
     "@openzeppelin/test-helpers": "^0.5.16",
     "@playwright/test": "^1.48.2",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.17.17",
@@ -121,7 +122,7 @@
     "@types/ws": "^8.5.10",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.0.5",
     "@vitest/spy": "^3.0.5",
     "cbor": "^10.0.3",
@@ -139,26 +140,23 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^6.0.2",
-    "eslint-plugin-vitest": "^0.4.0",
+    "eslint-plugin-vitest": "^0.5.4",
     "ethers": "^5.7.2",
     "hardhat": "^2.22.18",
     "hardhat-dependency-compiler": "^1.1.3",
     "hardhat-deploy": "^0.11.12",
     "husky": "^7.0.4",
     "jsdom": "^24.1.0",
-    "knip": "^5.27.2",
+    "knip": "^5.44.0",
     "msw": "^2.7.0",
     "next-dev-https": "^0.1.2",
     "next-router-mock": "^0.9.10",
     "pako": "^2.1.0",
-    "postcss-scss": "^4.0.4",
+    "postcss-styled-syntax": "^0.7.1",
     "prettier": "3.0.3",
     "sitemap": "^7.1.1",
-    "stylelint": "14.11.0",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-standard-scss": "^5.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
+    "stylelint": "16.14.1",
+    "stylelint-config-standard": "^37.0.0",
     "stylelint-webpack-plugin": "^3.3.0",
     "svgo": "latest",
     "ts-node": "^10.9.1",

src/components/@molecules/AdvancedEditor/AdvancedEditorTabs.tsx

@@ -30,7 +30,7 @@ const getIndicatorStyle = (
   else if ($isDirty) color = theme.colors.green
   if (!color) return ''
   return css`
-    :after {
+    ::after {
       content: '';
       position: absolute;
       background-color: ${color};

src/components/@molecules/EditResolver/EditResolverForm.tsx

@@ -16,6 +16,7 @@ const LatestResolverLabel = styled.div<{ $offset: boolean }>(
   ({ theme, $offset }) => css`
     display: flex;
     flex-direction: column;
+
     /* ${$offset && `padding-top: ${theme.space['5.5']};`} */
   `,
 )

src/components/@molecules/Hamburger/MainMenu.tsx

@@ -138,7 +138,7 @@ const miscSectionStyle = css(
 
     @media (min-width: ${theme.breakpoints.sm}px) {
       background-color: transparent;
-      border-radius: none;
+      border-radius: 0;
     }
   `,
 )

src/components/@molecules/ProfileEditor/Avatar/AvatarButton.tsx

@@ -34,7 +34,7 @@ const Container = styled.button<{ $error?: boolean; $validated?: boolean; $dirty
 
     ${$dirty &&
     css`
-      :after {
+      ::after {
         background-color: ${theme.colors.blue};
         border-color: ${theme.colors.backgroundPrimary};
         transform: translate(-20%, 20%) scale(1);
@@ -43,7 +43,7 @@ const Container = styled.button<{ $error?: boolean; $validated?: boolean; $dirty
 
     ${$validated &&
     css`
-      :after {
+      ::after {
         background-color: ${theme.colors.green};
         border-color: ${theme.colors.backgroundPrimary};
         transform: translate(-20%, 20%) scale(1);
@@ -52,7 +52,7 @@ const Container = styled.button<{ $error?: boolean; $validated?: boolean; $dirty
 
     ${$error &&
     css`
-      :after {
+      ::after {
         background-color: ${theme.colors.red};
         border-color: ${theme.colors.backgroundPrimary};
         transform: translate(-20%, 20%) scale(1);

src/components/@molecules/SearchInput/SearchInput.tsx

@@ -93,7 +93,7 @@ const SearchResultsContainer = styled.div<{
     ${$state === 'entered'
       ? css`
           opacity: 1;
-          transform: translateY(0px);
+          transform: translateY(0);
         `
       : css`
           & > div {

src/components/@molecules/VerificationBadge/VerificationBadge.tsx

@@ -38,7 +38,7 @@ const InnerContainer = styled.div(
     display: flex;
     transition: transform 0.2s;
 
-    // Counteract the hover of child element
+    /* Counteract the hover of child element */
     &:hover {
       transform: translateY(1px);
     }

src/components/ProfileSnippet.tsx

@@ -22,7 +22,7 @@ const Container = styled.div<{ $banner?: string }>(
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-size: 100% ${theme.space['28']};
-    background-position-y: -1px; // for overlap with border i think
+    background-position-y: -1px; /* for overlap with border i think */
     background-color: ${theme.colors.background};
     border-radius: ${theme.radii['2xLarge']};
     border: ${theme.space.px} solid ${theme.colors.border};

src/components/pages/profile/[name]/registration/Registration.tsx

@@ -93,7 +93,7 @@ const MoonPayHeader = styled.div(
 
 const MoonPayIFrame = styled.iframe(
   ({ theme }) => css`
-    max-width: 590px; // Prevent moonpay iframe from going into modal mode
+    max-width: 590px; /* Prevent moonpay iframe from going into modal mode */
     padding: ${theme.space['2']};
     background-color: #fff;
 

src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.tsx

@@ -22,6 +22,7 @@ const Container = styled.div(({ theme }) => [
     gap: ${theme.space[2]};
     border-bottom: 1px solid ${theme.colors.border};
     padding: ${theme.space['4']} 0;
+
     @media (min-width: ${theme.breakpoints.lg}px) {
       border-bottom: none;
       border-right: 1px solid ${theme.colors.border};

src/components/pages/profile/[name]/tabs/PermissionsTab/Section.tsx

@@ -46,6 +46,7 @@ const SectionItemContainer = styled.div<{ $screen?: 'desktop' | 'mobile' }>(
     gap: ${theme.space['4']};
 
     padding: ${theme.space['4']};
+
     /* border-top: ${theme.space.px} solid ${theme.colors.border}; */
 
     ${$screen === 'desktop' &&
@@ -137,6 +138,7 @@ export const SectionFooter = styled.div<{ $screen?: Screen }>(
     flex-direction: column;
     gap: ${theme.space['4']};
     padding: ${theme.space['4']};
+
     /* border-top: ${theme.space.px} solid ${theme.colors.border}; */
 
     ${$screen === 'desktop' &&

src/layouts/Basic.tsx

@@ -22,8 +22,10 @@ const Container = styled.div(
     flex-direction: column;
     align-items: stretch;
     @supports (-webkit-touch-callout: none) {
-      // hack for iOS/iPadOS Safari
-      // width should always be 100% - total padding
+      /*
+        hack for iOS/iPadOS Safari
+        width should always be 100% - total padding
+       */
       width: calc(100% - calc(var(--padding-size) * 2));
       box-sizing: content-box;
     }

src/pages/404.tsx

@@ -21,7 +21,6 @@ const LogoAndLanguage = styled.div(
     align-items: center;
     justify-content: flex-start;
     gap: ${theme.space['4']};
-    flex-gap: ${theme.space['4']};
   `,
 )
 

src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx

@@ -84,7 +84,7 @@ const NamesListItemContent = styled.div(
 const NamesListItemTitle = styled.div(
   ({ theme }) => css`
     font-size: ${theme.space['5.5']};
-    background: 'red';
+    background: red;
   `,
 )