Deno Fresh Postcss：与Deno的未来CSS
#css #网络开发人员 #deno

ð使用PostCSS和Future CSS与Deno Fresh使用

在这篇有关DeNo Fresh Postcss的文章中，我们看看为Deno Fresh设置一些香草CSS工具。 Deno Fresh是SSR站点构建器。它具有无构建步骤的即时部署。没有建造步骤集，DeNo Fresh与Astro或Sveltekit等其他站点建筑商分开。这两个过程CSS，缩小并为您处理一些转换。尽管Deno Fresh缺乏这些功能，但优势是您对CSS有更多的控制权；您做出决定，而不是工具。也就是说，您需要做一些设置工作，以使用 PostCSS 之类的流行工具。这就是我们在这里看到的。

PostCSS工具转换输入CSS。您可以使用它自动生成前缀以用于旧浏览器，也可以缩小CSS 。 缩减可以从CSS中删除白色空间和评论，从而优化了CSS以输送到浏览器。使用我们的设置，我们可以保留原始的CSS文件（带有注释和白空间）。每当我们将其保存时，PostCSS都会生成发货版本。我们不仅在这里查看缩小。我们还添加了一些PostCSS处理来处理现代或未来的CSS ，这些CSS 尚未完全集成到 CSS规范。

ð§±我们正在建造什么？

而不是从头开始构建项目，而是要查看需要添加到Deno Fresh项目中的设置来使用PostCSS。我们将看到：

  • 如何在Deno Fresh
    • 中配置PostCSS本身
  • 每次保存CSS输入文件
    • 时，如何自动生成处理的CSS
  • 一种使用Deno Fresh static CSS资产缓存的方法

如果听起来不错，那就开始了。

â€deNo导入地图

让我们开始更新项目root目录中的import_map.json文件：

{
  "imports": {
    "@/": "./",
    "$fresh/": "https://deno.land/x/fresh@1.1.3/",
    "preact": "https://esm.sh/preact@10.11.0",
    "preact/": "https://esm.sh/preact@10.11.0/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
    "$std/": "https://deno.land/std@0.178.0/",
    "postcss/": "https://deno.land/x/postcss@8.4.16/"
  }
}

我们在LINE 3中添加了一个导入路径别名，我们将在以后使用。我们还添加了Deno标准库和Deno Postcss软件包。

ð发布CSS配置

配置本身将与您基于节点的工具中已经熟悉的内容不会太大。主要区别是我们在导入上使用npm:前缀。在项目root目录中使用以下内容创建postcss.config.ts：

import autoprefixer from "npm:autoprefixer";
import csso from "npm:postcss-csso";
import customMediaPlugin from "npm:postcss-custom-media";
import postcssPresetEnv from "npm:postcss-preset-env";

export const config = {
  plugins: [
    customMediaPlugin(),
    postcssPresetEnv({
      stage: 3,
      features: {
        "nesting-rules": true,
        "custom-media-queries": true,
        "media-query-ranges": true,
      },
    }),
    autoprefixer(),
    csso(),
  ],
};

ð观看脚本

最后一个主要作品是手表脚本。这会观看CSS输入文件夹，以进行更改，并在每次保存文件时运行PostCSS。我们将在项目根文件夹中使用styles目录作为CSS输入目录。当我们在此保存CSS文件时，手表脚本将将结果输出到static/styles。 static是为您想要Deno Fresh可以从部署项目静态服务的内容。

在项目根目录中创建build-css.ts，其中包含以下内容：

import { debounce } from "$std/async/mod.ts";
import { relative, resolve } from "$std/path/mod.ts";
import { config } from "@/postcss.config.ts";
import postcss from "postcss/mod.js";

const STYLES_INPUT_DIRECTORY = "styles";

async function buildStyles(path: string) {
  try {
    const css = await Deno.readTextFile(path);

    const { css: outputCss } = await postcss(config.plugins).process(css, {
      from: undefined,
    });

    const __dirname = resolve();
    const outputPath = `./static/${relative(__dirname, path)}`;
    console.log(`Updating styles for ${outputPath}`);
    await Deno.writeTextFile(outputPath, outputCss);
  } catch (error: unknown) {
    console.error(`Error building styles for path ${path}: ${error as string}`);
  }
}

const debouncedBuildStyles = debounce(async (path: string) => {
  await buildStyles(path);
}, 200);

const stylesOutputDirectory = `static/${STYLES_INPUT_DIRECTORY}`;
try {
  Deno.statSync(stylesOutputDirectory);
} catch (error: unknown) {
  if (error instanceof Deno.errors.NotFound) {
    Deno.mkdir(stylesOutputDirectory);
  }
}

