beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(css): prevent some styles from being inherited from the app

Browse source
This commit is contained in:
molvqingtai 2023-07-15 23:11:56 +08:00
parent 9cf7c58926
commit 1a8d2ec675
16 changed files with 169 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore Normal file
View file

@ -0,0 +1 @@
dist

4
.prettierrc
View file

@ -2,5 +2,7 @@
"semi": false, "semi": false,
"singleQuote": true, "singleQuote": true,
"trailingComma": "none", "trailingComma": "none",
"printWidth": 120 "printWidth": 120,
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindFunction": ["clsx"]
} }

11
index.html
View file

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebChat</title>
</head>
<body>
<h1>WebChat Dev Page</h1>
</body>
</html>

4
manifest.ts
View file

@ -1,6 +1,8 @@
import { defineManifest } from '@crxjs/vite-plugin' import { defineManifest } from '@crxjs/vite-plugin'
import packageJson from './package.json' import packageJson from './package.json'
const isDev = process.env.NODE_ENV === 'development'
export default defineManifest({ export default defineManifest({
manifest_version: 3, manifest_version: 3,
name: packageJson.displayName, name: packageJson.displayName,
@ -8,7 +10,7 @@ export default defineManifest({
content_scripts: [ content_scripts: [
{ {
js: ['src/main.tsx'], js: ['src/main.tsx'],
matches: ['*://www.example.com/*'] matches: [isDev ? `*://localhost/*` : '<all_urls>']
} }
] ]
}) })

4
package.json
View file

@ -3,6 +3,7 @@
"displayName": "WebChat", "displayName": "WebChat",
"version": "0.0.1", "version": "0.0.1",
"description": "Chatting Anonymously with People on the Same Website.", "description": "Chatting Anonymously with People on the Same Website.",
"type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
@ -42,7 +43,7 @@
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^17.6.6", "@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^17.6.6", "@commitlint/config-conventional": "^17.6.6",
"@crxjs/vite-plugin": "1.0.14", "@crxjs/vite-plugin": "2.0.0-beta.18",
"@ffflorian/jszip-cli": "^3.4.1", "@ffflorian/jszip-cli": "^3.4.1",
"@iconify/json": "^2.2.90", "@iconify/json": "^2.2.90",
"@svgr/core": "^8.0.0", "@svgr/core": "^8.0.0",
@ -69,6 +70,7 @@
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.4.25", "postcss": "^8.4.25",
"prettier": "^3.0.0", "prettier": "^3.0.0",
"prettier-plugin-tailwindcss": "^0.4.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"rimraf": "^5.0.1", "rimraf": "^5.0.1",

86
pnpm-lock.yaml
View file

@ -34,8 +34,8 @@ devDependencies:
specifier: ^17.6.6 specifier: ^17.6.6
version: 17.6.6 version: 17.6.6
'@crxjs/vite-plugin': '@crxjs/vite-plugin':
specifier: 1.0.14 specifier: 2.0.0-beta.18
version: 1.0.14(vite@4.4.3) version: 2.0.0-beta.18
'@ffflorian/jszip-cli': '@ffflorian/jszip-cli':
specifier: ^3.4.1 specifier: ^3.4.1
version: 3.4.1 version: 3.4.1
@ -114,6 +114,9 @@ devDependencies:
prettier: prettier:
specifier: ^3.0.0 specifier: ^3.0.0
version: 3.0.0 version: 3.0.0
prettier-plugin-tailwindcss:
specifier: ^0.4.0
version: 0.4.0(prettier@3.0.0)
react: react:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0 version: 18.2.0
@ -567,17 +570,15 @@ packages:
chalk: 4.1.2 chalk: 4.1.2
dev: true dev: true
/@crxjs/vite-plugin@1.0.14(vite@4.4.3): /@crxjs/vite-plugin@2.0.0-beta.18:
resolution: {integrity: sha512-emOueVCqFRFmpcfT80Xsm4mfuFw9VSp5GY4eh5qeLDeiP81g0hddlobVQCo0pE2ZvNnWbyhLrXEYAaMAXjNL6A==} resolution: {integrity: sha512-3jW20cUE04wTTg8HtoQD7bIL4Nhu91pRX4PHazMu2/tzzSTaR4stW5DHRIJOjFuRpOSCNNpyamyXwxS6qOv7Bg==}
engines: {node: '>=14'}
peerDependencies:
vite: ^2.9.0
dependencies: dependencies:
'@rollup/pluginutils': 4.2.1 '@rollup/pluginutils': 4.2.1
'@webcomponents/custom-elements': 1.6.0 '@webcomponents/custom-elements': 1.6.0
acorn-walk: 8.2.0 acorn-walk: 8.2.0
cheerio: 1.0.0-rc.12 cheerio: 1.0.0-rc.12
connect-injector: 0.4.4 connect-injector: 0.4.4
convert-source-map: 1.9.0
debug: 4.3.4 debug: 4.3.4
es-module-lexer: 0.10.5 es-module-lexer: 0.10.5
fast-glob: 3.3.0 fast-glob: 3.3.0
@ -586,10 +587,8 @@ packages:
magic-string: 0.26.7 magic-string: 0.26.7
picocolors: 1.0.0 picocolors: 1.0.0
react-refresh: 0.13.0 react-refresh: 0.13.0
rollup: 2.79.1 rollup: 2.78.1
vite: 4.4.3(@types/node@20.4.2) rxjs: 7.5.7
optionalDependencies:
'@vitejs/plugin-react': 4.0.3(vite@4.4.3)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
@ -5542,6 +5541,61 @@ packages:
fast-diff: 1.3.0 fast-diff: 1.3.0
dev: true dev: true
/prettier-plugin-tailwindcss@0.4.0(prettier@3.0.0):
resolution: {integrity: sha512-Rna0sDPETA0KNhMHlN8wxKNgfSa8mTl2hPPAGxnbv6tUcHT6J4RQmQ8TLXyhB7Dm5Von4iHloBxTyClYM6wT0A==}
engines: {node: '>=12.17.0'}
peerDependencies:
'@ianvs/prettier-plugin-sort-imports': '*'
'@prettier/plugin-pug': '*'
'@shopify/prettier-plugin-liquid': '*'
'@shufo/prettier-plugin-blade': '*'
'@trivago/prettier-plugin-sort-imports': '*'
prettier: ^2.2 || ^3.0
prettier-plugin-astro: '*'
prettier-plugin-css-order: '*'
prettier-plugin-import-sort: '*'
prettier-plugin-jsdoc: '*'
prettier-plugin-marko: '*'
prettier-plugin-organize-attributes: '*'
prettier-plugin-organize-imports: '*'
prettier-plugin-style-order: '*'
prettier-plugin-svelte: '*'
prettier-plugin-twig-melody: '*'
peerDependenciesMeta:
'@ianvs/prettier-plugin-sort-imports':
optional: true
'@prettier/plugin-pug':
optional: true
'@shopify/prettier-plugin-liquid':
optional: true
'@shufo/prettier-plugin-blade':
optional: true
'@trivago/prettier-plugin-sort-imports':
optional: true
prettier-plugin-astro:
optional: true
prettier-plugin-css-order:
optional: true
prettier-plugin-import-sort:
optional: true
prettier-plugin-jsdoc:
optional: true
prettier-plugin-marko:
optional: true
prettier-plugin-organize-attributes:
optional: true
prettier-plugin-organize-imports:
optional: true
prettier-plugin-style-order:
optional: true
prettier-plugin-svelte:
optional: true
prettier-plugin-twig-melody:
optional: true
dependencies:
prettier: 3.0.0
dev: true
/prettier@3.0.0: /prettier@3.0.0:
resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==} resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
engines: {node: '>=14'} engines: {node: '>=14'}
@ -5931,8 +5985,8 @@ packages:
glob: 10.3.3 glob: 10.3.3
dev: true dev: true
/rollup@2.79.1: /rollup@2.78.1:
resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==} resolution: {integrity: sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==}
engines: {node: '>=10.0.0'} engines: {node: '>=10.0.0'}
hasBin: true hasBin: true
optionalDependencies: optionalDependencies:
@ -5966,6 +6020,12 @@ packages:
dependencies: dependencies:
queue-microtask: 1.2.3 queue-microtask: 1.2.3
/rxjs@7.5.7:
resolution: {integrity: sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==}
dependencies:
tslib: 2.6.0
dev: true
/rxjs@7.8.1: /rxjs@7.8.1:
resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==} resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
dependencies: dependencies:

