Compiler

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

const content = '<div class="color:blue"></div>';

const compiler = new Compiler(nativePreset.compiler);
const compilationResult = compiler.compile(content);

const css = compilationResult.generateCss();
// If the third parameter is set and if it is true (default) it rewrites selectors
// only in areas defined in selectorsAreas and not in whole content
const mangledContent = compiler.rewriteSelectors(content, compilationResult, true);

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

// ---When adding config to native preset
// Example for macros and components when configuring native preset
nativePreset.compiler.variables = {
    blue: 'steelblue'
};
nativePreset.compiler.macros = {
    myMacro: ''
};
// ...

// --- When using custom config
const compiler = new Compiler({
    macros: {},
    variables: {},
    // ...
});

// --- You can also extend the configuration directly on instance
compiler.configure({ /* ... */})

Stylify.runtime.configure({
    compiler: {
        // ...
    }
});

<screens and pseudo classes>:?<customSelector>

<screens and pseudo classes>:?<property>:<value>

color:red
hover:color:red
sm:hover:color:red

border:1px__solid__red => border:1px solid red
width:calc(100%__-__8px) => width:calc(100% - 8px)

font-family:^Open__Sans^ => font-family:'Open Sans'
content:^Some__long__content^ => content:'Some long content'

sm&&dark:color:red
minw740px||landscape:color:blue

const compilerConfig = {
    dev: true
};

const compilerConfig = {
    macros: {
        'color:(\\S+?)': function (macroMatch, cssProperties): void {
            // color:blue => will create => color: blue
            // You can also use addMultiple({})
            cssProperties.add('color', macroMatch.getCapture(0));
        },
    },
};

<span class="color:red"></span>
<div class="color:#000"></span>
<div class="color:rgb(255,__255,__255)"></span>

const compilerConfig = {
    variables: {
        blue: '#01befe',
        shadow: '0 8px 32px -8px rgb(0, 0, 0, 0.2)'
    },
    // By default variables are replaced by their value. If this option is enabled, they
    // are replaced by var(--variableName) and can be more dynamic.
    // This is great for example for switching between light and dark mode.
    replaceVariablesByCssVariables: false,
    // By default, variables are automatically injected into the generated CSS as CSS variables.
    // You can change this behavior by setting the option bellow to false
    injectVariablesIntoCss: true
};

<span class="color:$blue"></span>

const compilerConfig = {
    screens: {
        'sm': '(min-width: 400px)',
        // Screens can also be functions
        // That allows you to make as flexible screen as possible
        'minw\\w+': (screen) => `(min-width: ${screen.replace('minw', '')})`
    }
};

<span class="sm:color:darkred"></span>
<div class="minw640px:color:$blue"></span>
<div class="minw80rem:color:darkgreen"></span>

const compilerConfig = {
    components: {
        // selector => dependencies
        'button': 'padding:4px background:black color:white hover:background:grey',
        'container': `
            max-width:1024px
            margin:0__auto
            md:max-width:1280px
        `,
        // You can define multiple components in one key, just separate them by "," (comma)
        'wrapper, footer': 'padding:24px',
        // When one component is defined multiple times, the selectors are merged
        // When selectorsChain is defined the last one is applied
        'wrapper': 'margin-top:24px',
        // When you are creating a component modifier you should add the selectorsChain
        // to increase the CSS specificity
        'button--big': {
            selectors: 'font-size:48px',
            selectorsChain: 'button'
        }
    }
};

const compiler = new Compiler(/* ... */);

compiler.addComponent('button', '...');

<span class="button"></span>
<div class="container"></div>

const compilerConfig = {
    plainSelectors: {
        // selector => dependencies
        'article': 'font-size:16px line-height:28px color:#222',
        'article h1, article h2': 'color:blue',
    }
};

<article></article>

const compilerConfig = {
    plainSelectors: {
        // First without the pseudo class
        'article a': 'color:green',
        // Then with the pseudo class
        'article a:hover': 'color:blue'
        'article a:hover i': 'color:white'
    }
};

