From 5ff2f89afb71fd2976c487692ec73085241e09c7 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 6 Jun 2021 00:32:24 +0800
Subject: [PATCH] Stop use postcss-nested postcss-extend-rule

---
 package.json                                  |  2 -
 postcss.config.js                             |  2 -
 ...onfig.module.css => APIConfig.module.scss} |  0
 src/components/APIConfig.tsx                  |  2 +-
 ...ry.module.css => APIDiscovery.module.scss} |  0
 src/components/APIDiscovery.tsx               |  2 +-
 ...ist.module.css => BackendList.module.scss} |  0
 src/components/BackendList.tsx                |  2 +-
 .../{Button.module.css => Button.module.scss} |  0
 src/components/Button.tsx                     |  2 +-
 ...s => CollapsibleSectionHeader.module.scss} |  0
 src/components/CollapsibleSectionHeader.tsx   |  2 +-
 ...module.css => ConnectionTable.module.scss} |  0
 src/components/ConnectionTable.tsx            |  2 +-
 ...ons.module.css => Connections.module.scss} |  0
 src/components/Connections.tsx                |  2 +-
 ...r.module.css => ContentHeader.module.scss} |  0
 src/components/ContentHeader.tsx              |  2 +-
 ....css => ErrorBoundaryFallback.module.scss} |  0
 src/components/ErrorBoundaryFallback.tsx      |  2 +-
 .../{Field.module.css => Field.module.scss}   |  0
 src/components/Field.tsx                      |  2 +-
 .../{Home.module.css => Home.module.scss}     |  0
 src/components/Home.tsx                       |  2 +-
 .../{Input.module.css => Input.module.scss}   |  0
 src/components/Input.tsx                      |  2 +-
 ...Loading.module.css => Loading.module.scss} |  0
 src/components/Loading.tsx                    |  2 +-
 ...ading2.module.css => Loading2.module.scss} |  0
 src/components/Loading2.tsx                   |  2 +-
 .../{Logs.module.css => Logs.module.scss}     |  0
 src/components/Logs.tsx                       |  2 +-
 .../{Modal.module.css => Modal.module.scss}   |  0
 src/components/Modal.tsx                      |  2 +-
 ...s => ModalCloseAllConnections.module.scss} |  0
 src/components/ModalCloseAllConnections.tsx   |  4 +-
 .../{Root.module.css => Root.module.scss}     |  0
 src/components/{Root.css => Root.scss}        |  0
 src/components/Root.tsx                       |  4 +-
 .../{Rule.module.css => Rule.module.scss}     |  0
 src/components/Rule.tsx                       |  2 +-
 .../{Rules.module.css => Rules.module.scss}   |  0
 src/components/Rules.tsx                      |  7 +--
 .../{Search.module.css => Search.module.scss} |  0
 src/components/Search.tsx                     |  2 +-
 ...ction.module.css => Selection.module.scss} |  0
 src/components/Selection.tsx                  |  2 +-
 ...SideBar.module.css => SideBar.module.scss} |  0
 src/components/SideBar.tsx                    |  2 +-
 ...SvgYacd.module.css => SvgYacd.module.scss} |  0
 src/components/SvgYacd.tsx                    |  2 +-
 ...ch.module.css => ToggleSwitch.module.scss} |  0
 src/components/ToggleSwitch.tsx               |  2 +-
 .../{About.module.css => About.module.scss}   |  0
 src/components/about/About.tsx                |  2 +-
 ...Proxies.module.css => Proxies.module.scss} |  0
 src/components/proxies/Proxies.tsx            |  7 +--
 .../{Proxy.module.css => Proxy.module.scss}   |  0
 src/components/proxies/Proxy.tsx              |  2 +-
 ...roup.module.css => ProxyGroup.module.scss} |  0
 src/components/proxies/ProxyGroup.tsx         |  2 +-
 ...cy.module.css => ProxyLatency.module.scss} |  0
 src/components/proxies/ProxyLatency.tsx       |  2 +-
 ...yList.module.css => ProxyList.module.scss} |  0
 src/components/proxies/ProxyList.tsx          |  2 +-
 ...r.module.css => ProxyProvider.module.scss} |  0
 src/components/proxies/ProxyProvider.tsx      |  2 +-
 ...ttings.module.css => Settings.module.scss} |  0
 src/components/proxies/Settings.tsx           |  2 +-
 src/components/proxies/TextFilter.tsx         | 17 -------
 ...odule.css => RuleProviderItem.module.scss} |  0
 src/components/rules/RuleProviderItem.tsx     |  2 +-
 src/components/rules/TextFilter.tsx           | 18 --------
 ...Modal.module.css => BaseModal.module.scss} |  0
 src/components/shared/BaseModal.tsx           |  4 +-
 .../{Basic.module.css => Basic.module.scss}   |  0
 src/components/shared/Basic.tsx               |  2 +-
 .../{Fab.module.css => Fab.module.scss}       |  0
 src/components/shared/Fab.tsx                 |  2 +-
 ...Icon.module.css => RotateIcon.module.scss} |  0
 src/components/shared/RotateIcon.tsx          |  2 +-
 .../{Select.module.css => Select.module.scss} |  0
 src/components/shared/Select.tsx              |  2 +-
 .../{Styled.module.css => Styled.module.scss} |  0
 src/components/shared/Styled.tsx              |  2 +-
 .../TextFitler.module.scss}                   |  0
 src/components/shared/TextFitler.tsx          | 21 +++++++++
 yarn.lock                                     | 46 +------------------
 88 files changed, 71 insertions(+), 131 deletions(-)
 rename src/components/{APIConfig.module.css => APIConfig.module.scss} (100%)
 rename src/components/{APIDiscovery.module.css => APIDiscovery.module.scss} (100%)
 rename src/components/{BackendList.module.css => BackendList.module.scss} (100%)
 rename src/components/{Button.module.css => Button.module.scss} (100%)
 rename src/components/{CollapsibleSectionHeader.module.css => CollapsibleSectionHeader.module.scss} (100%)
 rename src/components/{ConnectionTable.module.css => ConnectionTable.module.scss} (100%)
 rename src/components/{Connections.module.css => Connections.module.scss} (100%)
 rename src/components/{ContentHeader.module.css => ContentHeader.module.scss} (100%)
 rename src/components/{ErrorBoundaryFallback.module.css => ErrorBoundaryFallback.module.scss} (100%)
 rename src/components/{Field.module.css => Field.module.scss} (100%)
 rename src/components/{Home.module.css => Home.module.scss} (100%)
 rename src/components/{Input.module.css => Input.module.scss} (100%)
 rename src/components/{Loading.module.css => Loading.module.scss} (100%)
 rename src/components/{Loading2.module.css => Loading2.module.scss} (100%)
 rename src/components/{Logs.module.css => Logs.module.scss} (100%)
 rename src/components/{Modal.module.css => Modal.module.scss} (100%)
 rename src/components/{ModalCloseAllConnections.module.css => ModalCloseAllConnections.module.scss} (100%)
 rename src/components/{Root.module.css => Root.module.scss} (100%)
 rename src/components/{Root.css => Root.scss} (100%)
 rename src/components/{Rule.module.css => Rule.module.scss} (100%)
 rename src/components/{Rules.module.css => Rules.module.scss} (100%)
 rename src/components/{Search.module.css => Search.module.scss} (100%)
 rename src/components/{Selection.module.css => Selection.module.scss} (100%)
 rename src/components/{SideBar.module.css => SideBar.module.scss} (100%)
 rename src/components/{SvgYacd.module.css => SvgYacd.module.scss} (100%)
 rename src/components/{ToggleSwitch.module.css => ToggleSwitch.module.scss} (100%)
 rename src/components/about/{About.module.css => About.module.scss} (100%)
 rename src/components/proxies/{Proxies.module.css => Proxies.module.scss} (100%)
 rename src/components/proxies/{Proxy.module.css => Proxy.module.scss} (100%)
 rename src/components/proxies/{ProxyGroup.module.css => ProxyGroup.module.scss} (100%)
 rename src/components/proxies/{ProxyLatency.module.css => ProxyLatency.module.scss} (100%)
 rename src/components/proxies/{ProxyList.module.css => ProxyList.module.scss} (100%)
 rename src/components/proxies/{ProxyProvider.module.css => ProxyProvider.module.scss} (100%)
 rename src/components/proxies/{Settings.module.css => Settings.module.scss} (100%)
 delete mode 100644 src/components/proxies/TextFilter.tsx
 rename src/components/rules/{RuleProviderItem.module.css => RuleProviderItem.module.scss} (100%)
 delete mode 100644 src/components/rules/TextFilter.tsx
 rename src/components/shared/{BaseModal.module.css => BaseModal.module.scss} (100%)
 rename src/components/shared/{Basic.module.css => Basic.module.scss} (100%)
 rename src/components/shared/{Fab.module.css => Fab.module.scss} (100%)
 rename src/components/shared/{RotateIcon.module.css => RotateIcon.module.scss} (100%)
 rename src/components/shared/{Select.module.css => Select.module.scss} (100%)
 rename src/components/shared/{Styled.module.css => Styled.module.scss} (100%)
 rename src/components/{shared.module.css => shared/TextFitler.module.scss} (100%)
 create mode 100644 src/components/shared/TextFitler.tsx

