shaharkazaz

.some-class {
  font-size: var(--text12);
}

shaharkazaz

import { coreStyles } from '/some/path/variabless';

Highcharts.setOptions({
    colors: Object.values(coreStyles.lightTheme.value)
});

shaharkazaz

@import 'assets/styles/theme.css';

shaharkazaz

const fontSizes = [10, 12, 14 , ...];
const coreStyles = {
  fontSize: {
    variableName: 'text:valueKey',
    properties: [{
      prop: 'font-size',
      selector: '.text:valueKey'
    }],
    value: fontSizes.reduce((acc, size) => {
      acc[size] = `${size / 16}rem`;

shaharkazaz

const coreStyles = {
  fontSize: {
    variableName: 'text:valueKey',
    properties: [{
      prop: 'font-size',
      selector: '.text:valueKey'
    }],
    value: {
      10: '0.625rem',  
      12: '0.75rem',

shaharkazaz

const { VariablessWebpackPlugin } = require('variabless/webpack-plugin');

module.exports = {
  plugins: [
    new VariablessWebpackPlugin({
        watch?: boolean, // listen to changes
        srcPath: 'src/variabless.ts', // the variables rules file
        outputPath: 'src/assets/styles/theme.css', // generated css file path
    }),
  ]

shaharkazaz

export const coreStyles: Record<string, Rule> = {
  myVariable: {
    value: string | object,
    variableName?: string | Resolver,
    appendVariablesTo?: string,
    properties?: PropertyConfig[],
  },
  ...
};

shaharkazaz

{
  "title": "[[ someFunc(Hello {{user}}\\, welcome ,...) ]]",
}

shaharkazaz

{
  "title": "[[ hasFeatureFlag(newDashboards, has flag, missing flag) ]]",
}

shaharkazaz

import { FunctionalTranspiler, TRANSLOCO_TRANSPILER } from '@ngneat/transloco';
import { FeatureFlagResolver } from './has-feature-flag';

@NgModule({
  ...
  providers: [{
    provide: TRANSLOCO_TRANSPILER,
    useClass: FunctionalTranspiler
  },
  {