const watcher = Deno.watchFs([`./${STYLES_INPUT_DIRECTORY}`]);
for await (const event of watcher) {
  const { paths } = event;
  paths.forEach((path) => {
    debouncedBuildStyles(path);
  });
}
  • buildStyles函数（line 8）采用更新的styles路径并使用PostCSS处理，将输出保存到static/styles。
  • 调用debounceBuildStyles而不是直接调用buildStyles，可以阻止CSS构建功能过于频繁地启动。我们将其限制为最多在200毫秒时期运行一次。
  • line 29 - 36在我们启动构建CSS任务（稍后更多地）时将运行一次，并创建output static/styles目录（如果尚不存在）。
  • line 38 - 44包含styles目录中文件更改的手表代码。如果您在启动构建CSS任务之前添加了新文件，请在任务运行后再次保存它们以确保PostCSS对其进行处理。

ð构建CSS任务

接下来，我们可以创建一个DENO任务来运行上一节中创建的手表脚本。在项目根目录中更新deno.json文件以添加build:css任务：

{
  "tasks": {
    "build:css": "deno run --allow-env=DENO_ENV --allow-read --allow-write build-css.ts",
    "start": "deno run -A --watch=static/,routes/ dev.ts"
  },
  "importMap": "./import_map.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

我们仅在此处提供任务。这些是读取写入和访问DENO_ENV环境变量的访问。如果您愿意，您可能会更加限制，listing the specific directories Deno将将读取权限应用于。

。

您可以打开一个新的终端选项卡并在此处运行此新任务：

mkdir styles # create a `styles` directory if you don't yet have one
deno task build:css

然后在您以前的终端选项卡中，通过运行deno task start启动Deno Fresh Server（照常）。例如，尝试在styles/global.css上创建新的CSS文件。如果您打开static/styles/global.css，则应该看到postcss生成的CSS的缩小版本。

ðdeno Fresh Postcss：测试

添加更多CSS文件，然后尝试使用范围媒体查询等新功能。您可以将CSS在rel标签中包含在您的一个预先标记文件中：

import { asset, Head } from "$fresh/runtime.ts";

export default function Home() {
  return (
    <Fragment>
      <Head>
        <link rel="stylesheet" href={asset("/styles/fonts.css")} />
        <link rel="stylesheet" href={asset("/styles/global.css")} />
                <!-- TRUNCATED... -->
      </Head>
      <main className="wrapper">
        <BannerImage />
        <h1 className="heading">FRESH</h1>
        <p className="feature">Fresh 🍋 new framework!</p>
        <Video />
      </main>
    </Fragment>
  );
}

在这里，我将href包装为asset函数中的样式表。这有助于缓存破坏。 Deno Fresh将HASH HASH录制文件的内容，并将计算出的哈希附加到文件名中。当CSS更改时，哈希和文件名更改，因此将不使用过时的CSS浏览器或在CDN中使用。

看一下static/styles。您的文件应包含缩小的CSS，并看起来像这样：

:root{--colour-dark:hsl(242deg 94% 7%);--colour-light:hsl(260deg 43% 97%);--colour-brand:hsl(50deg 100% 56%);--colour-theme:hsl(204deg 69% 50%);--colour-alt:hsl(100deg 100% 33%);--spacing-0:0;--spacing-1:0.25rem; /* TRUNCATED...*/

ðð½DenoDeNo Fresh Postcss：总结

我们介绍了如何使用Deno Fresh设置Postcs。特别是，您看到了：

  • DENO代码用于触发函数时，当文件更改
  • 如何在DENO任务权限中选择性
  • 一些DENO文件API

complete code for this project is in the Rodney Lab GitHub repo。我确实希望该帖子可以帮助您进行现有项目，或者为新项目提供了一些灵感。作为扩展程序，您可以将所有喜欢的将来的CSS规则添加到PostCSS配置中。超越linting your input CSS, consider trying stylelint的Postcs。

如果您对此内容或改进建议有一些疑问，请联系。如果愿意，可以在下面添加评论。另外，请了解有关DENO或其他主题的新鲜内容的想法！

ðð½DENO新鲜邮政编码：反馈

您发现该帖子有用吗？您想看另一个主题的帖子吗？与新帖子的想法联系。另外，如果您喜欢我的写作风格，请与您的公司网站撰写一些帖子，以联系您的公司网站。请继续阅读以找到与之联系的方法，以下更远。如果您想支持与此相似的帖子，并且可以浪费几美元，欧元或磅，请访问consider supporting me through Buy me a Coffee。

最后，请随时在社交媒体帐户上分享所有发现有用的关注者的帖子。除了在下面发表评论外，您还可以通过@askRodney在Twitter上与Mastodon上的@rodney@toot.community以及#rodney元素矩阵室取得联系。另外，请参见further ways to get in touch with Rodney Lab。我定期发布在Astro和Deno上。另外，subscribe to the newsletter to keep up-to-date通过我们的最新项目。