v0.6

What's Changed

• Regular expressions array for selectors areas by @Machy8 in #242
• Configurator cleanup by @Machy8 in #243

@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 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 the false value is passed as value.
• selectorsAreas now expect regular expressions instead of strings

// 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
• 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 macroMatch.getCapture(0) ??
• 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 shorter 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+)'(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 object

@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.