Streamlining production of tailwindcss bundled css, introducing multiple entryfiles for content-ui foldesr #750
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -51,7 +51,7 @@ const manifest = deepmerge( | |
| }, | ||
| { | ||
| matches: ['http://*/*', 'https://*/*', '<all_urls>'], | ||
| js: ['content-ui/page1/index_dev.js'], | ||
|
There was a problem hiding this comment. Because of missing implementation about shadow dom injection, this is totally not working right now There was a problem hiding this comment. erm bro.. basically what you need to do is just this : import { createRoot } from 'react-dom/client';
import '@src/index.css';
import '../dist/global-out.css';
import NewTab from '@src/NewTab';ive included in every page that needed this css bundle.. it worked outright for me without pasting you couldn't see it, because of the fail build? did you try local version? |
||
| }, | ||
| { | ||
| matches: ['http://*/*', 'https://*/*', '<all_urls>'], | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export * from './watch-rebuild-plugin'; | ||
| export * from './make-entry-point-plugin'; | ||
| export * from './watch-public-plugin'; | ||
| export * from './tailwindcss-bundler'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,42 @@ | ||||||||||
| import { Plugin } from 'vite'; | ||||||||||
| import fs from 'fs/promises'; | ||||||||||
| import path from 'path'; | ||||||||||
|
Comment on lines
+2
to
+3
There was a problem hiding this comment.
Suggested change
There was a problem hiding this comment. ohh node must be included? what happen if don't There was a problem hiding this comment. |
||||||||||
| import postcss from 'postcss'; | ||||||||||
| import tailwindcss from 'tailwindcss'; | ||||||||||
| import autoprefixer from 'autoprefixer'; | ||||||||||
| import postcssImport from 'postcss-import'; | ||||||||||
| import LightningCSS from 'lightningcss'; | ||||||||||
|
|
||||||||||
| const rootDir = path.resolve(__dirname, '../../../../'); | ||||||||||
|
|
||||||||||
| export function processCssPlugin(): Plugin { | ||||||||||
| return { | ||||||||||
| name: 'process-css', | ||||||||||
| async configResolved(config) { | ||||||||||
| const inputFile = path.resolve(rootDir, 'ui/lib/global.css'); | ||||||||||
| const outputFile = path.resolve(config.root, 'dist/global-out.css'); | ||||||||||
|
There was a problem hiding this comment. It's really necessary to change name to |
||||||||||
|
|
||||||||||
| const css = await fs.readFile(inputFile, 'utf-8'); | ||||||||||
| const result = await postcss([postcssImport(), tailwindcss, autoprefixer]).process(css, { | ||||||||||
| from: inputFile, | ||||||||||
| to: outputFile, | ||||||||||
| }); | ||||||||||
|
|
||||||||||
| const minified = LightningCSS.transform({ | ||||||||||
| code: Buffer.from(result.css, 'utf8'), | ||||||||||
| minify: true, | ||||||||||
| targets: { | ||||||||||
| // Define your target browsers or leave empty for default | ||||||||||
| }, | ||||||||||
| filename: 'global.css', | ||||||||||
| }); | ||||||||||
|
|
||||||||||
| const finalCss = Buffer.from(minified.code).toString('utf8'); | ||||||||||
|
|
||||||||||
| await fs.mkdir(path.dirname(outputFile), { recursive: true }); | ||||||||||
| await fs.writeFile(outputFile, finalCss); | ||||||||||
|
|
||||||||||
| console.log('CSS processed and saved to', outputFile); | ||||||||||
| }, | ||||||||||
| }; | ||||||||||
| } | ||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,6 +27,4 @@ await replaceTscAliasPaths({ | |
| watch: false, | ||
| outDir: 'dist', | ||
| declarationDir: 'dist', | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,6 +26,6 @@ | |
| "@extension/tsconfig": "workspace:*", | ||
| "fast-glob": "^3.3.2", | ||
| "fflate": "^0.8.2", | ||
| "tsx": "^4.19.1" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
There was a problem hiding this comment. This shouldn't work that way, it need to edit This should reading all folders from e.g. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,52 @@ | ||||||
| import { readdirSync, existsSync, mkdirSync, writeFileSync, Dirent, readFileSync, renameSync } from 'fs'; | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| import { resolve } from 'node:path'; | ||||||
|
|
||||||
| const rootDir = resolve(__dirname, '..'); | ||||||
| const srcDir = resolve(rootDir, 'src'); | ||||||
|
|
||||||
| export const getEntryPoints = (options: { include?: string[]; exclude?: string[]; createRecursively?: boolean }) => { | ||||||
| const entryPoints: Record<string, string> = {}; | ||||||
|
|
||||||
| const foldersToProcess = | ||||||
| options.include || | ||||||
| readdirSync(srcDir, { withFileTypes: true }) | ||||||
| .filter((item): item is Dirent => item.isDirectory()) | ||||||
|
There was a problem hiding this comment. Why not like that?
Suggested change
I don't really know this kind of typing, that's interesting There was a problem hiding this comment. This is an unnecessary assertion. There was a problem hiding this comment.
erm we only want folder name, and not file names, readdirsync will read filenames too which we don't want. |
||||||
| .map(item => item.name); | ||||||
|
|
||||||
| foldersToProcess.forEach(folderName => { | ||||||
| const shouldExclude = options.exclude && options.exclude.includes(folderName); | ||||||
|
There was a problem hiding this comment. Maybe sth like that:
Suggested change
|
||||||
|
|
||||||
| if (!shouldExclude) { | ||||||
| const entryFolder = resolve(srcDir, folderName); | ||||||
| const entryFileTS = resolve(entryFolder, 'index.ts'); | ||||||
| const entryFileTSX = resolve(entryFolder, `${folderName}.tsx`); | ||||||
| const existingEntryFileTSX = resolve(srcDir, 'App.tsx'); | ||||||
|
There was a problem hiding this comment. The details of creating an existing App.tsx as an entry point for pages is a very specific implementation that is difficult to understand from the outside. App.tsx is not currently used anywhere, so it seems like a good idea to rename it to something like Template.tsx. There was a problem hiding this comment. ahhh i just added that, cause user can choose between just single page or multi page, if user chooses to have multipage, he can always just add stuff into getentrypoints.includes which will generate those template for them. so its easier for them to understand. |
||||||
|
|
||||||
| if (!existsSync(entryFolder) && options.createRecursively) { | ||||||
| mkdirSync(entryFolder, { recursive: true }); | ||||||
| writeFileSync(entryFileTS, `export * from "./${folderName}";`); | ||||||
|
|
||||||
| // Copy the existing entry file to the new entry file, just as a template | ||||||
| if (existsSync(existingEntryFileTSX)) { | ||||||
| writeFileSync(entryFileTSX, readFileSync(existingEntryFileTSX, 'utf8')); | ||||||
|
|
||||||
| try { | ||||||
| // renameSync(existingEntryFileTSX, resolve(srcDir, 'App-deleteMe!.tsx')); | ||||||
|
There was a problem hiding this comment. Don't leave comments like this for review |
||||||
| } catch (error) { | ||||||
| console.error('Failed to rename file:', error); | ||||||
| } | ||||||
| } else { | ||||||
| writeFileSync(entryFileTSX, ''); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| if (existsSync(entryFolder)) { | ||||||
| entryPoints[folderName] = entryFileTS; | ||||||
| } else { | ||||||
| console.warn(`Folder "${folderName}" does not exist and was not created.`); | ||||||
| } | ||||||
| } | ||||||
| }); | ||||||
|
|
||||||
| return entryPoints; | ||||||
| }; | ||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './page1'; |
|
There was a problem hiding this comment. yeap i agree. i just want to show example |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { useEffect } from 'react'; | ||
| import { Button } from '@extension/ui'; | ||
| import { useStorage } from '@extension/shared'; | ||
| import { exampleThemeStorage } from '@extension/storage'; | ||
|
|
||
| export default function App() { | ||
| const theme = useStorage(exampleThemeStorage); | ||
|
|
||
| useEffect(() => { | ||
| console.log('content ui loaded'); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="flex items-center justify-between gap-2 bg-blue-100 rounded py-1 px-2"> | ||
| <div className="flex gap-1 text-blue-500"> | ||
| Edit <strong className="text-blue-700">pages/content-ui/src/app.tsx</strong> and save to reload. | ||
| </div> | ||
| <Button theme={theme} onClick={exampleThemeStorage.toggle}> | ||
| Toggle Theme | ||
| </Button> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './page2'; |
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { useEffect } from 'react'; | ||
| import { Button } from '@extension/ui'; | ||
| import { useStorage } from '@extension/shared'; | ||
| import { exampleThemeStorage } from '@extension/storage'; | ||
|
|
||
| export default function App() { | ||
| const theme = useStorage(exampleThemeStorage); | ||
|
|
||
| useEffect(() => { | ||
| console.log('content ui loaded'); | ||
|
There was a problem hiding this comment. Shouldn't be the same as in first script, but anyway. |
||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="flex items-center justify-between gap-2 bg-blue-100 rounded py-1 px-2"> | ||
| <div className="flex gap-1 text-blue-500"> | ||
| Edit <strong className="text-blue-700">pages/content-ui/src/app.tsx</strong> and save to reload. | ||
| </div> | ||
| <Button theme={theme} onClick={exampleThemeStorage.toggle}> | ||
| Toggle Theme | ||
| </Button> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can't be ignored
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oops i forgot ive done that, will remove it.. i just have to push another commit right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, that's your normal workflow, PR it's only for tracking it