Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: scan for component default scss vars #1172

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

docs: scan for component default scss vars #1172

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb92983
testing
whiplashwebb Jan 31, 2025
99202a8
revert back to latest theme bulma
whiplashwebb Jan 31, 2025
8bb1f5d
cleanup
whiplashwebb Jan 31, 2025
e2bc987
revert lock
whiplashwebb Jan 31, 2025
a8624ec
remove uneccisary type
whiplashwebb Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 50 additions & 13 deletions packages/docs/src/templates/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,20 @@ import * as fs from "fs";
import { type SafeDocgenCLIConfig } from "vue-docgen-cli/lib/config";
import { getThemePath, Themes, type ThemeConfig } from "../themes-helper";

export const docsRegex = "/* @docs */";

export function getVariablesFromContent(content: string) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to export this function and de docsRegex?

const docs = content.substring(
content.indexOf(docsRegex) + docsRegex.length,
content.lastIndexOf(docsRegex),
);

return docs
.replace(/(\r\n|\n|\r)/gm, "")
.split(";")
.filter((d) => !!d);
}

export function renderer(config: SafeDocgenCLIConfig, name: string): string {
const renderThemeVariables = (theme: ThemeConfig): string => {
const noStyle = `<p>The theme does not have any custom variables for this component.</p>`;
Expand All @@ -11,23 +25,46 @@ export function renderer(config: SafeDocgenCLIConfig, name: string): string {
config.cwd,
`/scss/components/${name}`,
);
if (!componentPath) return noStyle;
const componentDefaultsPath = getThemePath(
theme,
config.cwd,
`/scss/component-defaults/${name}`,
);

const cssFile = path.resolve(config.cwd, componentPath);
const content = fs.readFileSync(cssFile, "utf8");
const docsRegex = "/* @docs */";
if (!componentPath && !componentDefaultsPath) return noStyle;

if (!content.includes(docsRegex)) return noStyle;
let cssContent = "";
let defaultsContent = "";

const docs = content.substring(
content.indexOf(docsRegex) + docsRegex.length,
content.lastIndexOf(docsRegex),
);
try {
const cssFile = path.resolve(config.cwd, componentPath);
cssContent = fs.readFileSync(cssFile, "utf8");
} catch (e) {
// Log errors but allow the process to continue. We expect every component to have a scss file, but docs should render even if none is found
console.error(e);
}

try {
const defaultsFile = path.resolve(
config.cwd,
componentDefaultsPath,
);
defaultsContent = fs.readFileSync(defaultsFile, "utf8");
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (e) {
// Swallow error and move on. We expect some components will not have defaults.
}

if (
!cssContent.includes(docsRegex) &&
!defaultsContent.includes(docsRegex)
)
return noStyle;

const variables = docs
.replace(/(\r\n|\n|\r)/gm, "")
.split(";")
.filter((d) => !!d);
const variables = [
...getVariablesFromContent(cssContent),
...getVariablesFromContent(defaultsContent),
];

return `
| SASS Variable | Default |
Expand Down
Loading