Seens css styling it's not working in Popup

superhos commented 1 year ago

There will be output a css single file after building, but which never be imported in html file or js file. It's seems like a bug?

ChangHyun2 commented 1 year ago

same with me

ChangHyun2 commented 1 year ago

I tried to change html plugins with others, but failed.

So I temporarily fixed this issue.

add index.css style link into the html file.

// index.html

  <head>
    <meta charset="UTF-8" />
    <title>New tab</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

change index.[content-hash].css filename to index.css when src build is done.

// scripts/build.ts

const changeCssFiles = () => {
  const findStyles = (
    directoryPath: string,
    callback: (filePath: string) => void
  ) => {
    const filesNames = fs.readdirSync(directoryPath);

    for (const fileName of filesNames) {
      const filePath = path.join(directoryPath, fileName);
      const fileStat = fs.statSync(filePath);
      if (fileStat.isFile()) {
        const fileExtension = path.extname(fileName);
        if (fileExtension === ".css") {
          callback(filePath);
        }
        continue;
      }
      if (fileStat.isDirectory()) {
        findStyles(filePath, callback);
      }
    }
  };

  const directoryPath = "./dist/v3";

  findStyles(directoryPath, (stylePath: string) => {
    console.log("catched", stylePath);

    fs.renameSync(
      stylePath,
      [...stylePath.split("/").slice(0, -1), "index.css"].join("/")
    );
  });
};

async function BuildVersionedExt(versions: (2 | 3)[], dev = false) {
  const pageDirMap = getPageDirMap();

  if (versions.length === 0) {
    return;
  }

  let version = versions[0];

  await Promise.all([
    BuildPages(version, pageDirMap, dev),
    CopyPublicFiles(version),
    CopyJSFiles(version, dev),
  ]);

  if (versions.length > 1) {
    version = versions[1];
    fse.copySync(
      resolve(OutDir, `v${versions[0]}`),
      resolve(OutDir, `v${version}`)
    );
  }

  for (const v of versions.slice(0, 2)) {
    BuildManifest(v, pageDirMap);
  }

  console.log("change css");
  changeCssFiles();
}

@superhos

superhos commented 1 year ago

@ChangHyun2 Thanks for your great help

Debdut / browser-extension

Seens css styling it's not working in Popup #21