Stop use postcss-nested postcss-extend-rule

This commit is contained in:
Haishan 2021-06-06 00:32:24 +08:00
parent 25dbe5eff4
commit 5ff2f89afb
88 changed files with 71 additions and 131 deletions

View file

@ -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",

View file

@ -16,8 +16,6 @@ module.exports = {
},
],
}),
require('postcss-nested')(),
require('autoprefixer')(),
require('postcss-extend-rule')(),
],
};

View file

@ -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';

View file

@ -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';

View file

@ -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 };

View file

@ -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;

View file

@ -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 = {

View file

@ -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;

View file

@ -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';

View file

@ -1,6 +1,6 @@
import React from 'react';
import s0 from './ContentHeader.module.css';
import s0 from './ContentHeader.module.scss';
type Props = {
title: string;

View file

@ -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';

View file

@ -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;

View file

@ -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';

View file

@ -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;

View file

@ -1,6 +1,6 @@
import React from 'react';
import s from './Loading.module.css';
import s from './Loading.module.scss';
type Props = {
height?: string;

View file

@ -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() {

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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';

View file

@ -1,6 +1,6 @@
import React from 'react';
import s0 from './Rule.module.css';
import s0 from './Rule.module.scss';
const colorMap = {
_default: '#59caf9',

View file

@ -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 }}>

View file

@ -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);

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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[];

View file

@ -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 };

View file

@ -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)}>

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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[];

View file

@ -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;

View file

@ -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'],

View file

@ -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}
/>
);
}

View file

@ -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,

View file

@ -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"
/>
);
}

View file

@ -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;

View file

@ -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 (

View file

@ -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>;

View file

@ -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, {

View file

@ -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[]>;

View file

@ -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>;

View file

@ -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}
/>
);
}

View file

@ -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"