60
src/App.tsx
View file

@ -1,34 +1,42 @@
import { useState } from 'react' import Header from '@/components/Header'
import IconPower from '~icons/pixelarticons/power' import Footer from '@/components/Footer'
import Main from '@/components/Main'
import Sidebar from '@/components/Sidebar' import Sidebar from '@/components/Sidebar'
import AppButton from './components/AppButton'
export default function App() { export default function App() {
const [open, setOpen] = useState(false)
const [openedOnce, setOpenedOnce] = useState(false)
return ( return (
<> <>
<div className="fixed left-0 bottom-0 m-5 z-100 flex font-sans select-none leading-1em"> <main className="main">
<div <Header />
className="flex justify-center items-center w-10 h-10 rounded-full shadow cursor-pointer bg-blue-400 hover:bg-blue-600" <Main />
onClick={() => { <Sidebar />
setOpen((open) => !open) <Footer />
setOpenedOnce(true) </main>
}} <AppButton></AppButton>
>
<IconPower />
</div>
</div>
{openedOnce && (
<div
className={`fixed top-0 right-0 h-full w-1/4 z-50 bg-white drop-shadow-xl transition-transform ${
open ? 'translate-x-0' : 'translate-x-full'
}`}
>
<Sidebar></Sidebar>
</div>
)}
</> </>
// <>
// <div className="fixed left-0 bottom-0 m-5 z-100 flex font-sans select-none leading-1em">
// <div
// className="flex justify-center items-center w-10 h-10 rounded-full shadow cursor-pointer bg-blue-400 hover:bg-blue-600"
// onClick={() => {
// setOpen((open) => !open)
// setOpenedOnce(true)
// }}
// >
// <IconPower />
// </div>
// </div>
// {openedOnce && (
// <div
// className={`fixed top-0 right-0 h-full w-1/4 z-50 bg-white drop-shadow-xl transition-transform ${
// open ? 'translate-x-0' : 'translate-x-full'
// }`}
// >
// <Sidebar></Sidebar>
// </div>
// )}
// </>
) )
} }

