@animus-ui/ 层门

对于销售商样式表, 您必须导入: 取日期器、 网格 图书馆,一个软件包 styles.css将它装入级联 你下面的一层,所以它的正常规则 无法对抗你的设计系统, 不管他们的特异性或负载顺序.

任意外的样式表 @layer 打破每层规则,所以卖家CSS 按常例导入,可超过使用的设计系统或通用框架 层。 层门加载 CSS 本身, 内含其 @imports,并设置 每个文件在您下面一层的规则 :

@layer vendor, app;
@layer vendor {
  /* react-grid-layout/css/styles.css, as written */
}

你的CSS已经超出范围了 App 样式表和 CSS 模块与您一样 配置它们: 层口层只包含您声明的供应商文件 (单位:千美元)sheets)或选择加入(dependencies),包括您的 CSS 导入地点 一个.

维特

import { layergate } from '@animus-ui/layergate/vite';
// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    layergate({
      layer: 'vendor',
      order: ['vendor', 'base', 'components', 'utilities'],
      sheets: ['react-grid-layout/css/styles.css', './styles/legacy.css'],
      dependencies: ['react-datepicker'],
      optOut: ['./styles/legacy/keep-unlayered.css'],
    }),
  ],
});

// your entry module, once, before other CSS
import 'virtual:layergate';

JS模块输入的自有样式表,通过任何拼写,都得到同样的效果 单份,申报的床单总是在申报的 命令,以应用程序导入时所用的样式表为准。 维特自己的CSS系统 然后每一次处理一次: 提取。 一个窝 @import 包的解析,如 CSS 导入时, 通过其 style 输入。 字体和图像不断解析,因为 层门重写相对 url() 从已交付的文件解析. 编辑到自有文件、嵌入式导入和下面的文件 node_modules 包括,热更新到位.

网络软件包

// webpack.config.js
const { LayergatePlugin } = require('@animus-ui/layergate/webpack');

module.exports = {
  plugins: [
    new LayergatePlugin({
      layer: 'vendor',
      order: ['vendor', 'base', 'components', 'utilities'],
      sheets: ['react-grid-layout/css/styles.css'],
      dependencies: ['react-datepicker'],
      declaredBy: require.resolve('./src/styles/app.css'),
    }),
  ],
};

插件没有添加规则 。 它会加入你所有的装货链 css-loader明确为全局(modules: false,作为Next的全球链条 在PostCSS运行之前, 提高Cs -loader的 importLoaders 每个样式表都会通过它,导入 包括这些 自有样式表到达完成 @import编号 由于 cs-loader 解决了它们和内嵌, 所以 cs-loader 从未看到 (单位:千美元) layer() 导入。 PostCSS, Sass和Cs-loader 继续像以前一样运行.

其他链条都未受影响。 一个Css -loader可以处理文件 作为CSS模块modules 未设置,或 auto)在一行中报告 (单位:千美元)layergate.coverage); 链条只构建 CSS 模块,例如 下个是,静静地独活.

CSS 模块与层门

层门不能决定哪个样式表是 CSS 模块。 如果有一个规则 处理两个, 拆分它: 全球 CSS 在一个规则中, 其 cs- loader 有 modules: false,该图层门将加入, CSS 模块在规则 他们自己的,它独自离开.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: false } },
        ],
      },
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true } },
        ],
      },
    ],
  },
};

下一个已经以这种方式构建 CSS .

什么层门返回从不被 Web 包缓存, 所以温和地开始 持久缓存再次完成自有样式表: 每200个约118 ms 合成测量中的销售单。 安全地抢走他们 * 来源(文件和计划)与缓存一起保存,a 以后可能会有变动。 所有权、选择不适用和 申报的床单是按真实情况处理的; url()s 重新基于网络包 读取每个文件,所以 resolve.symlinks: false 把它们解决为 cs- loader 已经 这个 declaredBy 样式表从不分层,即使自有 样式表导入它.

网页包没有 virtual:layergate。通过 declaredBy,一个路径 您的样式表: 所申报的工作表放在其头上, a 模块本身导入一个,然后不装入任何内容。 没有它,每个都导入 自己申报的工作表;它属于进口的任何地方.