diff --git a/package.json b/package.json
index a6acddf..45630e5 100644
--- a/package.json
+++ b/package.json
@@ -96,9 +96,7 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "postcss": "8.3.0",
     "postcss-custom-media": "^8.0.0",
-    "postcss-extend-rule": "^3.0.0",
     "postcss-import": "14.0.2",
-    "postcss-nested": "5.0.5",
     "postcss-simple-vars": "^6.0.3",
     "prettier": "2.3.1",
     "resize-observer-polyfill": "^1.5.1",
diff --git a/postcss.config.js b/postcss.config.js
index cef7839..6341387 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -16,8 +16,6 @@ module.exports = {
         },
       ],
     }),
-    require('postcss-nested')(),
     require('autoprefixer')(),
-    require('postcss-extend-rule')(),
   ],
 };
diff --git a/src/components/APIConfig.module.css b/src/components/APIConfig.module.scss
similarity index 100%
rename from src/components/APIConfig.module.css
rename to src/components/APIConfig.module.scss
diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx
index 54e6e58..9b2e7e9 100644
--- a/src/components/APIConfig.tsx
+++ b/src/components/APIConfig.tsx
@@ -4,7 +4,7 @@ import { BackendList } from 'src/components/BackendList';
 import { ClashAPIConfig } from 'src/types';
 
 import { addClashAPIConfig, getClashAPIConfig } from '../store/app';
-import s0 from './APIConfig.module.css';
+import s0 from './APIConfig.module.scss';
 import Button from './Button';
 import Field from './Field';
 import { connect } from './StateProvider';