10
src/components/AppButton.tsx Normal file
View file

@ -0,0 +1,10 @@
import { type FC } from 'react'
import { Button } from '@/components/ui/Button'
const AppButton: FC = () => {
return (
<Button className="fixed bottom-20 right-10 z-top h-10 w-10 select-none rounded-full text-red-300 ">ICON</Button>
)
}
export default AppButton

7
src/components/Footer.tsx Normal file
View file

@ -0,0 +1,7 @@
import { type FC } from 'react'
const Footer: FC = () => {
return <div></div>
}
export default Footer

7
src/components/Header.tsx Normal file
View file

@ -0,0 +1,7 @@
import { type FC } from 'react'
const Header: FC = ({ ...props }) => {
return <div></div>
}
export default Header

7
src/components/Main.tsx Normal file
View file

@ -0,0 +1,7 @@
import { type FC } from 'react'
const Main: FC = () => {
return <div></div>
}
export default Main

18
src/components/Sidebar.tsx
View file

@ -1,15 +1,7 @@
import Logo from '@/components/Logo' import { type FC } from 'react'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
export default function Sidebar() { const Sidebar: FC = () => {
return ( return <div></div>
<main className="w-[300px] px-4 py-5 text-center text-gray-700">
<Logo />
<div>Sidebar123</div>
<p className="mt-2 opacity-50 text-blue-600">This is the sidebar page</p>
<Textarea />
<Button>test</Button>
</main>
)
} }
export default Sidebar

4
src/index.css
View file

@ -74,5 +74,9 @@
} }
:host { :host {
@apply bg-background text-foreground; @apply bg-background text-foreground;
/* Disabled inherit */
all: initial;
direction: ltr;
} }
} }

8
src/main.tsx
View file

@ -1,11 +1,15 @@
import React from 'react' import React from 'react'
import App from './App' import App from './App'
import createShadowRoot from './createShadowRoot' import createShadowRoot from './createShadowRoot'
import style from './index.css?inline' import style from './index.css?inline'
// TODO: css hmr not work
// https://github.com/crxjs/chrome-extension-tools/issues/671
void (() => { void (() => {
createShadowRoot(__NAME__, { style, mode: __DEV__ ? 'open' : 'closed' }).render( createShadowRoot(__NAME__, {
style,
mode: __DEV__ ? 'open' : 'closed'
}).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>

3
tailwind.config.ts
View file

@ -11,6 +11,9 @@ module.exports = {
} }
}, },
extend: { extend: {
zIndex: {
top: '2147483647'
},
colors: { colors: {
border: 'hsl(var(--border))', border: 'hsl(var(--border))',
input: 'hsl(var(--input))', input: 'hsl(var(--input))',

7
vite.config.ts
View file

@ -6,17 +6,16 @@ import Icons from 'unplugin-icons/vite'
import manifest from './manifest' import manifest from './manifest'
import packageJson from './package.json' import packageJson from './package.json'
const isDev = process.env.NODE_ENV === 'development'
export default defineConfig({ export default defineConfig({
server: {
open: './index.html'
},
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, './src') '@': path.resolve(__dirname, './src')
} }
}, },
define: { define: {
__DEV__: process.env.NODE_ENV !== 'production', __DEV__: isDev,
__NAME__: JSON.stringify(packageJson.name) __NAME__: JSON.stringify(packageJson.name)
}, },
plugins: [ plugins: [