const compilerConfig = {
    plainSelectors: {
        'a': 'color:green hover:color:blue',
        'a.link': 'color:green hover:color:red'
    }
};

const compilerConfig = {
    helpers: {
        shortcut(value) {
            const shortcuts = {
                'bgc': 'background-color',
                'zi': 'z-index'
            };

            return value in shortcuts ? shortcuts[value] : value;
        }
    },
    macros: {
        '(bgc|zi):(\\S+?)': function (macroMatch, cssProperties) {
            const property = this.helpers.shortcut(macroMatch.getCapture(0));
            macroMatch.add(property, cssProperties.getCapture(1));
        }
    }
}

<div class="zi:2 bgc:red"></div>

const compilerConfig = {
    selectorsAreas: [
        // Vue.js
        '(?:^|\\s+)(?:v-bind)?:class="([^"]+)"',
        // React
        '(?:^|\\s+)className="([^"]+)"', '(?:^|\\s+)className=\\{`((?:.|\n)+?)`\\}',
        // Angular
        '(?:^|\\s+)[className]="([^"]+)"', '(?:^|\\s+)[ngClass]="{((?:.|\n)+?)}"',
        // Nette framework
        '(?:^|\\s+)n:class="([^"]+)"'
        // ...
    ]
};

const compilerConfig = {
    ignoredAreas: [
        /<myElement[\s]*?>([\s\S]*?)<\/myElement>/,
    ]
};

<!-- <stylify-ignore> -->
Everything between these tags will be ignored
<div class="color:red"></div>
<!-- </stylify-ignore> -->

const compilerConfig = {
    pregenerate: 'color:red color:blue width:100%'
};

@stylify-<option> ...data /@stylify-<option>

// Components expects a valid javascript object as value
@stylify-components
    button: `font-size:24px padding:4px`,
    'button--big': {
        selectors: 'font-size:48px',
        selectorsChain: 'button'
    }
/@stylify-components

// Variables expects a valid javascript object as value
@stylify-variables
    blue: `#01befe`
/@stylify-variables

// Plain selectors expects a valid javascript object as value
@stylify-plainSelectors
    article: `font-size:24px`
/@stylify-plainSelectors

// Pregenerate expects a string
@stylify-pregenerate
    border-top:1px__solid__#444
/@stylify-pregenerate

const compilerConfig = {
    contentOptionsProcessors: {
        // Content options is an object of already matched options.
        // OptionMatch value is the matched value of your option
        // @stylify-myOption optionMatchValue /@stylify-myOption
        myOption: (contentOptions, optionMatchValue) => {
            // Process the option value ...

            contentOptions.myOptionData = optionMatchValue;
            // You must return the contentOptions object
            return contentOptions;
        }
    };
}

const compilerConfig = {
    onPrepareCompilationResult: (compilationResult) {
        console.log(compilationResult);
    };
}

const compilerConfig = {
    onNewMacroMatch: (macroMatch, selectorProperties) {
        console.log(macroMatch);
        console.log(selectorProperties);
    }
}

const compilationResult = new CompilationResult({
    // All options are optional
    dev: false,
    // If reconfigurable is set to false, the configuration will not change
    reconfigurable: false,
    // This function is responsible for sorting screens before the CSS is generated.
    // The argument is a Map type and the function must also return a Map type.
    screensSortingFunction: (screensList) => { return screensList },
    // If mangle selectors is true, selectors within the CSS will be manhled
    mangleSelectors: false,
    // A hook, that is called when a new CssRecord is created
    onPrepareCssRecord: (cssRecord) => { console.log(cssRecord) }
});

const compilationResult = new CompilationResult({
    onPrepareCssRecord: (cssRecord) => {
        // This hook passes property and a its value as arguments.
        // The function must return an null, nothing or an object its structure is the following
        // { property: value, anotherProperty: value}
        cssRecord.onAddProperty = (property, value) => {
            console.log(property, value);

            // Return is optional
            return { [property]: value };
        };
        // This hook receives actual cssRecord as argument
        cssRecord.onAfterGenerate = (cssRecord) => {
            console.log(cssRecord);
        }
    }
});