diff --git a/src/components/APIDiscovery.module.css b/src/components/APIDiscovery.module.scss
similarity index 100%
rename from src/components/APIDiscovery.module.css
rename to src/components/APIDiscovery.module.scss
diff --git a/src/components/APIDiscovery.tsx b/src/components/APIDiscovery.tsx
index 97f3538..82ffbbf 100644
--- a/src/components/APIDiscovery.tsx
+++ b/src/components/APIDiscovery.tsx
@@ -5,7 +5,7 @@ import { getClashAPIConfig } from '../store/app';
 import { fetchConfigs } from '../store/configs';
 import { closeModal } from '../store/modals';
 import APIConfig from './APIConfig';
-import s0 from './APIDiscovery.module.css';
+import s0 from './APIDiscovery.module.scss';
 import Modal from './Modal';
 import { connect } from './StateProvider';
 
diff --git a/src/components/BackendList.module.css b/src/components/BackendList.module.scss
similarity index 100%
rename from src/components/BackendList.module.css
rename to src/components/BackendList.module.scss
diff --git a/src/components/BackendList.tsx b/src/components/BackendList.tsx
index 4bfb64c..8e0d906 100644
--- a/src/components/BackendList.tsx
+++ b/src/components/BackendList.tsx
@@ -8,7 +8,7 @@ import {
 } from 'src/store/app';
 import { ClashAPIConfig } from 'src/types';
 
-import s from './BackendList.module.css';
+import s from './BackendList.module.scss';
 import { connect, useStoreActions } from './StateProvider';
 
 type Config = ClashAPIConfig & { addedAt: number };
diff --git a/src/components/Button.module.css b/src/components/Button.module.scss
similarity index 100%
rename from src/components/Button.module.css
rename to src/components/Button.module.scss
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 97bb141..1725d1b 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import * as React from 'react';
 
-import s0 from './Button.module.css';
+import s0 from './Button.module.scss';
 import { LoadingDot } from './shared/Basic';
 
 const { forwardRef, useCallback } = React;
diff --git a/src/components/CollapsibleSectionHeader.module.css b/src/components/CollapsibleSectionHeader.module.scss
similarity index 100%
rename from src/components/CollapsibleSectionHeader.module.css
rename to src/components/CollapsibleSectionHeader.module.scss
diff --git a/src/components/CollapsibleSectionHeader.tsx b/src/components/CollapsibleSectionHeader.tsx
index bc47ad7..2d5ecd1 100644
--- a/src/components/CollapsibleSectionHeader.tsx
+++ b/src/components/CollapsibleSectionHeader.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ChevronDown } from 'react-feather';
 
 import Button from './Button';
