2023-03-06 12:59:38 +01:00
|
|
|
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}`;
|
|
|
|
}
|
|
|
|
}
|
2023-03-06 12:59:38 +01:00
|
|
|
|
|
|
|
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);
|
|
|
|
}
|