Stylify发布

Stylify的发布、更新日志以及如何从一个版本更新到另一个版本。

实际版本

项目	状态	描述
astro		Integration for Astro.build
bundler		A flexible CSS bundler.
nuxt		Module for Nuxt.js Framework v3+.
nuxt-module		Module for Nuxt.js Framework v2 < v3.
stylify		Core package. Generates CSS and minifies selectors.
unplugin		Universal plugin for Vite, Webpack, Rollup and Esbuild.

##从0.5升级到0.6

• 发布 - 0.6.0
• Milestone

@stylify/stylify

编译器

• configure和addMacro方法中删除了return this。
• 现在默认启用了CSS变量，所有的变量现在都作为CSS变量导出。另外，当在一个属性值中使用$someVariable时，它被转换为var(--someVariable)。
• replaceVariablesByCssVariables被重新命名为cssVariablesEnabled。cssVariablesEnabled选项接受一个布尔值，如果等于false则禁用CSS变量。
• selectorAreas现在只接受正则表达式。而不是属于正则表达式的字符串。

// 0.5
const compilerConfig = {
  selectorsAreas: [
	'(?:^|\\s+)class="([^"]+)"',
  ]
}

// 0.6
const compilerConfig = {
  selectorsAreas: [
	/(?:^|\s+)class="([^"]+)"/,
  ]
}

Macros

• 宏回调中的this对象现在包含编译器实例。如果你需要访问包含变量、助手和其他属性的编译器实例，你不能使用箭头函数来访问this对象。
• 代替selectorProperties.add()返回一个带有properties: values的对象。
• Matches getCapture()方法如果没有找到捕获，现在会返回undefined作为默认值而不是空字符串。这改善了对match.getCapture(0)?? something的比较。
• hasCapture方法已被删除

// 0.5
const compilerConfig = {
  macros: {
    macro: ({ macroMatch, selectorProperties, helpers, variables, dev })  => {
      selectorProperties.add('property', macroMatch.geCapture(0));
    }
  }
}

// 0.6
const compilerConfig = {
  macros: {
    macro(match) {
       const { variables, helpers, dev } = this;
       return  {
         ['property']: match.getCapture(0),
         'another-property': 'value'
       }
    }
  }
}

组件

• 组件回调中的this对象现在包含编译器实例。
• 组件定义现在接收RegExpMatch，而不是一个匹配数组。使用 “getCapture(0) “代替 “matches[0]“。匹配的索引现在小了1：fullMatch是整个reg exp匹配，而capture只包含额外的capture：
  • matches[0] => match.fullMatch.
  • matches[1]现在是match.getCapture(0)。

// 0.5
const compilerConfig = {
  components: {
     'btn:(\\S+)'({matches, variables, helpers }) {
        return `color:${matches[1]}`
     }
  }
}

// 0.6
const compilerConfig = {
  components: {
     'btn:(\\S+)'(match) {
        const { variables, helpers, dev } = this;
        return `color:${match.getCapture(0)}`
     }
  }
}

帮助器

• 帮助器回调中的this对象现在包含编译器实例

配置器

• 除了getExistingConfigFiles以外的所有方法都被删除。该方法返回现有配置文件的路径。

Compiler hooks

• compiler:newMacroMatch： 现在为选择器属性接收Record<string, string>而不是SelectorProperties类。

// 0.5
hooks.addListener('compiler:newMacroMatch', ({selectorProperties}) => {
	const pixelUnit = selectorProperties.properties['font-size'];

	selectorProperties.addMultiple({
		'custom-property': 'value'、
	});
});

// 0.6
hooks.addListener('compiler:newMacroMatch', ({selectorProperties}) => {
	// 作为一个对象属性访问值
	const value = selectorProperties['font-size'];

	//将值作为一个对象属性分配
	selectorProperties['custom-property'] = 'value';
});

@stylify/bundler

• cssVarsDirPath, sassVarsDirPath, lessVarsDirPath, stylusVarsDirPath被重命名为cssVarsExportPath, sassVarsExportPath, lessVarsExportPath, stylusVarsExportPath。它接受直接的文件路径（如./path/to/vars.css），它将被保存到该路径，或者只接受直接路径./path/to/cssDir。如果没有提供文件名，stylify-variables文件名将被使用，并加上正确的后缀。

@stylify/astro, @stylify/unplugin, @stylify/nuxt-module

• Mangling现在默认是关闭的
• 这是因为可靠性和防止 “我的选择器刚刚发生了什么 “这样的混乱（尽管，这是一个功能，而不是一个错误）。
• 纠错算法现在直接在源代码中纠错选择器。这是因为在文件中处理选择器是不可靠的，因为这些文件是由框架编译并传递给vite/webpack/rollup的，因此放弃了这种支持。
• 如果你想启用mangling，请将mangling编译器选项设置为true。选择器将只在你运行构建命令时被处理。而不是在观察模式下。
• 构建命令通常只在GitHub Actions、Gitlab Pipelines或类似的地方运行，因此选择器将在生产构建中被处理，而不是在本地环境中。
• 如果你需要在本地环境中测试构建，请将你的修改藏起来或提交，运行构建命令，然后再恢复修改。

// 0.6
const compilerConfig = {
  编译器： {
   // 只有当捆绑器不在观察模式中时，这才会产生效果
   mangleSelectors: true
  }
}

你可能还想在本地环境中完全禁用mangling，这样你就不必在每次运行build时都要恢复由Stylify引起的变化。 这可以通过使用环境变量轻松解决（更多信息可以在这里找到）：

const config = {
	compiler: {
		// 只有在设置了用于纠缠的环境变量的情况下才会纠缠选择器
		// 该变量的名称由你决定
		mangleSelectors: typeof process.env.STYLIFY_MANGLE_SELECTORS !== 'undefined'
	}
}

@stylify/unplugin

• transformIncludeFilter配置选项已被删除，因为它不再需要了。