Native Preset

Native preset is a prepared configuration for Stylify that consist of predefined macro, screens and helpers. The code behind the NativePreset can be found in the @stylify/stylify repository.

Usage

import { Compiler, nativePreset } from '@stylify/stylify';

// Optional, if you want to extend the configuration
nativePreset.compiler.macros['customMacro'] = function (macroMatch, selectorProperties) {
    // ...
};
nativePrest.compiler.variables = {
    customVariable: 123
};

const compiler = new Compiler(nativePreset.compiler);

// Usage example
const content = '';
const compilationResult = compiler.compile(content);
const css = compilationResult.generateCss();
const mangledContent = compiler.rewriteSelectors(content, compilationResult);

Inside the preset

Predefined macro

This macro allows you to use 678 CSS properties available in Chrome, Safari, Mozila, Opera and Edge. Just instead of spaces use __ (two underscores) and instead of quotes ^ (hat). This allows you to write selectors like border:1px__solid__blue or font-family:^Open__Sans^ (see syntax).

List of all available selectors can be found in the @stylify/stylify repository

Screens

There are static screens like tosm, sm, md, ... you may know from some CSS frameworks like Bootstrap or Tailwind. These screens are predefined according to most used screens in 2021.

Then there are are dynamic screens like minw, maxw, rng, ... that generates media queries based on the value you choose when using them. The values and units you use are up to you.

Dont forget that screens can be combined using logical operands && (and) and || (or) like maxw320px&&maxh667px:color:blue.

Helpers

Native preset ships with a few helpers that can simplify the development process. When passing an argument that contains ,, you must add quotes to that argument using ^ (^ is replaced by quote, see syntax page.

When passing an argument into the helper, you can use variables like $myVariable.

Lighten color

This helper expects a color in a hex or rgb format and and makes the color lighter. The color is returned in a hex format.

color:lighten($myColor,10)
color:lighten(#222,10)
color:lighten(^rgb(0,0,0)^,10)

Darken color

This helper expects a color in a hex or rgb format and and makes the color darker. The color is returned in a hex format.

color:darken(#eee,10)
color:darken(^rgb(255,255,255)^,10)

Color to rgb

This helper expects a color in a hex or rgb format. It returns in the rgb format. If alpha canal is passed as second argument, it returns the rgba format.

color:colorToRgb(#000) => is converted into rgba(0, 0, 0);
color:colorToRgb(#000,0.1) => is converted into rgba(0, 0, 0, 0.1)
color:colorToRgb(^rgb(0,0,0)^,0.1) => is converted into rgba(0, 0, 0, 0.1)