From 23320ab637430f18aeb10283e85b306d5d66d876 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Wed, 26 Oct 2022 08:31:38 +0800 Subject: [PATCH] refactor: add tailwindcss --- config/webpack.config.js | 21 +++++++--- package.json | 12 +++--- public/embed.html | 91 +--------------------------------------- refactor.md | 8 ---- scripts/start.js | 9 ---- src/assets/index.css | 3 ++ src/embed.tsx | 4 +- src/embed/Chat.tsx | 10 ++--- src/embed/index.tsx | 10 ++--- tailwind.config.js | 8 ++++ yarn.lock | 80 ++++++++++++++++++++++++++++------- 11 files changed, 105 insertions(+), 151 deletions(-) delete mode 100644 refactor.md create mode 100644 src/assets/index.css create mode 100644 tailwind.config.js diff --git a/config/webpack.config.js b/config/webpack.config.js index c06061c6..6fbe2d43 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -5,7 +5,6 @@ const path = require("path"); const webpack = require("webpack"); // const resolve = require("resolve"); const HtmlWebpackPlugin = require("html-webpack-plugin"); -const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin"); const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin"); const TerserPlugin = require("terser-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); @@ -101,6 +100,22 @@ module.exports = function (webpackEnv) { { loader: require.resolve("css-loader"), options: cssOptions + }, + { + // Options for PostCSS as we reference these options twice + // Adds vendor prefixing based on your specified browser support in + // package.json + loader: require.resolve("postcss-loader"), + options: { + postcssOptions: { + // Necessary for external CSS imports to work + // https://github.com/facebook/create-react-app/issues/2677 + ident: "postcss", + config: false, + plugins: ["tailwindcss"] + }, + sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment + } } ].filter(Boolean); return loaders; @@ -475,10 +490,6 @@ module.exports = function (webpackEnv) { new ReactRefreshWebpackPlugin({ overlay: false }), - // Watcher doesn't work well if you mistype casing in a path so we use - // a plugin that prints an error when you attempt to do this. - // See https://github.com/facebook/create-react-app/issues/240 - isEnvDevelopment && new CaseSensitivePathsPlugin(), isEnvProduction && new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output diff --git a/package.json b/package.json index cb104ed4..c355860e 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "@uiball/loaders": "^1.2.6", "bfj": "^7.0.2", "browserslist": "^4.21.4", - "case-sensitive-paths-webpack-plugin": "^2.4.0", "copy-image-clipboard": "^2.1.2", "css-loader": "^6.7.1", "css-minimizer-webpack-plugin": "^4.2.2", @@ -41,7 +40,6 @@ "lodash": "^4.17.21", "masonry-layout": "^4.2.2", "mini-css-extract-plugin": "^2.6.1", - "pwa-badge": "^1.1.1", "react": "^18.2.0", "react-circular-progressbar": "^2.1.0", "react-dev-utils": "^12.0.1", @@ -61,7 +59,6 @@ "react-textarea-autosize": "^8.3.4", "resolve": "^1.22.1", "rooks": "^7.4.0", - "semver": "^7.3.8", "slate": "^0.84.0", "slate-history": "^0.66.0", "slate-react": "^0.83.2", @@ -89,9 +86,6 @@ "workbox-streams": "^6.5.4", "workbox-webpack-plugin": "^6.5.4" }, - "resolutions": { - "prosemirror-model": "1.16.1" - }, "scripts": { "start": "REACT_APP_BUILD_TIME=$(date +%s) node scripts/start.js", "build": "rm -rf build && REACT_APP_BUILD_TIME=$(date +%s) GENERATE_SOURCEMAP=false node scripts/build.js", @@ -131,6 +125,7 @@ "@typescript-eslint/eslint-plugin": "^5.40.1", "@typescript-eslint/parser": "^5.40.1", "@welldone-software/why-did-you-render": "^7.0.1", + "autoprefixer": "^10.4.12", "babel-loader": "^8.2.5", "babel-plugin-named-asset-import": "^0.3.8", "babel-preset-react-app": "^10.0.1", @@ -144,7 +139,10 @@ "lint-staged": "^13.0.3", "md5-file": "^5.0.0", "patch-package": "^6.4.7", + "postcss": "^8.4.18", + "postcss-loader": "^7.0.1", "postinstall-postinstall": "^2.1.0", - "prettier": "^2.7.1" + "prettier": "^2.7.1", + "tailwindcss": "^3.2.1" } } diff --git a/public/embed.html b/public/embed.html index cac3ab27..43246af5 100644 --- a/public/embed.html +++ b/public/embed.html @@ -4,98 +4,9 @@ - - - - - - - - - - - - - - - - - - - + VoceChat Embed - - diff --git a/refactor.md b/refactor.md deleted file mode 100644 index 83c2ec8a..00000000 --- a/refactor.md +++ /dev/null @@ -1,8 +0,0 @@ -- hooks (90%) -- page/component (90%) -- service (100%) -- reducer (90%) -- utils (90%) - -- typos -- unused files/code/comments diff --git a/scripts/start.js b/scripts/start.js index 626c3401..9e70d417 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -26,7 +26,6 @@ const { prepareUrls } = require("react-dev-utils/WebpackDevServerUtils"); const openBrowser = require("react-dev-utils/openBrowser"); -const semver = require("semver"); const paths = require("../config/paths"); const configFactory = require("../config/webpack.config"); const createDevServerConfig = require("../config/webpackDevServer.config"); @@ -105,14 +104,6 @@ checkBrowsers(paths.appPath, isInteractive) clearConsole(); } - if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) { - console.log( - chalk.yellow( - `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.` - ) - ); - } - console.log(chalk.cyan("Starting the development server...\n")); openBrowser(urls.localUrlForBrowser); }); diff --git a/src/assets/index.css b/src/assets/index.css new file mode 100644 index 00000000..b5c61c95 --- /dev/null +++ b/src/assets/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/embed.tsx b/src/embed.tsx index e2074684..49afe504 100644 --- a/src/embed.tsx +++ b/src/embed.tsx @@ -1,14 +1,12 @@ import ReactDOM from "react-dom/client"; -import { Reset } from "styled-reset"; import Embed from "./embed/index"; -import "./assets/base.css"; +import './assets/index.css'; import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride"; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( <> - diff --git a/src/embed/Chat.tsx b/src/embed/Chat.tsx index df9d2bfe..fe1283e2 100644 --- a/src/embed/Chat.tsx +++ b/src/embed/Chat.tsx @@ -1,13 +1,9 @@ -import React from "react"; -import styled from "styled-components"; -const Styled = styled.section` - width: 800px; - height: 800px; -`; +// import React from "react"; + type Props = {}; const Chat = (props: Props) => { - return Chat; + return
Chat
; }; export default Chat; diff --git a/src/embed/index.tsx b/src/embed/index.tsx index 31082d84..72386d67 100644 --- a/src/embed/index.tsx +++ b/src/embed/index.tsx @@ -1,21 +1,17 @@ import { useState } from "react"; -import styled from "styled-components"; -const Styled = styled.aside` - pointer-events: all; -`; import Chat from "./Chat"; type Props = {}; -function Embed({}: Props) { +function Embed({ }: Props) { const [visible, setVisible] = useState(false); const toggleVisible = () => { setVisible((prev) => !prev); }; return ( - +
{visible && } - +
); } diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..9c95ec50 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: {} + }, + plugins: [] +}; diff --git a/yarn.lock b/yarn.lock index 4a830c91..f0ff7b7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4483,6 +4483,18 @@ autoprefixer@^10.4.11: picocolors "^1.0.0" postcss-value-parser "^4.2.0" +autoprefixer@^10.4.12: + version "10.4.12" + resolved "https://mirrors.cloud.tencent.com/npm/autoprefixer/-/autoprefixer-10.4.12.tgz#183f30bf0b0722af54ee5ef257f7d4320bb33129" + integrity sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q== + dependencies: + browserslist "^4.21.4" + caniuse-lite "^1.0.30001407" + fraction.js "^4.2.0" + normalize-range "^0.1.2" + picocolors "^1.0.0" + postcss-value-parser "^4.2.0" + axe-core@^4.4.3: version "4.4.3" resolved "https://mirrors.cloud.tencent.com/npm/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f" @@ -4859,6 +4871,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001399, caniuse-lite@^1.0.30001400: resolved "https://mirrors.cloud.tencent.com/npm/caniuse-lite/-/caniuse-lite-1.0.30001406.tgz#d0146e7919635479f873b4507517b627f66ab269" integrity sha512-bWTlaXUy/rq0BBtYShc/jArYfBPjEV95euvZ8JVtO43oQExEN/WquoqpufFjNu4kSpi5cy5kMbNvzztWDfv1Jg== +caniuse-lite@^1.0.30001407: + version "1.0.30001423" + resolved "https://mirrors.cloud.tencent.com/npm/caniuse-lite/-/caniuse-lite-1.0.30001423.tgz#57176d460aa8cd85ee1a72016b961eb9aca55d91" + integrity sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ== + case-sensitive-paths-webpack-plugin@^2.4.0: version "2.4.0" resolved "https://mirrors.cloud.tencent.com/npm/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4" @@ -6511,7 +6528,7 @@ fast-diff@^1.1.2: resolved "https://mirrors.cloud.tencent.com/npm/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== -fast-glob@^3.2.11, fast-glob@^3.2.9: +fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9: version "3.2.12" resolved "https://mirrors.cloud.tencent.com/npm/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w== @@ -9682,6 +9699,15 @@ postcss-loader@^6.2.1: klona "^2.0.5" semver "^7.3.5" +postcss-loader@^7.0.1: + version "7.0.1" + resolved "https://mirrors.cloud.tencent.com/npm/postcss-loader/-/postcss-loader-7.0.1.tgz#4c883cc0a1b2bfe2074377b7a74c1cd805684395" + integrity sha512-VRviFEyYlLjctSM93gAZtcJJ/iSkPZ79zWbN/1fSH+NisBByEiVLqpdVDrPLVSi8DX0oJo12kL/GppTBdKVXiQ== + dependencies: + cosmiconfig "^7.0.0" + klona "^2.0.5" + semver "^7.3.7" + postcss-logical@^5.0.4: version "5.0.4" resolved "https://mirrors.tencent.com/npm/postcss-logical/-/postcss-logical-5.0.4.tgz#ec75b1ee54421acc04d5921576b7d8db6b0e6f73" @@ -9777,6 +9803,13 @@ postcss-nested@5.0.6: dependencies: postcss-selector-parser "^6.0.6" +postcss-nested@6.0.0: + version "6.0.0" + resolved "https://mirrors.cloud.tencent.com/npm/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735" + integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w== + dependencies: + postcss-selector-parser "^6.0.10" + postcss-nesting@^10.2.0: version "10.2.0" resolved "https://mirrors.cloud.tencent.com/npm/postcss-nesting/-/postcss-nesting-10.2.0.tgz#0b12ce0db8edfd2d8ae0aaf86427370b898890be" @@ -10023,7 +10056,7 @@ postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.4, postcss@^8.4.7: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.4.17: +postcss@^8.4.17, postcss@^8.4.18: version "8.4.18" resolved "https://mirrors.cloud.tencent.com/npm/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2" integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA== @@ -10159,7 +10192,7 @@ prosemirror-keymap@^1.1.4: prosemirror-state "^1.0.0" w3c-keyname "^2.2.0" -prosemirror-model@1.16.1, prosemirror-model@^1.0.0, prosemirror-model@^1.14.1, prosemirror-model@^1.16.0: +prosemirror-model@^1.0.0, prosemirror-model@^1.14.1, prosemirror-model@^1.16.0: version "1.16.1" resolved "https://mirrors.cloud.tencent.com/npm/prosemirror-model/-/prosemirror-model-1.16.1.tgz#fb388270bc9609b66298d6a7e15d0cc1d6c61253" integrity sha512-r1/w0HDU40TtkXp0DyKBnFPYwd8FSlUSJmGCGFv4DeynfeSlyQF2FD0RQbVEMOe6P3PpUSXM6LZBV7W/YNZ4mA== @@ -10250,11 +10283,6 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://mirrors.cloud.tencent.com/npm/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== -pwa-badge@^1.1.1: - version "1.1.1" - resolved "https://mirrors.cloud.tencent.com/npm/pwa-badge/-/pwa-badge-1.1.1.tgz#5e8d8dbf80cebd8ee4986e7a5ff9b7c90bf89bd4" - integrity sha512-GKi0qe/LBBxISyiC6BTuYhUmz7N3K0IRd7vGVYQCZiATA/pnqSvpzY+8PCFn4G3WF73HikXHepU6/cBUhClb1w== - q@^1.1.2, q@^1.5.1: version "1.5.1" resolved "https://mirrors.cloud.tencent.com/npm/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" @@ -11113,13 +11141,6 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0: resolved "https://mirrors.cloud.tencent.com/npm/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== -semver@^7.3.8: - version "7.3.8" - resolved "https://mirrors.cloud.tencent.com/npm/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798" - integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A== - dependencies: - lru-cache "^6.0.0" - send@0.18.0: version "0.18.0" resolved "https://mirrors.cloud.tencent.com/npm/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be" @@ -11817,6 +11838,35 @@ tailwindcss@^3.0.2: quick-lru "^5.1.1" resolve "^1.22.1" +tailwindcss@^3.2.1: + version "3.2.1" + resolved "https://mirrors.cloud.tencent.com/npm/tailwindcss/-/tailwindcss-3.2.1.tgz#1bd828fff3172489962357f8d531c184080a6786" + integrity sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg== + dependencies: + arg "^5.0.2" + chokidar "^3.5.3" + color-name "^1.1.4" + detective "^5.2.1" + didyoumean "^1.2.2" + dlv "^1.1.3" + fast-glob "^3.2.12" + glob-parent "^6.0.2" + is-glob "^4.0.3" + lilconfig "^2.0.6" + micromatch "^4.0.5" + normalize-path "^3.0.0" + object-hash "^3.0.0" + picocolors "^1.0.0" + postcss "^8.4.17" + postcss-import "^14.1.0" + postcss-js "^4.0.0" + postcss-load-config "^3.1.4" + postcss-nested "6.0.0" + postcss-selector-parser "^6.0.10" + postcss-value-parser "^4.2.0" + quick-lru "^5.1.1" + resolve "^1.22.1" + tapable@^1.0.0: version "1.1.3" resolved "https://mirrors.cloud.tencent.com/npm/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"