Lanzamientos de Stylify

Lanzamientos de Stylify, registro de cambios y cómo actualizar de una versión a otra.

Versiones actuales

Proyecto	Estado	Descripción
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.

Actualización de 0.5 a 0.6

• Versión - 0.6.0
• Milestone

@stylify/stylify

Compilador

• Se ha eliminado return this de los métodos configure y `addMacro
• Las variables CSS están ahora habilitadas por defecto y todas las variables se exportan ahora como variables CSS. Además, cuando se utiliza dentro de un valor de propiedad como $someVariable se convierte en var(--someVariable).
• Se ha cambiado el nombre de replaceVariablesByCssVariables a cssVariablesEnabled. La opción cssVariablesEnabled acepta un valor booleano que desactiva las variables CSS si es igual a false.
• selectorAreas ahora sólo acepta expresiones regulares. No cadenas que son expresiones regulares.

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

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

Macros

• El objeto this dentro de la macro callback ahora contiene la instancia del Compilador. Si necesita acceder a la instancia del compilador que contiene variables, ayudantes y otras propiedades, no puede utilizar la función de flecha para acceder al objeto this.
• En lugar de selectorProperties.add() devuelve un objeto con properties: values.
• El método getCapture() de Matches ahora devuelve undefined como valor por defecto si no se encuentra la captura en lugar de una cadena vacía. Esto mejora la comparación para match.getCapture(0) ?? algo.
• Se ha eliminado el método 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'
       }
    }
  }
}

Componentes

• El objeto this dentro de la llamada de retorno del componente contiene ahora la instancia del compilador.
• La definición del componente ahora recibe RegExpMatch en lugar de un array de coincidencias. En lugar de matches[0] utilice getCapture(0). Los índices de las coincidencias son ahora más pequeños en 1: el fullMatch es la coincidencia reg exp completa, y las capturas contienen sólo capturas adicionales:
  • matches[0] => match.fullMatch.
  • matches[1] es ahora 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)}`
     }
  }
}

Ayudantes

• El objeto this dentro del callback del helper ahora contiene la instancia del Compilador

Configurador

• Se han eliminado todos los métodos excepto getExistingConfigFiles. Este método devuelve las rutas a los archivos de configuración existentes.

Ganchos del compilador

• compiler:newMacroMatch: Ahora recibe Record<string, string> en lugar de la clase SelectorProperties para las propiedades del selector

// 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}) => {
	// Accede al valor como propiedad de un objeto
	const value = selectorProperties['font-size'];

	// Asignar valor como una propiedad objeto
	selectorProperties['custom-property'] = 'value';
});

@stylify/bundler

• cssVarsDirPath, sassVarsDirPath, lessVarsDirPath, stylusVarsDirPath fueron renombrados a cssVarsExportPath, sassVarsExportPath, lessVarsExportPath, stylusVarsExportPath. Acepta la ruta directa del archivo (como ./ruta/a/vars.css) en el que se guardará, o sólo una ruta directa ./ruta/a/cssDir. Si no se proporciona un nombre de archivo, se utilizará el nombre de archivo stylify-variables con el sufijo correcto.

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

• Mangling está ahora desactivado por defecto
• Esto es debido a la fiabilidad y para evitar confusiones como “¿Qué acaba de pasar con mis selectores?” (aunque, es una característica, no un error)
• El algoritmo de manipulación ahora manipula los selectores directamente en el código fuente. Esto es debido a que la manipulación dentro de los archivos, que son compilados por el framework y pasados a vite/webpack/rollup no es fiable y por lo tanto este soporte fue eliminado.
• Si desea habilitar el mangling, establezca la opción del compilador mangling a true. Los selectores sólo se modificarán cuando ejecute el comando build. No durante el modo watch.
• El comando de compilación a menudo se ejecuta sólo dentro de GitHub Actions, Gitlab Pipelines, o similares, por lo que los selectores serán modificados dentro de la compilación de producción y no en el entorno local.
• Si necesitas probar la compilación en tu entorno local, guarda o confirma tus cambios, ejecuta el comando de compilación y luego revierte los cambios.

// 0.6
const compilerConfig = {
  compilador: {
   // Esto sólo tendrá efecto, cuando el bundler no esté en modo watch
   mangleSelectors: true
  }
}

También es posible que desee desactivar el mangling por completo para el entorno local, por lo que no tiene que revertir los cambios causados por Stylify cada vez que se ejecuta la construcción. Esto se puede resolver fácilmente mediante el uso de variables de entorno (más información se puede encontrar aquí):

const config = {
	compiler: {
		// Mangle selectores sólo si la variable de entorno para mangling se establece
		// El nombre de la variable depende de usted
		mangleSelectors: typeof process.env.STYLIFY_MANGLE_SELECTORS !== 'undefined'
	}
}

@stylify/unplugin

• La opción de configuración transformIncludeFilter ha sido eliminada porque ya no es necesaria