Shahar Kazaz shaharkazaz

Open source maintainer, Front-End enthusiastic.

shaharkazaz / variabless-css-usage.css

Created July 29, 2021 11:59

shaharkazaz / variabless-3rd-party.ts

Created July 29, 2021 11:56

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

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

shaharkazaz / variabless-import-theme.css

Created July 29, 2021 11:50

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

shaharkazaz / variabless-font-configuration-2.ts

Created July 29, 2021 09:51

	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 / variabless-font-configuration.ts

Last active July 29, 2021 09:52

shaharkazaz / variabless-webpack.config.js

Last active July 29, 2021 11:49

Variabless webpack plugin

	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 / theme.ts

Last active April 15, 2021 18:23

Variabless definitions file

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

shaharkazaz / en.json

Created July 17, 2020 06:58

Transloco functional transpiler syntax escaping a comma

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

shaharkazaz / en.json

Created July 17, 2020 06:56

Transloco functional translation syntax example

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

shaharkazaz / transloco-root.module.ts

Created July 17, 2020 06:55

Adding the Transloco transpiler function

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

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