Stylify Releases

Stylify releases, changelog and how to update from one version to another.

Actual versions

Project	Status	Description
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.

Upgrading from 0.5 to 0.6

• Release - 0.6.0
• Milestone

@stylify/stylify

Compiler

• return this was removed from configure and addMacro method
• CSS variables are now enabled by default and all variables are now exported as CSS variables. Also when used within a property value as $someVariable it is converted to var(--someVariable).
• replaceVariablesByCssVariables was renamed to cssVariablesEnabled. The cssVariablesEnabled option accepts a boolean value that disables CSS variables if is equal to false.
• selectorAreas now accept only regular expressions. Not strings that are regular expressions.

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

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

Macros

• The this object within the macro callback now contains the Compiler instance. If you need to access the Compiler instance that contains variables, helpers and other properties, you cannot use the arrow function to access the this object.
• Instead of selectorProperties.add() return an object with properties: values
• Matches getCapture() method now returns undefined for a default value if capture was not found instead of empty string. This improves comparison for match.getCapture(0) ?? something
• hasCapture method has been removed

// 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'
      }
   }
 }
}

Components

• The this object within the component callback now contains the Compiler instance.
• Component definition now receives RegExpMatch instead of an array of matches. Instead of matches[0] use getCapture(0). Matches indexes are now smaller by 1: the fullMatch is the whole reg exp match, and captures contain only additional captures:
  • matches[0] => match.fullMatch
  • matches[1] is now 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)}`
     }
  }
}

Helpers

• The this object within the helper callback now contains the Compiler instance

Configurator

• All methods except getExistingConfigFiles were removed. This method returns paths to existing config files.

Compiler hooks

• compiler:newMacroMatch: Now receives Record<string, string> instead of SelectorProperties class for selector properties

// 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}) => {
	// Access value as an object property
	const value = selectorProperties['font-size'];

	// Assign value as an objet property
	selectorProperties['custom-property'] = 'value';
});

@stylify/bundler

• cssVarsDirPath, sassVarsDirPath, lessVarsDirPath, stylusVarsDirPath were renamed to cssVarsExportPath, sassVarsExportPath, lessVarsExportPath, stylusVarsExportPath. It accepts direct file path (like ./path/to/vars.css) to which it will be saved, or only a directoy path ./path/to/cssDir. If no file name is provided, the stylify-variables file name will be used with correct suffix.

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

• Mangling is now turned off by default
• This is because of reliability and to prevent confusion like “What just happened to my selectors” (even though, it’s a feature, not a bug)
• The mangling algorithm now mangles selectors directly in the source code. It is because mangling it within files, that are compiled by the framework and passed to vite/webpack/rollup is not reliable and therefore this support was dropped
• If you want to enable mangling, set the mangling compiler option to true. Selectors will be then mangled only, when you run build command. Not during watch mode.
• The build command is often run only within GitHub Actions, Gitlab Pipelines, or such, so the selectors will be mangled within the production build and not in the local environment.
• If you need to test the build in your local environment, stash or commit your changes, run the build command, and then revert changes.

// 0.6
const compilerConfig = {
  compiler: {
   // This will have effect only, when the bundler is not within a watch mode
   mangleSelectors: true
  }
}

You might also want to disable the mangling entirely for the local environment, so you don’t have to revert changes caused by Stylify each time you run build. This can be easily solved by using environment variable (more info can be found here):

const config = {
	compiler: {
		// Mangle selectors only if environment variable for mangling is set
		// The name of the variable is up to you
		mangleSelectors: typeof process.env.STYLIFY_MANGLE_SELECTORS !== 'undefined'
	}
}

@stylify/unplugin

• transformIncludeFilter configuration option has been removed because it is not needed anymore