From 9f552fb16f71ca75b57516a21cf401b30124a630 Mon Sep 17 00:00:00 2001 From: Herbert Date: Wed, 26 May 2021 15:43:06 +0800 Subject: [PATCH 1/5] docs(cn): integrations/svelte translation --- integrations/svelte.md | 123 ++++++++++++++++++++--------------------- 1 file changed, 61 insertions(+), 62 deletions(-) diff --git a/integrations/svelte.md b/integrations/svelte.md index db8dc1a3..97e8527d 100644 --- a/integrations/svelte.md +++ b/integrations/svelte.md @@ -7,39 +7,39 @@ -# Integration for [Svelte](https://svelte.dev/) +# 集成 [Svelte](https://svelte.dev/) {#integration-for-svelte} -Our Svelte integration uses the Svelte Preprocessor API, therefore runs before compilation step. This brings some limitations for dynamic changed classes. +我们的 Svelte 集成使用了 Svelte 预处理器的 API，因此在编译之前运行。这对动态可变的 classes 带来了一些限制。 -## Documentation +## 文档 {##documentation} -### Options +### 配置选项 {#options} ```js import { windi } from 'svelte-windicss-preprocess' // ... windi({ - silent?: boolean, // default: false - mode?: 'development' | 'production', // default: process.env.NODE_ENV - configPath?: string, // no default - disableFormat?: boolean, // default: false + silent?: boolean, // 默认值: false + mode?: 'development' | 'production', // 默认值: process.env.NODE_ENV + configPath?: string, // 无默认值 + disableFormat?: boolean, // 默认值: false useDevTools?: { - enabled?: boolean, // default: false + enabled?: boolean, // 默认值: false }, }) ``` -### Custom pre-processing information +### 自定义预处理信息 {#custom-pre-processing-information} -With v4 we introduced a new feature set of custom attributes for svelte style tags, to make integration regardless the setup easy and straight forward. -Non scoped styles will be handled in svelte according to their docs with `:global()` for classes and `-global-` for keyframes. +在 v4 我们介绍了一个为 svelte 样式标签设置自定义属性的新特性，无需设置即可轻松进行集成。非作用域限制的样式在 svelte 中处理， 根据 svelte 的文档 `:globals()` 标记 classes，`-global-` 标记 keyframes。 -### Preflights +### 预检查（Preflights） {#preflights} -Svelte nature is to scope CSS style and remove unused styles, this can lead to issues if you add preflights into the layout wrapper and want that styles to be available on all other `.svelte` files as well. On the other hand, if you compile to custom-elements you cannot use `:global()` styles. -To allow the user to decide where to put the preflights as well deciding if they should be global or scoped, we have following syntax: +Svelte 本身就会去限制 CSS 样式的作用域，并且移除没有使用的样式。如果你把预检查添加到布局包装器，并且想让那些样式也作用在其他的`.svelte`文件中，会导致一些问题。另一方面，如果你编译为自定义元素，你不能使用 `:global()` 样式。 + +允许用户自己去决定哪里放置预检查，与决定样式是全局的还是作用域内的一样。我们需要遵循下面的语法： ```html @@ -48,20 +48,20 @@ To allow the user to decide where to put the preflights as well deciding if they - + - + ``` -### Safe list +### 安全清单 {#safe-list} -Sometimes you want to have dynamic classes based on some logic in script tags. Since [svelte-windicss-preprocess] runs before the svelte compile step, there is no way it could know this dynamic values. There are many approaches to this, either use windi at runtime or using a bundler setup instead this preprocessor one, or if you know all possible classes in the beginning add them to a safe list. +有时候你可能想基于一些逻辑去用动态的 classes 在 script 标签上。从 [svelte-windicss-preprocess] 在 svelte 编译这一步之前启动开始，它就没法儿可以理解这个动态值了。对于这个情况，这儿还是有些办法的，要不就在运行时使用 windi，要不使用一个打包设置取代这个预处理器。或者，如果你一开始就知道所有可能的 classes，把它们加到安全清单里面去。 -Similar to preflights, this safe list need to be available anywhere you want it, and also scoped and global. +跟预检查很像，安全清单也是在你想用的地方生效，也分受作用域限制的和全局的。 ```html @@ -70,43 +70,44 @@ Similar to preflights, this safe list need to be available anywhere you want it,
- I am dynamic! + 我是动态的！
- + - + ``` -### Windi CSS classes -By default, all inline used classes of Windi CSS will be scoped with native svelte logic. This has its advantages (you can find many discussions online). -However, using a utility based CSS framework there is not much need to make sure classes do not override, since e.g. `bg-gray-600` will always have the same CSS code behind it, regardless which `.svelte` file it is used. -You might want to safe more file size and using Windi CSS classes not scoped, but might want to choose this file by file. +### Windi CSS classes {#windi-css-classes} + +默认地，所有行内使用的 Windi CSS 的 classes 在原生 svelte 逻辑里面都是受作用域限制的。这有它本身的优势（你可以找到一些在线的讨论）。然而，使用基于 CSS 框架的工具类并不是很需要确定是不是被覆盖了。举个例子，`bg-gray-600` 之后总有一些相同的 CSS 代码，并不需要关心哪一个 `.svelte` 文件用到了。 + +你可能想让文件的尺寸更安全，使用 Windi CSS classes 是不受作用域限制的，但是想去通过文件选择。 -To make all Windi CSS classes in one `.svelte` global, with help of `:global()` you can modify / add the following style tag. +使所有的 Windi CSS classes 在一个 `.svelte` 文件的全局样式中，你可以借助 `:global()` 修改或者添加下面的样式标签来实现。 ```html ``` -### Custom styles +### 自定义样式 {#custom-styles} -You may have the need in your project to define custom CSS classes, and want to decide seperate to Windi CSS if they are scoped or global. You can with the following syntax: +你可能需要在你的项目里定义自定义的 CSS classes，并且想去自己决定它们是受作用域限制的还是全局的，跟 Windi CSS 分开。你可以通过下面的语法来实现： ```html - + - + ``` -You can combine any of this attributes, so full style tag can look like: +你可以把其中的一些属性写在一起，完整的样式标签是下面这样： + ```html ``` -### VS Code Extension -Using special CSS tag syntax as well as the attributes above, will break the CSS diagnostics of VS Code. Please make sure to disable them. -If you are using [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), add this setting to your VS Code configuration file. +### VS Code 扩展 {#vs-code-extension} + +使用特殊的 CSS 标签语法比如上面的属性，会破坏 VS Code 的 CSS 诊断。请确保关掉它们。如果你是使用 [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)，把下面的设置加到你的 VS Code 配置文件里面去。 ```json { @@ -136,26 +138,26 @@ If you are using [Svelte for VS Code](https://marketplace.visualstudio.com/items } ``` -## Setup Guides +## 起步向导 {#setup-guides} -Here are two guides for Svelte and SvelteKit using their starter template. +这儿使用它们的初学者模板，分别为 Svelte 和 SvelteKit 提供了两种向导。 -### Svelte +### Svelte {#svelte} -get started template and install package from NPM +获取初学者模板，从 NPM 安装包 ```bash npx degit sveltejs/template svelte-project npm i -D svelte-windicss-preprocess ``` -remove not needed global CSS files to prevent style breaks +移除不需要的全局 CSS 文件，防止样式中断 ```diff - ./public/global.css ``` -remove stylesheet link in `index.html` +在 `index.html` 中移除样式表链接 ```diff @@ -180,7 +182,7 @@ remove stylesheet link in `index.html` ``` -add [svelte-windicss-preprocess] config to `rollup.config.js` +添加 [svelte-windicss-preprocess] 配置到 `rollup.config.js` ```diff import svelte from 'rollup-plugin-svelte'; @@ -228,18 +230,16 @@ add [svelte-windicss-preprocess] config to `rollup.config.js` + windi({}), + ], compilerOptions: { - // enable run-time checks when not in production + // 在不是生产环境下，启用运行时检查 dev: !production } }), - // we'll extract any component CSS out into - // a separate file - better for performance + // 我们将提取组件的 CSS 到一个单独的文件 - 为了更好的性能 css({ output: 'bundle.css' }), - // If you have external dependencies installed from - // npm, you'll most likely need these plugins. In - // some cases you'll need additional configuration - - // consult the documentation for details: + // 如果你有从npm下载的外部依赖， + // 你大概率需要这些插件。在一些情况下你需要额外的配置 - + // 看这个文档了解更多细节： // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, @@ -247,16 +247,15 @@ add [svelte-windicss-preprocess] config to `rollup.config.js` }), commonjs(), - // In dev mode, call `npm run start` once - // the bundle has been generated + // 在开发模式下，调用 `npm run start` 一次 + // bundle将会被生成 !production && serve(), - // Watch the `public` directory and refresh the - // browser on changes when not in production + // 监控 `public` 文件夹，当不是生产环境下 + // 更改刷新浏览器 !production && livereload('public'), - // If we're building for production (npm run build - // instead of npm run dev), minify + // 如果是为生产环境构建（npm run build 取代 npm run dev），压缩代码 production && terser() ], watch: { @@ -265,7 +264,7 @@ add [svelte-windicss-preprocess] config to `rollup.config.js` }; ``` -update `App.svelte` +更新 `App.svelte` ```diff