sass-site/source/helpers/sass_helpers.ts

72 lines
2.0 KiB
TypeScript
Raw Normal View History

import sass from 'sass';
export function generateCodeExample(contents: string, autogenCSS: boolean, syntax: string) {
const splitContents = contents.split('===');
const scssContents = splitContents[0];
const sassContents = splitContents[1];
const cssContents = splitContents[2];
const scssExamples = scssContents.split('---');
const sassExamples = sassContents.split('---');
let cssExample: string;
if (cssContents) {
cssExample = cssContents;
} else {
// TODO check first if you even have scss or sass to generate css from
// TODO what if no scss but sass?
cssExample = '';
scssExamples.forEach((scssSnippet) => {
const generatedCSS = sass.compileString(scssSnippet);
cssExample += generatedCSS.css;
});
}
return {
scss: scssExamples,
css: cssExample,
sass: sassExamples,
canSplit: canSplit(scssExamples, sassExamples, cssExample),
splitLocation: '50.0%', // TODO remove when css grid implementation done
};
}
2023-02-26 02:07:51 +01:00
export function getImplStatus(status: string | boolean | null) {
2023-02-25 13:44:14 +01:00
switch (status) {
case null:
return status;
case true:
return '✓';
case false:
return '✗';
case 'partial':
return 'partial';
default:
return `since ${status}`;
}
}
export function canSplit(
scssExamples: string[],
sassExamples: string[],
cssExample: string,
) {
const exampleSources: [string[], string[]] = [scssExamples, sassExamples];
const exampleSourceLengths = exampleSources
.map((sourceList) =>
sourceList.map((source) =>
source.split('\n').map((line) => line.length),
),
)
.flat()
.flat();
const cssSourceLengths = cssExample.split('\n').map((line) => line.length);
const maxSourceWidth = Math.max(...exampleSourceLengths);
const maxCSSWidth = Math.max(...cssSourceLengths)
//TODO css example doesn't include comments so extend inheritance example can split is wrong
return Boolean((maxSourceWidth + maxCSSWidth) < 110);
}