-import s from './CollapsibleSectionHeader.module.css';
+import s from './CollapsibleSectionHeader.module.scss';
 import { SectionNameType } from './shared/Basic';
 
 type Props = {
diff --git a/src/components/ConnectionTable.module.css b/src/components/ConnectionTable.module.scss
similarity index 100%
rename from src/components/ConnectionTable.module.css
rename to src/components/ConnectionTable.module.scss
diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx
index cc9695a..2323e2e 100644
--- a/src/components/ConnectionTable.tsx
+++ b/src/components/ConnectionTable.tsx
@@ -5,7 +5,7 @@ import { ChevronDown } from 'react-feather';
 import { useSortBy, useTable } from 'react-table';
 
 import prettyBytes from '../misc/pretty-bytes';
-import s from './ConnectionTable.module.css';
+import s from './ConnectionTable.module.scss';
 
 const sortDescFirst = true;
 
diff --git a/src/components/Connections.module.css b/src/components/Connections.module.scss
similarity index 100%
rename from src/components/Connections.module.css
rename to src/components/Connections.module.scss
diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index 1b63cf8..c9dffc5 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -10,7 +10,7 @@ import { State } from 'src/store/types';
 import * as connAPI from '../api/connections';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { getClashAPIConfig } from '../store/app';
-import s from './Connections.module.css';
+import s from './Connections.module.scss';
 import ConnectionTable from './ConnectionTable';
 import ContentHeader from './ContentHeader';
 import ModalCloseAllConnections from './ModalCloseAllConnections';
diff --git a/src/components/ContentHeader.module.css b/src/components/ContentHeader.module.scss
similarity index 100%
rename from src/components/ContentHeader.module.css
rename to src/components/ContentHeader.module.scss
diff --git a/src/components/ContentHeader.tsx b/src/components/ContentHeader.tsx
index f786240..473cd4c 100644
--- a/src/components/ContentHeader.tsx
+++ b/src/components/ContentHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './ContentHeader.module.css';
+import s0 from './ContentHeader.module.scss';
 
 type Props = {
   title: string;
diff --git a/src/components/ErrorBoundaryFallback.module.css b/src/components/ErrorBoundaryFallback.module.scss
similarity index 100%
rename from src/components/ErrorBoundaryFallback.module.css
rename to src/components/ErrorBoundaryFallback.module.scss
diff --git a/src/components/ErrorBoundaryFallback.tsx b/src/components/ErrorBoundaryFallback.tsx
index bbaf2d7..7ab7d06 100644
--- a/src/components/ErrorBoundaryFallback.tsx
+++ b/src/components/ErrorBoundaryFallback.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './ErrorBoundaryFallback.module.css';
+import s0 from './ErrorBoundaryFallback.module.scss';
 import SvgGithub from './SvgGithub';
 import SvgYacd from './SvgYacd';
 const yacdRepoIssueUrl = 'https://github.com/haishanh/yacd/issues';
diff --git a/src/components/Field.module.css b/src/components/Field.module.scss
similarity index 100%
rename from src/components/Field.module.css
rename to src/components/Field.module.scss
diff --git a/src/components/Field.tsx b/src/components/Field.tsx
index c0b3ae5..4134d3e 100644
--- a/src/components/Field.tsx
+++ b/src/components/Field.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import React from 'react';
 
-import s from './Field.module.css';
+import s from './Field.module.scss';
 
 const { useCallback } = React;
 
diff --git a/src/components/Home.module.css b/src/components/Home.module.scss
similarity index 100%
rename from src/components/Home.module.css
rename to src/components/Home.module.scss
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index a6df373..d7ddbab 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -2,7 +2,7 @@ import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ContentHeader from './ContentHeader';
-import s0 from './Home.module.css';
+import s0 from './Home.module.scss';
 import Loading from './Loading';
 import TrafficChart from './TrafficChart';
 import TrafficNow from './TrafficNow';
diff --git a/src/components/Input.module.css b/src/components/Input.module.scss
similarity index 100%
rename from src/components/Input.module.css
rename to src/components/Input.module.scss
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 6cfc50e..c132a3b 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './Input.module.css';
+import s0 from './Input.module.scss';
 
 const { useState, useRef, useEffect, useCallback } = React;
 
diff --git a/src/components/Loading.module.css b/src/components/Loading.module.scss
similarity index 100%
rename from src/components/Loading.module.css
rename to src/components/Loading.module.scss
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 208c4af..12ced75 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s from './Loading.module.css';
+import s from './Loading.module.scss';
 
 type Props = {
   height?: string;
diff --git a/src/components/Loading2.module.css b/src/components/Loading2.module.scss
similarity index 100%
rename from src/components/Loading2.module.css
rename to src/components/Loading2.module.scss
diff --git a/src/components/Loading2.tsx b/src/components/Loading2.tsx
index edb2656..b847eb4 100644
--- a/src/components/Loading2.tsx
+++ b/src/components/Loading2.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './Loading2.module.css';
+import s0 from './Loading2.module.scss';
 import SvgYacd from './SvgYacd';
 
 function Loading() {
diff --git a/src/components/Logs.module.css b/src/components/Logs.module.scss
similarity index 100%
rename from src/components/Logs.module.css
rename to src/components/Logs.module.scss
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index 2b002d3..019edd5 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -17,7 +17,7 @@ import { getLogLevel } from 'src/store/configs';
 import { appendLog, getLogsForDisplay } from 'src/store/logs';
 import { Log, State } from 'src/store/types';
 
-import s from './Logs.module.css';
+import s from './Logs.module.scss';
 
 const { useCallback, memo, useEffect } = React;
 
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.scss
similarity index 100%
rename from src/components/Modal.module.css
rename to src/components/Modal.module.scss
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index cb5fea3..fda3263 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -2,7 +2,7 @@ import cx from 'clsx';
 import React from 'react';
 import Modal from 'react-modal';
 
-import s0 from './Modal.module.css';
+import s0 from './Modal.module.scss';
 
 type Props = {
   isOpen: boolean;
diff --git a/src/components/ModalCloseAllConnections.module.css b/src/components/ModalCloseAllConnections.module.scss
similarity index 100%
rename from src/components/ModalCloseAllConnections.module.css
rename to src/components/ModalCloseAllConnections.module.scss
diff --git a/src/components/ModalCloseAllConnections.tsx b/src/components/ModalCloseAllConnections.tsx
index ce567b8..a2c4303 100644
--- a/src/components/ModalCloseAllConnections.tsx
+++ b/src/components/ModalCloseAllConnections.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import Modal from 'react-modal';
 
 import Button from './Button';
-import modalStyle from './Modal.module.css';
-import s from './ModalCloseAllConnections.module.css';
+import modalStyle from './Modal.module.scss';
+import s from './ModalCloseAllConnections.module.scss';
 
 const { useRef, useCallback, useMemo } = React;
 
diff --git a/src/components/Root.module.css b/src/components/Root.module.scss
similarity index 100%
rename from src/components/Root.module.css
rename to src/components/Root.module.scss
diff --git a/src/components/Root.css b/src/components/Root.scss
similarity index 100%
rename from src/components/Root.css
rename to src/components/Root.scss
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 7046156..f94d2a2 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -1,4 +1,4 @@
-import './Root.css';
+import './Root.scss';
 import '@fontsource/roboto-mono/latin-400.css';
 import '@fontsource/open-sans/latin-400.css';
 import '@fontsource/open-sans/latin-700.css';
@@ -19,7 +19,7 @@ import APIDiscovery from './APIDiscovery';
 import ErrorBoundary from './ErrorBoundary';
 import Home from './Home';
 import Loading2 from './Loading2';
-import s0 from './Root.module.css';
+import s0 from './Root.module.scss';
 import SideBar from './SideBar';
 import StateProvider from './StateProvider';
 import StyleGuide from './StyleGuide';
diff --git a/src/components/Rule.module.css b/src/components/Rule.module.scss
similarity index 100%
rename from src/components/Rule.module.css
rename to src/components/Rule.module.scss
diff --git a/src/components/Rule.tsx b/src/components/Rule.tsx
index 0960660..b8ff70f 100644
--- a/src/components/Rule.tsx
+++ b/src/components/Rule.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './Rule.module.css';
+import s0 from './Rule.module.scss';
 
 const colorMap = {
   _default: '#59caf9',
diff --git a/src/components/Rules.module.css b/src/components/Rules.module.scss
similarity index 100%
rename from src/components/Rules.module.css
rename to src/components/Rules.module.scss
diff --git a/src/components/Rules.tsx b/src/components/Rules.tsx
index 83f72b8..9019fab 100644
--- a/src/components/Rules.tsx
+++ b/src/components/Rules.tsx
@@ -4,7 +4,8 @@ import { areEqual, VariableSizeList } from 'react-window';
 import { RuleProviderItem } from 'src/components/rules/RuleProviderItem';
 import { useRuleAndProvider } from 'src/components/rules/rules.hooks';
 import { RulesPageFab } from 'src/components/rules/RulesPageFab';
-import { TextFilter } from 'src/components/rules/TextFilter';
+import { TextFilter } from 'src/components/shared/TextFitler';
+import { ruleFilterText } from 'src/store/rules';
 import { State } from 'src/store/types';
 import { ClashAPIConfig } from 'src/types';
 
@@ -12,7 +13,7 @@ import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { getClashAPIConfig } from '../store/app';
 import ContentHeader from './ContentHeader';
 import Rule from './Rule';
-import s from './Rules.module.css';
+import s from './Rules.module.scss';
 import { connect } from './StateProvider';
 
 const { memo } = React;
@@ -85,7 +86,7 @@ function Rules({ apiConfig }: RulesProps) {
     <div>
       <div className={s.header}>
         <ContentHeader title={t('Rules')} />
-        <TextFilter />
+        <TextFilter placeholder="Filter" textAtom={ruleFilterText} />
       </div>
       {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'number | MutableRefObject<any>' is not assig... Remove this comment to see the full error message */}
       <div ref={refRulesContainer} style={{ paddingBottom }}>
diff --git a/src/components/Search.module.css b/src/components/Search.module.scss
similarity index 100%
rename from src/components/Search.module.css
rename to src/components/Search.module.scss
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 2d8c754..6edc4a5 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -2,7 +2,7 @@ import debounce from 'lodash-es/debounce';
 import React, { useCallback, useMemo, useState } from 'react';
 import { Search as SearchIcon } from 'react-feather';
 
-import s0 from './Search.module.css';
+import s0 from './Search.module.scss';
 
 function RuleSearch({ dispatch, searchText, updateSearchText }) {
   const [text, setText] = useState(searchText);
diff --git a/src/components/Selection.module.css b/src/components/Selection.module.scss
similarity index 100%
rename from src/components/Selection.module.css
rename to src/components/Selection.module.scss
diff --git a/src/components/Selection.tsx b/src/components/Selection.tsx
index f0b6080..1b1f50e 100644
--- a/src/components/Selection.tsx
+++ b/src/components/Selection.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import React from 'react';
 
-import s from './Selection.module.css';
+import s from './Selection.module.scss';
 
 type SelectionProps = {
   OptionComponent?: (...args: any[]) => any;
diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.scss
similarity index 100%
rename from src/components/SideBar.module.css
rename to src/components/SideBar.module.scss
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 973f003..8a6429a 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -15,7 +15,7 @@ import { Link, useLocation } from 'react-router-dom';
 
 import { framerMotionResouce } from '../misc/motion';
 import { getTheme, switchTheme } from '../store/app';
-import s from './SideBar.module.css';
+import s from './SideBar.module.scss';
 import { connect } from './StateProvider';
 
 const { useCallback } = React;
diff --git a/src/components/SvgYacd.module.css b/src/components/SvgYacd.module.scss
similarity index 100%
rename from src/components/SvgYacd.module.css
rename to src/components/SvgYacd.module.scss
diff --git a/src/components/SvgYacd.tsx b/src/components/SvgYacd.tsx
index 2aa5cc1..90ad7e2 100644
--- a/src/components/SvgYacd.tsx
+++ b/src/components/SvgYacd.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import React from 'react';
 
-import s from './SvgYacd.module.css';
+import s from './SvgYacd.module.scss';
 
 type Props = {
   width?: number;
diff --git a/src/components/ToggleSwitch.module.css b/src/components/ToggleSwitch.module.scss
similarity index 100%
rename from src/components/ToggleSwitch.module.css
rename to src/components/ToggleSwitch.module.scss
diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx
index a7d8947..0c84059 100644
--- a/src/components/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 
-import s0 from './ToggleSwitch.module.css';
+import s0 from './ToggleSwitch.module.scss';
 
 type Props = {
   options?: any[];
diff --git a/src/components/about/About.module.css b/src/components/about/About.module.scss
similarity index 100%
rename from src/components/about/About.module.css
rename to src/components/about/About.module.scss
diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx
index 4a60141..6ed01ad 100644
--- a/src/components/about/About.tsx
+++ b/src/components/about/About.tsx
@@ -7,7 +7,7 @@ import { connect } from 'src/components/StateProvider';
 import { getClashAPIConfig } from 'src/store/app';
 import { ClashAPIConfig } from 'src/types';
 
-import s from './About.module.css';
+import s from './About.module.scss';
 
 type Props = { apiConfig: ClashAPIConfig };
 
diff --git a/src/components/proxies/Proxies.module.css b/src/components/proxies/Proxies.module.scss
similarity index 100%
rename from src/components/proxies/Proxies.module.css
rename to src/components/proxies/Proxies.module.scss
diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx
index e162a17..c1606dd 100644
--- a/src/components/proxies/Proxies.tsx
+++ b/src/components/proxies/Proxies.tsx
@@ -8,11 +8,12 @@ import { ProxyGroup } from 'src/components/proxies/ProxyGroup';
 import { ProxyPageFab } from 'src/components/proxies/ProxyPageFab';
 import { ProxyProviderList } from 'src/components/proxies/ProxyProviderList';
 import Settings from 'src/components/proxies/Settings';
-import { TextFilter } from 'src/components/proxies/TextFilter';
 import BaseModal from 'src/components/shared/BaseModal';
+import { TextFilter } from 'src/components/shared/TextFitler';
 import { connect, useStoreActions } from 'src/components/StateProvider';
 import Equalizer from 'src/components/svg/Equalizer';
 import { getClashAPIConfig } from 'src/store/app';
+import { proxyFilterText } from 'src/store/proxies';
 import {
   fetchProxies,
   getDelay,
@@ -22,7 +23,7 @@ import {
 } from 'src/store/proxies';
 import type { State } from 'src/store/types';
 
-import s0 from './Proxies.module.css';
+import s0 from './Proxies.module.scss';
 
 const { useState, useEffect, useCallback, useRef } = React;
 
@@ -84,7 +85,7 @@ function Proxies({
         <ContentHeader title={t('Proxies')} />
         <div className={s0.topBarRight}>
           <div className={s0.textFilterContainer}>
-            <TextFilter />
+            <TextFilter textAtom={proxyFilterText} />
           </div>
           <Tooltip label={t('settings')}>
             <Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>
diff --git a/src/components/proxies/Proxy.module.css b/src/components/proxies/Proxy.module.scss
similarity index 100%
rename from src/components/proxies/Proxy.module.css
rename to src/components/proxies/Proxy.module.scss
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 027b7fc..424d320 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -4,7 +4,7 @@ import { keyCodes } from 'src/misc/keycode';
 
 import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies';
 import { connect } from '../StateProvider';
-import s0 from './Proxy.module.css';
+import s0 from './Proxy.module.scss';
 import { ProxyLatency } from './ProxyLatency';
 
 const { useMemo } = React;
diff --git a/src/components/proxies/ProxyGroup.module.css b/src/components/proxies/ProxyGroup.module.scss
similarity index 100%
rename from src/components/proxies/ProxyGroup.module.css
rename to src/components/proxies/ProxyGroup.module.scss
diff --git a/src/components/proxies/ProxyGroup.tsx b/src/components/proxies/ProxyGroup.tsx
index e3b290a..32705c1 100644
--- a/src/components/proxies/ProxyGroup.tsx
+++ b/src/components/proxies/ProxyGroup.tsx
@@ -11,7 +11,7 @@ import Button from '../Button';
 import CollapsibleSectionHeader from '../CollapsibleSectionHeader';
 import { connect, useStoreActions } from '../StateProvider';
 import { useFilteredAndSorted } from './hooks';
-import s0 from './ProxyGroup.module.css';
+import s0 from './ProxyGroup.module.scss';
 import { ProxyList, ProxyListSummaryView } from './ProxyList';
 
 const { createElement, useCallback, useMemo, useState } = React;
diff --git a/src/components/proxies/ProxyLatency.module.css b/src/components/proxies/ProxyLatency.module.scss
similarity index 100%
rename from src/components/proxies/ProxyLatency.module.css
rename to src/components/proxies/ProxyLatency.module.scss
diff --git a/src/components/proxies/ProxyLatency.tsx b/src/components/proxies/ProxyLatency.tsx
index 34e0aa6..48e55af 100644
--- a/src/components/proxies/ProxyLatency.tsx
+++ b/src/components/proxies/ProxyLatency.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import s0 from './ProxyLatency.module.css';
+import s0 from './ProxyLatency.module.scss';
 
 type ProxyLatencyProps = {
   number: number;
diff --git a/src/components/proxies/ProxyList.module.css b/src/components/proxies/ProxyList.module.scss
similarity index 100%
rename from src/components/proxies/ProxyList.module.css
rename to src/components/proxies/ProxyList.module.scss
diff --git a/src/components/proxies/ProxyList.tsx b/src/components/proxies/ProxyList.tsx
index 08cfe05..a86bb88 100644
--- a/src/components/proxies/ProxyList.tsx
+++ b/src/components/proxies/ProxyList.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Proxy, ProxySmall } from './Proxy';
-import s from './ProxyList.module.css';
+import s from './ProxyList.module.scss';
 
 type ProxyListProps = {
   all: string[];
diff --git a/src/components/proxies/ProxyProvider.module.css b/src/components/proxies/ProxyProvider.module.scss
similarity index 100%
rename from src/components/proxies/ProxyProvider.module.css
rename to src/components/proxies/ProxyProvider.module.scss
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index d7220b0..055a572 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -18,7 +18,7 @@ import { DelayMapping } from 'src/store/types';
 
 import { useFilteredAndSorted } from './hooks';
 import { ProxyList, ProxyListSummaryView } from './ProxyList';
-import s from './ProxyProvider.module.css';
+import s from './ProxyProvider.module.scss';
 
 const { useState, useCallback } = React;
 
diff --git a/src/components/proxies/Settings.module.css b/src/components/proxies/Settings.module.scss
similarity index 100%
rename from src/components/proxies/Settings.module.css
rename to src/components/proxies/Settings.module.scss
diff --git a/src/components/proxies/Settings.tsx b/src/components/proxies/Settings.tsx
index 703fb0d..5e1ff98 100644
--- a/src/components/proxies/Settings.tsx
+++ b/src/components/proxies/Settings.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../store/app';
 import { connect, useStoreActions } from '../StateProvider';
 import Switch from '../SwitchThemed';
-import s from './Settings.module.css';
+import s from './Settings.module.scss';
 
 const options = [
   ['Natural', 'order_natural'],
diff --git a/src/components/proxies/TextFilter.tsx b/src/components/proxies/TextFilter.tsx
deleted file mode 100644
index 75f1d51..0000000
--- a/src/components/proxies/TextFilter.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { useTextInut } from 'src/hooks/useTextInput';
-
-import { proxyFilterText } from '../../store/proxies';
-import shared from '../shared.module.css';
-
-export function TextFilter() {
-  const [onChange, text] = useTextInut(proxyFilterText);
-  return (
-    <input
-      className={shared.input}
-      type="text"
-      value={text}
-      onChange={onChange}
-    />
-  );
-}
diff --git a/src/components/rules/RuleProviderItem.module.css b/src/components/rules/RuleProviderItem.module.scss
similarity index 100%
rename from src/components/rules/RuleProviderItem.module.css
rename to src/components/rules/RuleProviderItem.module.scss
diff --git a/src/components/rules/RuleProviderItem.tsx b/src/components/rules/RuleProviderItem.tsx
index c92cd05..fe4610e 100644
--- a/src/components/rules/RuleProviderItem.tsx
+++ b/src/components/rules/RuleProviderItem.tsx
@@ -5,7 +5,7 @@ import { useUpdateRuleProviderItem } from 'src/components/rules/rules.hooks';
 import { SectionNameType } from 'src/components/shared/Basic';
 import { RotateIcon } from 'src/components/shared/RotateIcon';
 
-import s from './RuleProviderItem.module.css';
+import s from './RuleProviderItem.module.scss';
 
 export function RuleProviderItem({
   idx,
diff --git a/src/components/rules/TextFilter.tsx b/src/components/rules/TextFilter.tsx
deleted file mode 100644
index a3cc29e..0000000
--- a/src/components/rules/TextFilter.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { useTextInut } from 'src/hooks/useTextInput';
-import { ruleFilterText } from 'src/store/rules';
-
-import shared from '../shared.module.css';
-
-export function TextFilter() {
-  const [onChange, text] = useTextInut(ruleFilterText);
-  return (
-    <input
-      className={shared.input}
-      type="text"
-      value={text}
-      onChange={onChange}
-      placeholder="Filter"
-    />
-  );
-}
diff --git a/src/components/shared/BaseModal.module.css b/src/components/shared/BaseModal.module.scss
similarity index 100%
rename from src/components/shared/BaseModal.module.css
rename to src/components/shared/BaseModal.module.scss
diff --git a/src/components/shared/BaseModal.tsx b/src/components/shared/BaseModal.tsx
index dcd0b57..25edce9 100644
--- a/src/components/shared/BaseModal.tsx
+++ b/src/components/shared/BaseModal.tsx
@@ -2,8 +2,8 @@ import cx from 'clsx';
 import * as React from 'react';
 import Modal from 'react-modal';
 
-import modalStyle from '../Modal.module.css';
-import s from './BaseModal.module.css';
+import modalStyle from '../Modal.module.scss';
+import s from './BaseModal.module.scss';
 
 const { useMemo } = React;
 
diff --git a/src/components/shared/Basic.module.css b/src/components/shared/Basic.module.scss
similarity index 100%
rename from src/components/shared/Basic.module.css
rename to src/components/shared/Basic.module.scss
diff --git a/src/components/shared/Basic.tsx b/src/components/shared/Basic.tsx
index dbd1bc7..c2ced0f 100644
--- a/src/components/shared/Basic.tsx
+++ b/src/components/shared/Basic.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s from './Basic.module.css';
+import s from './Basic.module.scss';
 
 export function SectionNameType({ name, type }) {
   return (
diff --git a/src/components/shared/Fab.module.css b/src/components/shared/Fab.module.scss
similarity index 100%
rename from src/components/shared/Fab.module.css
rename to src/components/shared/Fab.module.scss
diff --git a/src/components/shared/Fab.tsx b/src/components/shared/Fab.tsx
index 68750ef..70c0c03 100644
--- a/src/components/shared/Fab.tsx
+++ b/src/components/shared/Fab.tsx
@@ -3,7 +3,7 @@ import './rtf.css';
 import * as React from 'react';
 import { Action, Fab } from 'react-tiny-fab/dist';
 
-import s from './Fab.module.css';
+import s from './Fab.module.scss';
 
 export function IsFetching({ children }: { children: React.ReactNode }) {
   return <span className={s.spining}>{children}</span>;
diff --git a/src/components/shared/RotateIcon.module.css b/src/components/shared/RotateIcon.module.scss
similarity index 100%
rename from src/components/shared/RotateIcon.module.css
rename to src/components/shared/RotateIcon.module.scss
diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx
index e2d4ad8..7e3ceae 100644
--- a/src/components/shared/RotateIcon.tsx
+++ b/src/components/shared/RotateIcon.tsx
@@ -2,7 +2,7 @@ import cx from 'clsx';
 import * as React from 'react';
 import { RotateCw } from 'react-feather';
 
-import s from './RotateIcon.module.css';
+import s from './RotateIcon.module.scss';
 
 export function RotateIcon({ isRotating }: { isRotating: boolean }) {
   const cls = cx(s.rotate, {
diff --git a/src/components/shared/Select.module.css b/src/components/shared/Select.module.scss
similarity index 100%
rename from src/components/shared/Select.module.css
rename to src/components/shared/Select.module.scss
diff --git a/src/components/shared/Select.tsx b/src/components/shared/Select.tsx
index 376fb3c..de409cb 100644
--- a/src/components/shared/Select.tsx
+++ b/src/components/shared/Select.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import s from './Select.module.css';
+import s from './Select.module.scss';
 
 type Props = {
   options: Array<string[]>;
diff --git a/src/components/shared/Styled.module.css b/src/components/shared/Styled.module.scss
similarity index 100%
rename from src/components/shared/Styled.module.css
rename to src/components/shared/Styled.module.scss
diff --git a/src/components/shared/Styled.tsx b/src/components/shared/Styled.tsx
index ac2d04a..86d87ca 100644
--- a/src/components/shared/Styled.tsx
+++ b/src/components/shared/Styled.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import s from './Styled.module.css';
+import s from './Styled.module.scss';
 
 export function FlexCenter({ children }: { children: React.ReactNode }) {
   return <div className={s.FlexCenter}>{children}</div>;
diff --git a/src/components/shared.module.css b/src/components/shared/TextFitler.module.scss
similarity index 100%
rename from src/components/shared.module.css
rename to src/components/shared/TextFitler.module.scss
diff --git a/src/components/shared/TextFitler.tsx b/src/components/shared/TextFitler.tsx
new file mode 100644
index 0000000..e4a4a88
--- /dev/null
+++ b/src/components/shared/TextFitler.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { RecoilState } from 'recoil';
+import { useTextInut } from 'src/hooks/useTextInput';
+
+import s from './TextFitler.module.scss';
+
+export function TextFilter(props: {
+  textAtom: RecoilState<string>;
+  placeholder?: string;
+}) {
+  const [onChange, text] = useTextInut(props.textAtom);
+  return (
+    <input
+      className={s.input}
+      type="text"
+      value={text}
+      onChange={onChange}
+      placeholder={props.placeholder}
+    />
+  );
+}
diff --git a/yarn.lock b/yarn.lock
index 1010649..e684501 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2044,7 +2044,7 @@ caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001230:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz#8135c57459854b2240b57a4a6786044bdc5a9f71"
   integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==
 
-chalk@^2.0.0, chalk@^2.4.2:
+chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -4079,15 +4079,6 @@ postcss-discard-overridden@^5.0.1:
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz#454b41f707300b98109a75005ca4ab0ff2743ac6"
   integrity sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==
 
-postcss-extend-rule@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-extend-rule/-/postcss-extend-rule-3.0.0.tgz#d6ee2fb24ab2b3d9b50acce1d055c1c137ab5f44"
-  integrity sha512-gMlRmW52Y86Lct+KTr+gMjxk0aUSuTyjtvelIH3a7UdaXONaKH6qSmj8KAXCW4+nhTlAsOw5JdkRjCdZ/Kjb3Q==
-  dependencies:
-    postcss "^7.0.17"
-    postcss-nesting "^7.0.1"
-    postcss-tape "^5.0.2"
-
 postcss-import@14.0.2:
   version "14.0.2"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1"
@@ -4152,20 +4143,6 @@ postcss-minify-selectors@^5.1.0:
     alphanum-sort "^1.0.2"
     postcss-selector-parser "^6.0.5"
 
-postcss-nested@5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.5.tgz#f0a107d33a9fab11d7637205f5321e27223e3603"
-  integrity sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==
-  dependencies:
-    postcss-selector-parser "^6.0.4"
-
-postcss-nesting@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
-  integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
-  dependencies:
-    postcss "^7.0.2"
-
 postcss-normalize-charset@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz#121559d1bebc55ac8d24af37f67bd4da9efd91d0"
@@ -4288,11 +4265,6 @@ postcss-svgo@^5.0.2:
     postcss-value-parser "^4.1.0"
     svgo "^2.3.0"
 
-postcss-tape@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-tape/-/postcss-tape-5.0.2.tgz#7ae011050954fdc10b17d1f1551c9d9bf14e4bdf"
-  integrity sha512-e4770WnsUzczQp/pAIsz0s0MDLAQ7luyh1/hs8QBcdfXOMrz0siEqYNHAKJIoCvGtLoi2QUjWASvTbPfyTfIWg==
-
 postcss-unique-selectors@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-5.0.1.tgz#3be5c1d7363352eff838bd62b0b07a0abad43bfc"
@@ -4316,15 +4288,6 @@ postcss@8.3.0, postcss@^8.2.10:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
-postcss@^7.0.17, postcss@^7.0.2:
-  version "7.0.23"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.23.tgz#9f9759fad661b15964f3cfc3140f66f1e05eadc1"
-  integrity sha512-hOlMf3ouRIFXD+j2VJecwssTwbvsPGJVMzupptg+85WA+i7MwyrydmQAgY3R+m0Bc0exunhbJmijy8u8+vufuQ==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -5000,13 +4963,6 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"