stylelint 14 update

package.json

@@ -50,6 +50,8 @@
         "jest-environment-jsdom": "^29.2.0",
         "node-polyfill-webpack-plugin": "^2.0.1",
         "phosphor-react": "^1.4.1",
+        "postcss": "^8.4.20",
+        "postcss-styled-components": "^0.2.0",
         "prettier": "^2.7.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -58,12 +60,10 @@
         "redux-saga": "^1.2.1",
         "rimraf": "^3.0.2",
         "stream-browserify": "^3.0.0",
-        "stylelint": "^13.13.1",
-        "stylelint-config-idiomatic-order": "^8.1.0",
-        "stylelint-config-prettier": "^9.0.3",
-        "stylelint-config-standard": "^22.0.0",
-        "stylelint-config-styled-components": "^0.1.1",
-        "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
+        "stylelint": "^14.16.1",
+        "stylelint-config-idiomatic-order": "^9.0.0",
+        "stylelint-config-recommended": "^9.0.0",
+        "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
         "ts-jest": "^29.0.3",
         "ts-loader": "^9.4.1",
         "ts-node": "^10.9.1",

src/base-components/styled/Button.tsx

@@ -8,12 +8,12 @@ export const Button = styled.button<ButtonProps>`
     padding-right: 20px;
     padding-left: 20px;
     border: none;
+    border-radius: 4px;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 
     background-color: ${(props) =>
         props.active ? props.theme.colors.buttonActiveBackgroundColor : props.theme.colors.buttonBackgroundColor};
-    border-radius: 4px;
     color: ${(props) => (props.active ? props.theme.colors.buttonActiveTextColor : props.theme.colors.buttonTextColor)};
     font-size: 13px;
 

src/base-components/styled/Drawer.tsx

@@ -13,5 +13,5 @@ export const Drawer = styled.div<DrawerProps>`
     margin-left: ${(props) => (props.visible ? '0' : '-500px')};
 
     background-color: ${(props) => props.theme.colors.sidebarBackground};
-    transition: all 0.5s cubic-bezier(0.62, 0.28, 0.23, 0.99); ;
+    transition: all 0.5s cubic-bezier(0.62, 0.28, 0.23, 0.99);
 `;

src/base-components/styled/Menu.tsx

@@ -31,8 +31,8 @@ export const MenuContainer = styled.div<MenuContainerProps>`
     padding: 1px;
 
     border: 1px solid ${(props) => props.theme.colors.menuBorderColor};
-    background-color: ${(props) => props.theme.colors.sidebarBackground};
     border-radius: 2px;
+    background-color: ${(props) => props.theme.colors.sidebarBackground};
     color: ${(props) => props.theme.colors.sideBarText};
 `;
 

src/base-components/styled/ToolbarButton.tsx

@@ -10,11 +10,11 @@ export const ToolbarButton = styled(Button)`
     height: ${toolbarButtonSideLengthInPx}px;
 
     padding: ${toolbarButtonPaddingInPx}px;
+    border-radius: 4px;
     margin: 0;
 
     background-color: ${(props) =>
         props.active ? props.theme.colors.toolbarButtonActiveBackground : props.theme.colors.toolbarBackgroundColor};
-    border-radius: 4px;
     color: ${(props) => props.theme.colors.toolbarTextColor};
     font-size: 13px;
 

src/sidebar/FeedList/Folder.tsx

@@ -69,9 +69,9 @@ const FolderTitle = styled.label<{ highlight: boolean }>`
 
 const ToggleIndicator = styled.div`
     width: ${({ theme }) => theme.toggleIndicatorSize}px;
+    flex-shrink: 0; /* only shrink title */
     padding-right: ${({ theme }) => theme.iconRightSpacing}px;
     margin-bottom: -6px;
-    flex-shrink: 0; // only shrink title
 `;
 
 const FolderIcon = styled(FolderSimple)`

src/sidebar/NewFeedForm/NewFeedForm.tsx

@@ -34,8 +34,8 @@ const MessageBox = styled.div<{ show: boolean }>`
     min-height: 2.2rem;
     padding: 0.5rem 1rem;
 
-    background-color: ${(props) => (props.show ? props.theme.colors.messageBackgroundColor : 'inherit')};
     border-radius: 4px;
+    background-color: ${(props) => (props.show ? props.theme.colors.messageBackgroundColor : 'inherit')};
     color: ${(props) => props.theme.colors.messageTextColor};
 `;
 

src/sidebar/NewFeedForm/NewFeedsList.tsx

@@ -12,8 +12,8 @@ const List = styled.ul`
     padding-left: 12px;
     border: 1px solid;
     border-color: ${(props) => props.theme.colors.menuBorderColor};
-    margin-top: 6px;
     border-radius: 4px;
+    margin-top: 6px;
     overflow-y: scroll;
 `;
 

stylelintrc.json

@@ -1,6 +1,7 @@
 {
-    "extends": ["stylelint-config-styled-components", "stylelint-config-idiomatic-order", "stylelint-config-prettier"],
+    "extends": ["stylelint-config-recommended", "stylelint-config-idiomatic-order"],
     "plugins": ["stylelint-declaration-block-no-ignored-properties"],
+    "customSyntax": "postcss-styled-components",
     "rules": {
         "no-empty-source": null,
         "declaration-empty-line-before": null,