• 遥控器 @import 在自有样式表中是一个错误 (单位:千美元)layergate.remote: 网络包装不能装入层内,而且 无层拷贝会逃脱它。 在本地销售工作表, 或者选择文件 如果未分层是可以接受的,则退出.
• 一个使用闪电CSS而不是cs-loader的链条没有覆盖, 报告layergate.coverage) (中文(简体) ).
• 在监视模式下,将自有样式表读取的文件编辑到任何文件 node_modules 包括,重建它。 插件会生成 RegExp 或 函数 watchOptions.ignored 监视这些文件; 拥有它的主机 监视选项通过 watchIgnored: false 问 plugin.watches(path)。 。 。 .
• Turbopack 在样式表上不运行加载器会导入样式表, 所以 层门不能在那里工作 .

与下个和Animus一起使用 quarantine 选项 @animus-ui/next-plugin,它为 Next 的客户端编译器设置了此功能.

它对样式表的作用

• 每个文件都是自己决定的. 一个文件自己的规则进入 层。 选择退出文件的规则 留在它之外,根据 联合国 @import 并保存它导入的文件 他们自己的决定.
• 进口品保持其条件. @import "x.css" layer(a) supports(…) screen 变成 @media screen { @supports (…) { @layer a { … } } } 在地层内部,所以它的规矩是 vendor.a匿名 layer import 获得它自己的一个私有层,而不是共享层.
• 文字为正文. 选择者,声明, !important, (中文(简体) ), keyframes 和文件本身的分层到达浏览器。 仅a 相对 url() 在已发送文件目录更改以外的文件中.
• 远程进口保持远程. 在维特下,一个 http(s): 导入为 竖起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起 未检查。 在webpack下,这是一个错误(见上文).

何等地层不变

一层只限制正常声明。 记录和报告为: 警告,永远不要剥去:

• !important 声明,将你的正常声明从任何 层layergate.important(三);
• 动画和密钥框架,其价值高于正常声明 当他们运行时(layergate.animation) (中文(简体) ).

字体、密钥框和财产名称是全球性的,无论图层如何.

还没有

• CSS模块,Sass,Less和Stylus留给了Vite. 在网包里,萨斯 输出像任何 CSS 一样完成, CSS 模块被留下.
• 拥有的文件可以多次到达. 样式表 Vite 负载 例如应用表 @import 到达自有文件, 是 由分层门完成:它自己的规则保持不变,拥有 文件是内嵌的分层,所以没有未分层的复制逃出。 但每个都完成了 样式表是自立的,所以从其中的2个得到相同的自有文件 每一份都分层交付 每个文件一份 整个文件都需要一个全文件范围的登记处,一个可能的 之后的递增.
• App CSS 除非您在列表中列出 sheets. 装载的CSS 在此之前 virtual:layergate,或者另一个工具的层顺序语句 先来, 还可以把你们的分层放在后面 vendor。 。 。 .
• A 类 .css 带有查询的请求( e)?inline, (中文(简体) ), ?url, (中文(简体) ), ?raw)是留给Vite的.
• 样式表 @namespace 是个错误( r)layergate.namespaceit: 适用于整个样式表,而输入另一个样式表的文件不是.
• 一个主机的 PostCSS 运行一次,在每个完成的样式表上,而不是每个文件上.
• Turbopack:不支持(见上文webpack).

从主机样式表交付

带有自己的样式表模块的工具可以在 它的头,而不是穿过 virtual:layergate: 通过 declaredBy (单位:千美元) 模块的规格,一个自有的样式表 一个JS模块从此导入 首先加载)和预置 await plugin.stylesheetHead.call(this, id) 改为 该模块的CSS在其 load 钩. 头部使用根相通的 URL,所以 从虚拟模块中解析资产; Vite 根外的文件是 通过 /@fs/: 正在开发中,一个已申报的工作表的目录是 添加到 server.fs.allow 当服务器启动时( 在您自己的列表中, 或 Vite 默认的工作空间根, 以及它在另一个中引用的资产 当找到目录时, 它被允许; 在建置中, 它被作为 资产。 Animus的 (Animus) (英语) quarantine 选项这样做.

核心 API

compileUnit(roots, { layer, order, resolve, read, quarantined, owns, url, base, cache }) 将样式表图表按顺序汇编成一个已完成的样式表 主机的解析器和文件读取器,并返回 CSS, 源地图, 文件 阅读,无论任何东西是分层的, 和诊断. owns 说 文件会启动一个自有的图表( 默认: 所有) ,并且 url 映射引用文件 至其 URL 文本(默认:相对于第一个根). base 是生成的目录层名相对(工程) root),所以它们在每个机器上都是一样的. cache 保持解析文件 在编译之间; 当一个文件的条目发生变化时将其放下。 虚拟和网络包装 适配器建于上.