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

Upgrading from 0.4 to 0.5

• Release: v0.5.0

@stylify/stylify

• Macros callbacks now accepts an object with arguments instead of a chain of arguments. The this object is no longer modified.

// v0.4.0
const macros = {
    'macro': (macroMatch, selectorProperties) => { const { helpers, variables, dev } = this;}
};

// v0.5.0
const macros = {
    'macro':({ macroMatch, selectorProperties, helpers, variables, dev }) => {}
};

• The rewrite selectors method now optionaly accepts an object of arguments instead of 2 arguments

// If options passed to rewrite selectors are string, then only one argument is expected
compiler.rewriteSelectors(code)

// If two or more are passed, it needs to be an object
compiler.rewriteSelectors({
    content: '',
    // Optional
    rewriteOnlyInSelectorsAreas: true,
    matchSelectorsWithPrefix: false
})

• The argument rewriteInAreas in rewriteSelectors method was renamed to rewriteInSelectorsAreas.
• Rename plainSelectors in config and in the content options to customSelectors
• Each customSelector and component now accepts only a string as value.
• Custom selectors can be now generated directly from template. See docs.
• In case you used a selectors chain for components, rewrite it to the new SCSS-like syntax.

// v0.4.0
const components = {
    'btn--big': {
        selectors: 'color:blue',
        selectorsChain: 'btn'
    }
};

// v0.5.0
const components = {
    'btn--big': `
        &.btn { color:blue }
    `
};

• Hooks are now used like below. Check out Stylify hooks.

import { hooks } from '@stylify/stylify';

hooks.addListener('', (options) => {});

• For Runtime

const runtime = new Runtime();
runtime.hooks.addListener('', (options) => {});

@stylify/bundler

• Bundler hooks are now used like below. Bundler hooks extends the default Stylify CSS hooks. Check out Bundler hooks.

import { hooks } from '@stylify/bundler';

hooks.addListener('', (options) => {});

• Now only the await bundler.waitOnBundlesProcessed() can be used to wait for bundler to finish bundling. The await bundler.bundle() is not neccessary.

@stylify/bundler

• Unplugin exports are now stylifyVite, stylifyRollup, stylifyWebpack, stylifyEsbuild

Upgrading from 0.3 to 0.4

• Release: v0.4.0
• Use only one underscore _ (for a space character) => border:1px_solid_blue
• Integration was renamed from stylifyIntegration to stylify.
• No empty object nor configuration have to be passed in the integration initialization

Upgrading from 0.2 to 0.3

• Release: v0.3.0
• You can remove selectorsAreas for React, Vue, Angular, Nette, Lit and Alpine from configuration. They are now by default in the compiler config.
• Move everything from extend object to the root:

const config = {
    // All configuration options from extend object below move here.
    // The compiler is just example.
    compiler: {},
    // Extend keyword was removed
    extend: {
        compiler: {}
    }
}

• Stylify CSS Runtime now has only Stylify.configure() method. Stylify.runtime.configure() was removed.

Upgrading from 0.1 to 0.2

• Release: v0.2.1
• Profile have been removed
• Autoprefixer is not neccessary to be included within your bundler config. It is now by default in bundler.
• Selecotors can now start only by alphanumeric character.