What's Changed

• Fixes4 by @Machy8 in https://github.com/stylify/packages/pull/173

Full Changelog: https://github.com/stylify/packages/compare/v0.5.16...v0.5.17

Bugfixes + Typehint fixes

Full Changelog: https://github.com/stylify/packages/compare/v0.5.15...v0.5.16

External variables feature

When some external variables are defined (for example CSS variables) it makes no sense to define or import them into Stylify. Instead you can use mark them as external. More info in docs.

const stylifyConfig = {
 compiler: {
  externalVariables: [
     // Simple string check
     'test',
     // Flexible function check. Return true if matched. Otherwise return undefined or nothing.
     (variable) => {
       if (variable.startsWith('md-') return true;
     }
  ]
 }
}

Full Changelog: https://github.com/stylify/packages/compare/v0.5.14...v0.5.15

• Fixed watching for directories with special characters.
• Used chokidar for watching directories instead of fs.watch, because the watching system is simply a huge mess.

Full Changelog: https://github.com/stylify/packages/compare/v0.5.13...v0.5.14

• Fix: Bundler: Already normalized path should not be normalized again

Full Changelog: https://github.com/stylify/packages/compare/v0.5.12...v0.5.13

Features

Now you can define Dynamic Components.
With this feature, you can create components, that changes style based on matches from regular expression

For example:

title--large title--$red

const compilerConfig = {
    components: {
        // title--$red
        // title--#06f
        'title(?:--(\\S+))?': ({ matches, variables, helpers, dev }) => {
            const color = matches[1] ?? '#000';
            return `font-size:24px${color ? ` color:${color}` : ''}`;
        },
    }
}; 

What's Changed

• Dynamic components by @Machy8 in https://github.com/stylify/packages/pull/165

Full Changelog: https://github.com/stylify/packages/compare/v0.5.11...v0.5.12

Features

• Added screen and pseudo classes group md:{font-size:24px;margin-bottom:8px} lg:hover:{color:purple;scale:1.4}
• Utilities, that are not matched within a content are not generated even though they have been added within component or custom selector
• Removed unnecessary escaping of - and _ in generated CSS
• Characters aliases such as _ can be now escaped \_, so the _ is preserved: [.some\_\_selector]{color:blue} => this will not replace underscores

What's Changed

• Optimization tunning by @Machy8 in https://github.com/stylify/packages/pull/159
• Multiple properties can be wrapped into pseudo class or screen group by @Machy8 in https://github.com/stylify/packages/pull/160
• Aliases escaping by @Machy8 in https://github.com/stylify/packages/pull/164

Full Changelog: https://github.com/stylify/packages/compare/v0.5.10...v0.5.11

• Removed isRoot from bundler file when processed
  Full Changelog: https://github.com/stylify/packages/compare/v0.5.9...v0.5.10

• Bug fixes in Bundler watch task

Full Changelog: https://github.com/stylify/packages/compare/v0.5.8...v0.5.9

What's Changed

• Added bundler initialized hook. This allows you to get initialized Bundler from anywhere within the app.
• Fix bundler watch command by @Machy8 in https://github.com/stylify/packages/pull/157

Full Changelog: https://github.com/stylify/packages/compare/v0.5.7...v0.5.8

What's Changed

• Bundler can now watch newly added files, no restart is required
• Bundler can export CSS into CSS layers
• Fixed bug: Astro supports multiple files
• Unplugin can now be initialized without config or empty brackets
• Astro now doesn't mangle selectors in source files but in generated js
• Tunning9 by @Machy8 in https://github.com/stylify/packages/pull/156

Full Changelog: https://github.com/stylify/packages/compare/v0.5.6...v0.5.7

What's Changed

• Unplugin (any type) can now load config without empty configuration object: stylifyVite({}) => stylifyVite()

• Fixes3 by @Machy8 in https://github.com/stylify/packages/pull/154

Full Changelog: https://github.com/stylify/packages/compare/v0.5.5...v0.5.6

What's Changed

• Added how to contribute nodes by @Machy8 in https://github.com/stylify/packages/pull/149
• Replace multiple variables in one selector by @Machy8 in https://github.com/stylify/packages/pull/153

Full Changelog: https://github.com/stylify/packages/compare/v0.5.4...v0.5.5

• Bug fixes
• Unplugin now have a shared bundler called default
• Each plugin can then have an id. This will create it's own bundler and compiler for rewritting selectors.

What's Changed

• Fixes by @Machy8 in https://github.com/stylify/packages/pull/148
  Full Changelog: https://github.com/stylify/packages/compare/v0.5.3...v0.5.4

• Bugfixes
• Lerna publish remains for publishing. Yarn workspaces work somehow weirdly when publishing packages.

What's Changed

• Switch to yarn workspaces from lerna by @Machy8 in https://github.com/stylify/packages/pull/141
• Fix bug when incorrectly replaced white characters by a space by @Machy8 in https://github.com/stylify/packages/pull/142

Full Changelog: https://github.com/stylify/packages/compare/v0.5.2...v0.5.3

Bug fixes

Full Changelog: https://github.com/stylify/packages/compare/v0.5.1...v0.5.2

• Unplugin configuration can be overriden

Full Changelog: https://github.com/stylify/packages/compare/v0.5.0...v0.5.1

@stylify/stylify

• Plain Selectors renamed to Custom selectors
• Components and custom selectors now accepts only string instead of an array of strings and etc.
• Components and custom selectors can have nested selectors

const components = {
   'button': `
      cursor:pointer
      .icon { color:yellow }
      > {
      .icon, span { vertical-align:middle }
      }
  `
}

• Custom selectors can be generated directly from selector within the markup
• Stylify packages now use hookable system instead of properties and configurations
• Runtime now uses Hookable system, instead of dom custom event
• Rewrite selectors method now doesn't need compilation result because it uses the MinifiedSelectorsGenerator register.
• Macro functions now receive one object without changing this object:

'macro': ({ macroMatch, selectorProperties, helpers, variables, dev }) => {
  // ...
}

• The Rewrite Selectors method now accepts an object instead of two arguments or a string.

.rewriteSelectors({ content, rewriteOnlyInSelectorsAreas, matchSelectorsWithPrefix })

• The Rewrite Selectors method now accepts a new argument: matchSelectorsWithPrefix that causes to match element according to the given prefix during compilation => If matched selector had to be class, the prefix is . and is rewritten as .selector instead of selector.
• The Minified Selectors Generator now returns a character with prefix if defined.

@stylify/bundler

• When waiting on the Bundler to process, the await bundler.waitOnBundlesProcessed() can be called on its own. It now internally waits on the bundle() method to finish. The await bundler.bundle(). Can be removed if is used to wait on the Bundler before another step in the build.
• When generated or rewritten content is the same as in the file, that file is not overridden. This decreases the amount of "file saved" triggers during development. If the file doesn't exist, it is created.

@stylify/unplugin

• Transform method is triggered only when selectors are rewritten. Otherwise, it just returns code that was passed as argument
• When a new config is passed, the getBundler() method now waits on the previous bundler to finish and then creates a new bundler during development

What's Changed

• Tunning8 by @Machy8 in https://github.com/stylify/packages/pull/140

Full Changelog: https://github.com/stylify/packages/compare/v0.4.0...v0.5.0

@stylify/astro

• stylifyIntegration export renamed to stylify.
• There is no config nor empty object necessary when initializing the integration
• Selectors are now matched within class:list.

@stylify/stylify

• One underscore for a selector instead of two: _ => border:2px_solid_red.
• Helpers now works even when replaceVariablesByCssVariables is enabled.

What's Changed

• Tunning6 by @Machy8 in https://github.com/stylify/packages/pull/137
• Tunning7 by @Machy8 in https://github.com/stylify/packages/pull/138

Full Changelog: https://github.com/stylify/packages/compare/v0.3.0...v0.4.0

News and features

• Native preset is now by default in Compiler. No need to load it anymore
• Variables can be now added under classes

const compilerConfig = {
  variables: {
     '.dark': {
        bg: '#000'
     }
  }
}

• Helpers like lighten(#000,10) can now be used by default in selectors properties border:2px__solid__lighten(#000,10), color:lighten(#000, 10).
• Extend keyword removed. The configuration is now merged and not overridden by default.
• Selector areas for React, Vue, Angular, Nette, Lit and Alpine added directly into the compiler.
• Unplugin exports fixed
• Runtime now has only Stylify.configure() without runtime key.
• A few bugfixes - Runtime, Replacement of $ in ignored area

Packages

• Added @stylify/astro integration for AstroJS
• @stylify/autoprefixer discontinued

What's Changed

• Tunning5 by @Machy8 in https://github.com/stylify/packages/pull/128
• Typo word Nittro by @chz in https://github.com/stylify/packages/pull/129
• Typo word nittro by @chz in https://github.com/stylify/packages/pull/130
• Astroplugin by @Machy8 in https://github.com/stylify/packages/pull/131
• Tunning6 by @Machy8 in https://github.com/stylify/packages/pull/132

New Contributors

• @chz made their first contribution in https://github.com/stylify/packages/pull/129

Full Changelog: https://github.com/stylify/packages/compare/v0.2.1...v0.3.0