Stylify Releases

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

Actual versions

ProjectStatusDescription
astroastro-statusIntegration for Astro.build
bundlerbundler-statusA flexible CSS bundler.
nuxtnuxt-statusModule for Nuxt.js Framework v3+.
nuxt-modulenuxt-module-statusModule for Nuxt.js Framework v2 < v3.
stylifystylify-statusCore package. Generates CSS and minifies selectors.
unpluginunplugin-statusUniversal plugin for Vite, Webpack, Rollup and Esbuildn.

Upgrading from 0.4 to 0.5

@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 }
    `
};
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 bellow. Bundler hooks extends the default Stylify CSS hooks. Checkout 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 bellow 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.