bernova 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/README.md +1778 -0
- package/dist/bin/bernova.js +2 -0
- package/dist/bin/buildstyle.js +2 -0
- package/dist/bin/createConfigFile.js +2 -0
- package/dist/bin/declareCssType.js +1 -0
- package/dist/index.js +1 -0
- package/dist/src/app.js +1 -0
- package/dist/src/constants/compilerType.js +1 -0
- package/dist/src/constants/cssAdvancedSelectors.js +1 -0
- package/dist/src/constants/cssProps.js +1 -0
- package/dist/src/constants/cssPseudoClasses.js +1 -0
- package/dist/src/constants/cssPseudoElements.js +1 -0
- package/dist/src/constants/index.js +1 -0
- package/dist/src/constants/resetCss.js +1 -0
- package/dist/src/index.d.ts +31 -0
- package/dist/src/index.js +1 -0
- package/dist/src/lib/compileConfig.js +1 -0
- package/dist/src/lib/compileThemes.js +1 -0
- package/dist/src/lib/copyLocalFonts/copyLocalFonts.utils.js +1 -0
- package/dist/src/lib/copyLocalFonts/generateCssFonts.utils.js +1 -0
- package/dist/src/lib/extractDocFragment/extractDocFragment.utils.js +1 -0
- package/dist/src/lib/fileExists/fileExists.utils.js +1 -0
- package/dist/src/lib/generateBaseCss/generateBaseCss.utils.js +1 -0
- package/dist/src/lib/generateCss/generateCSS.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/advanceselector/advancedSelectorHandler.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/attribute/attributeHandler.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/classnames/formatClassName.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/classnames/handlerRegister.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/cssVars/generateVars.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/dynamicValues/dynamicValues.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/dynamicValues/processDynamic.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/filterGenerateCss.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/foreign/foreignHandler.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/generateCssStyles.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/index.js +1 -0
- package/dist/src/lib/generateCss/helpers/mediaqueries/generateMediaQueries.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/mediaqueries/mediaQueriesHandler.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/other/declareCssType.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/other/generateGlobalStyles.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/pseudo/pseudoHandler.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/rulename/formatRuleName.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/utils/extractValues.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/utils/formattedStatKey.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/utils/index.js +1 -0
- package/dist/src/lib/generateCss/helpers/utils/processCss.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/utils/separateStyles.utils.js +1 -0
- package/dist/src/lib/generateCss/helpers/utils/validatePreviouslyExists.utils.js +1 -0
- package/dist/src/lib/generateCssDoc/generateCssDoc.util.js +1 -0
- package/dist/src/lib/generateProvider/generateProvider.utils.js +1 -0
- package/dist/src/lib/generateProvider/template/providerTemplate.d.ts +60 -0
- package/dist/src/lib/generateProvider/template/providerTemplate.js +1 -0
- package/dist/src/lib/generateThemeRegister/generateThemeRegister.utils.js +1 -0
- package/dist/src/lib/generateTools/generateTools.utils.js +1 -0
- package/dist/src/lib/generateTypesTools/generateTypesTools.utils.js +1 -0
- package/dist/src/lib/handlerForeignThemes/handlerForeignThemes.utils.js +1 -0
- package/dist/src/lib/index.js +1 -0
- package/dist/src/lib/processMediaConfig/processMediaConfig.util.js +1 -0
- package/dist/src/lib/readFile/readFile.utils.js +1 -0
- package/dist/src/lib/simplifyName/simplifyName.utils.js +1 -0
- package/dist/src/lib/typingStyles/index.js +1 -0
- package/dist/src/lib/typingStyles/typingStyles.utils.js +1 -0
- package/dist/src/lib/writeDoc/writeDoc.utils.js +1 -0
- package/package.json +80 -0
- package/src/app.js +176 -0
- package/src/constants/__tests__/compilerType.test.js +20 -0
- package/src/constants/__tests__/cssAdvancedSelectors.test.js +38 -0
- package/src/constants/__tests__/cssProps.test.js +331 -0
- package/src/constants/__tests__/cssPseudoClasses.test.js +48 -0
- package/src/constants/compilerType.js +14 -0
- package/src/constants/cssAdvancedSelectors.js +32 -0
- package/src/constants/cssProps.js +325 -0
- package/src/constants/cssPseudoClasses.js +138 -0
- package/src/constants/cssPseudoElements.js +83 -0
- package/src/constants/index.js +15 -0
- package/src/constants/resetCss.js +171 -0
- package/src/index.d.ts +31 -0
- package/src/index.js +20 -0
- package/src/lib/compileConfig.js +59 -0
- package/src/lib/compileThemes.js +118 -0
- package/src/lib/copyLocalFonts/copyLocalFonts.utils.js +42 -0
- package/src/lib/copyLocalFonts/generateCssFonts.utils.js +56 -0
- package/src/lib/extractDocFragment/extractDocFragment.utils.js +25 -0
- package/src/lib/fileExists/fileExists.utils.js +31 -0
- package/src/lib/generateBaseCss/generateBaseCss.utils.js +51 -0
- package/src/lib/generateCss/generateCSS.utils.js +42 -0
- package/src/lib/generateCss/helpers/advanceselector/advancedSelectorHandler.utils.js +22 -0
- package/src/lib/generateCss/helpers/attribute/attributeHandler.utils.js +47 -0
- package/src/lib/generateCss/helpers/classnames/formatClassName.utils.js +28 -0
- package/src/lib/generateCss/helpers/classnames/handlerRegister.utils.js +124 -0
- package/src/lib/generateCss/helpers/cssVars/generateVars.utils.js +73 -0
- package/src/lib/generateCss/helpers/dynamicValues/dynamicValues.utils.js +72 -0
- package/src/lib/generateCss/helpers/dynamicValues/processDynamic.utils.js +10 -0
- package/src/lib/generateCss/helpers/filterGenerateCss.utils.js +73 -0
- package/src/lib/generateCss/helpers/foreign/foreignHandler.utils.js +85 -0
- package/src/lib/generateCss/helpers/generateCssStyles.utils.js +249 -0
- package/src/lib/generateCss/helpers/index.js +53 -0
- package/src/lib/generateCss/helpers/mediaqueries/generateMediaQueries.utils.js +9 -0
- package/src/lib/generateCss/helpers/mediaqueries/mediaQueriesHandler.utils.js +181 -0
- package/src/lib/generateCss/helpers/other/declareCssType.utils.js +120 -0
- package/src/lib/generateCss/helpers/other/generateGlobalStyles.utils.js +30 -0
- package/src/lib/generateCss/helpers/pseudo/pseudoHandler.utils.js +56 -0
- package/src/lib/generateCss/helpers/rulename/formatRuleName.utils.js +163 -0
- package/src/lib/generateCss/helpers/utils/extractValues.utils.js +44 -0
- package/src/lib/generateCss/helpers/utils/formattedStatKey.utils.js +43 -0
- package/src/lib/generateCss/helpers/utils/index.js +15 -0
- package/src/lib/generateCss/helpers/utils/processCss.utils.js +93 -0
- package/src/lib/generateCss/helpers/utils/separateStyles.utils.js +43 -0
- package/src/lib/generateCss/helpers/utils/validatePreviouslyExists.utils.js +61 -0
- package/src/lib/generateCssDoc/generateCssDoc.util.js +47 -0
- package/src/lib/generateProvider/generateProvider.utils.js +283 -0
- package/src/lib/generateProvider/template/providerTemplate.d.ts +60 -0
- package/src/lib/generateProvider/template/providerTemplate.js +160 -0
- package/src/lib/generateThemeRegister/generateThemeRegister.utils.js +136 -0
- package/src/lib/generateTools/generateTools.utils.js +181 -0
- package/src/lib/generateTypesTools/generateTypesTools.utils.js +59 -0
- package/src/lib/handlerForeignThemes/handlerForeignThemes.utils.js +96 -0
- package/src/lib/index.js +61 -0
- package/src/lib/processMediaConfig/processMediaConfig.util.js +32 -0
- package/src/lib/readFile/readFile.utils.js +110 -0
- package/src/lib/simplifyName/__tests__/simplifyName.utils.test.js +87 -0
- package/src/lib/simplifyName/simplifyName.utils.js +28 -0
- package/src/lib/typingStyles/index.js +3 -0
- package/src/lib/typingStyles/typingStyles.utils.js +144 -0
- package/src/lib/writeDoc/writeDoc.utils.js +30 -0
package/src/app.js
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
const path = require('path');
|
|
2
|
+
const {
|
|
3
|
+
generateBaseCss,
|
|
4
|
+
compileThemes,
|
|
5
|
+
generateCSS,
|
|
6
|
+
compileConfig,
|
|
7
|
+
writeDoc,
|
|
8
|
+
generateProvider,
|
|
9
|
+
processMediaConfig,
|
|
10
|
+
generateThemeRegister,
|
|
11
|
+
generateCssDoc,
|
|
12
|
+
handlerForeignThemes,
|
|
13
|
+
} = require('./lib');
|
|
14
|
+
const {
|
|
15
|
+
validatePreviouslyExists,
|
|
16
|
+
processCssWithPostcss,
|
|
17
|
+
} = require('./lib/generateCss/helpers');
|
|
18
|
+
const { compilerTypeValid } = require('./constants');
|
|
19
|
+
const {
|
|
20
|
+
generateTypesTools,
|
|
21
|
+
} = require('./lib/generateTypesTools/generateTypesTools.utils');
|
|
22
|
+
const { generateTools } = require('./lib/generateTools/generateTools.utils');
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Main function to compile Bernova styles based on configuration
|
|
26
|
+
* Processes themes, generates CSS, and creates necessary files for the styling system
|
|
27
|
+
*
|
|
28
|
+
* @param {string} compilerType - The type of compilation to perform:
|
|
29
|
+
* - 'foundationOnly': Generate only foundation styles (variables, base styles)
|
|
30
|
+
* - 'componentOnly': Generate only component/theme styles
|
|
31
|
+
* - 'full': Generate both foundation and component styles (default)
|
|
32
|
+
* @returns {Promise<void>} Resolves when all styles have been compiled and written
|
|
33
|
+
*/
|
|
34
|
+
async function bernovaStyles(compilerType) {
|
|
35
|
+
const dir = process.cwd();
|
|
36
|
+
const themeRegister = {};
|
|
37
|
+
const { default: ora } = await import('ora');
|
|
38
|
+
const spinner = ora('Starting BernovaStyled process...').start();
|
|
39
|
+
|
|
40
|
+
// Load and validate configuration from bernova.config.json
|
|
41
|
+
const { themes, provider } = await compileConfig({ dir });
|
|
42
|
+
|
|
43
|
+
// Process each theme configuration sequentially
|
|
44
|
+
for (const themeConfig of themes) {
|
|
45
|
+
const {
|
|
46
|
+
themeCss,
|
|
47
|
+
fonts,
|
|
48
|
+
resetCss,
|
|
49
|
+
bvTools,
|
|
50
|
+
name,
|
|
51
|
+
stylesPath,
|
|
52
|
+
typesTools,
|
|
53
|
+
foreignThemes,
|
|
54
|
+
prefix,
|
|
55
|
+
} = compileThemes({
|
|
56
|
+
themeConfig,
|
|
57
|
+
dir,
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
const baseCss = await generateBaseCss({ fonts, resetCss, stylesPath });
|
|
61
|
+
|
|
62
|
+
const { theme, media, ...withoutTheme } = themeCss;
|
|
63
|
+
const source = (() => {
|
|
64
|
+
switch (compilerType) {
|
|
65
|
+
case compilerTypeValid.foundationOnly:
|
|
66
|
+
return withoutTheme;
|
|
67
|
+
case compilerTypeValid.componentOnly:
|
|
68
|
+
return { theme, media };
|
|
69
|
+
default:
|
|
70
|
+
return themeCss;
|
|
71
|
+
}
|
|
72
|
+
})();
|
|
73
|
+
const { stylesCss, foundationsCss, stylesDocs, rootDocs, globalDocs } =
|
|
74
|
+
await generateCSS({
|
|
75
|
+
source,
|
|
76
|
+
baseCss,
|
|
77
|
+
compilerType,
|
|
78
|
+
prefix,
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
const stylesDir = stylesPath
|
|
82
|
+
? path.resolve(dir, stylesPath)
|
|
83
|
+
: path.resolve(dir, 'styles');
|
|
84
|
+
|
|
85
|
+
const { cssDir, cssMinifiedDir, oldData } = await validatePreviouslyExists({
|
|
86
|
+
stylesDir,
|
|
87
|
+
compilerType,
|
|
88
|
+
name,
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
const finalCss = generateCssDoc({
|
|
92
|
+
compilerType,
|
|
93
|
+
stylesCss,
|
|
94
|
+
foundationsCss,
|
|
95
|
+
oldData,
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
const cssContent = await processCssWithPostcss(finalCss, false, null);
|
|
99
|
+
const cssMinified = await processCssWithPostcss(finalCss, true, null);
|
|
100
|
+
|
|
101
|
+
// Write both regular and minified CSS files
|
|
102
|
+
spinner.start(`Writing CSS to file for theme: ${name}...`);
|
|
103
|
+
await writeDoc(cssDir, cssContent, 'css');
|
|
104
|
+
await writeDoc(cssMinifiedDir, cssMinified, 'css minified');
|
|
105
|
+
spinner.succeed(`CSS written to file for theme: ${name}.`);
|
|
106
|
+
|
|
107
|
+
spinner.start(`Compiling register for theme: ${name}...`);
|
|
108
|
+
// Register compilation is handled internally by theme processing
|
|
109
|
+
spinner.succeed(`Register compiled for theme: ${name}.`);
|
|
110
|
+
|
|
111
|
+
// Generate TypeScript type definitions if configured
|
|
112
|
+
spinner.start('Verifying types tools...');
|
|
113
|
+
if (typesTools) {
|
|
114
|
+
spinner.succeed(`Types tools verified for theme: ${name}.`);
|
|
115
|
+
await generateTypesTools({
|
|
116
|
+
dir,
|
|
117
|
+
typesTools,
|
|
118
|
+
mediaConfig: media,
|
|
119
|
+
stylesDocs,
|
|
120
|
+
});
|
|
121
|
+
} else {
|
|
122
|
+
spinner.succeed(`No types tools found for theme: ${name}.`);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const mediaDocs = processMediaConfig({ mediaConfig: media });
|
|
126
|
+
|
|
127
|
+
// Generate development tools if configured (bvTools)
|
|
128
|
+
spinner.start(`Processing bvTools for theme: ${name}...`);
|
|
129
|
+
if (bvTools) {
|
|
130
|
+
spinner.succeed(`bvTools found for theme: ${name}.`);
|
|
131
|
+
await generateTools({
|
|
132
|
+
bvTools,
|
|
133
|
+
compilerType,
|
|
134
|
+
name,
|
|
135
|
+
dir,
|
|
136
|
+
stylesDir,
|
|
137
|
+
stylesDocs,
|
|
138
|
+
rootDocs,
|
|
139
|
+
globalDocs,
|
|
140
|
+
mediaDocs,
|
|
141
|
+
});
|
|
142
|
+
} else {
|
|
143
|
+
spinner.succeed(`No bvTools found for theme: ${name}.`);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
const { themeByPosition, variablesExtracted, classesExtracted } =
|
|
147
|
+
await handlerForeignThemes({ dir, foreignThemes });
|
|
148
|
+
|
|
149
|
+
themeRegister[name] = generateThemeRegister({
|
|
150
|
+
cssPath: path.resolve(dir, stylesDir, `${name}.css`),
|
|
151
|
+
rootDocs,
|
|
152
|
+
stylesDocs,
|
|
153
|
+
globalDocs,
|
|
154
|
+
mediaDocs,
|
|
155
|
+
foreignStyles: classesExtracted,
|
|
156
|
+
foreignVars: variablesExtracted,
|
|
157
|
+
foreignBeforeFiles: themeByPosition.before,
|
|
158
|
+
foreignAfterFiles: themeByPosition.after,
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// Generate React/framework provider if configured
|
|
163
|
+
if (provider) {
|
|
164
|
+
spinner.start('Provider configuration found, generating tools...');
|
|
165
|
+
await generateProvider({
|
|
166
|
+
dir: path.resolve(dir, provider.path),
|
|
167
|
+
providerDocs: themeRegister,
|
|
168
|
+
declarationHelp: provider.declarationHelp,
|
|
169
|
+
providerName: provider.name,
|
|
170
|
+
compilerType,
|
|
171
|
+
});
|
|
172
|
+
spinner.succeed('Provider tools generated successfully.');
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
module.exports = { bernovaStyles };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import { compilerTypeValid } from '../compilerType.js';
|
|
3
|
+
|
|
4
|
+
describe('compilerTypeValid constants', () => {
|
|
5
|
+
it('should have all required compiler types', () => {
|
|
6
|
+
expect(compilerTypeValid).toHaveProperty('foundationOnly');
|
|
7
|
+
expect(compilerTypeValid).toHaveProperty('componentOnly');
|
|
8
|
+
expect(compilerTypeValid).toHaveProperty('full');
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
it('should have correct string values', () => {
|
|
12
|
+
expect(compilerTypeValid.foundationOnly).toBe('foundationOnly');
|
|
13
|
+
expect(compilerTypeValid.componentOnly).toBe('componentOnly');
|
|
14
|
+
expect(compilerTypeValid.full).toBe('full');
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
it('should be immutable object structure', () => {
|
|
18
|
+
expect(Object.keys(compilerTypeValid)).toHaveLength(3);
|
|
19
|
+
});
|
|
20
|
+
});
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import { cssAdvancedSelectors } from '../cssAdvancedSelectors.js';
|
|
3
|
+
|
|
4
|
+
describe('cssAdvancedSelectors constants', () => {
|
|
5
|
+
it('should have all required selector types', () => {
|
|
6
|
+
expect(cssAdvancedSelectors).toHaveProperty('adjacent');
|
|
7
|
+
expect(cssAdvancedSelectors).toHaveProperty('child');
|
|
8
|
+
expect(cssAdvancedSelectors).toHaveProperty('descendant');
|
|
9
|
+
expect(cssAdvancedSelectors).toHaveProperty('near');
|
|
10
|
+
expect(cssAdvancedSelectors).toHaveProperty('concat');
|
|
11
|
+
expect(cssAdvancedSelectors).toHaveProperty('column');
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
it('should have correct CSS combinator values', () => {
|
|
15
|
+
expect(cssAdvancedSelectors.adjacent).toBe(' + ');
|
|
16
|
+
expect(cssAdvancedSelectors.child).toBe(' > ');
|
|
17
|
+
expect(cssAdvancedSelectors.descendant).toBe(' ');
|
|
18
|
+
expect(cssAdvancedSelectors.near).toBe(' ~ ');
|
|
19
|
+
expect(cssAdvancedSelectors.concat).toBe('');
|
|
20
|
+
expect(cssAdvancedSelectors.column).toBe(' || ');
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('should be immutable object structure', () => {
|
|
24
|
+
expect(Object.keys(cssAdvancedSelectors)).toHaveLength(6);
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('should have proper spacing for combinators', () => {
|
|
28
|
+
// Adjacent and near should have spaces around operators
|
|
29
|
+
expect(cssAdvancedSelectors.adjacent).toMatch(/^\s\+\s$/);
|
|
30
|
+
expect(cssAdvancedSelectors.near).toMatch(/^\s~\s$/);
|
|
31
|
+
|
|
32
|
+
// Child should have spaces around operator
|
|
33
|
+
expect(cssAdvancedSelectors.child).toMatch(/^\s>\s$/);
|
|
34
|
+
|
|
35
|
+
// Descendant should be just a space
|
|
36
|
+
expect(cssAdvancedSelectors.descendant).toBe(' ');
|
|
37
|
+
});
|
|
38
|
+
});
|
|
@@ -0,0 +1,331 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import { cssProps } from '../cssProps.js';
|
|
3
|
+
|
|
4
|
+
describe('cssProps', () => {
|
|
5
|
+
it('should have the correct CSS properties', () => {
|
|
6
|
+
const expectedProps = {
|
|
7
|
+
// Scrollbar properties
|
|
8
|
+
scrollbar_width: 'scrollbar-width',
|
|
9
|
+
scrollbar_color: 'scrollbar-color',
|
|
10
|
+
scrollbar_gutter: 'scrollbar-gutter',
|
|
11
|
+
scroll_behavior: 'scroll-behavior',
|
|
12
|
+
scroll_margin: 'scroll-margin',
|
|
13
|
+
scroll_padding: 'scroll-padding',
|
|
14
|
+
scroll_snap_align: 'scroll-snap-align',
|
|
15
|
+
scroll_snap_stop: 'scroll-snap-stop',
|
|
16
|
+
scroll_snap_type: 'scroll-snap-type',
|
|
17
|
+
webkit_scrollbar: 'webkit-scrollbar',
|
|
18
|
+
scroll_container: 'scroll-container',
|
|
19
|
+
scrollbar_aria_role: 'scrollbar-aria-role',
|
|
20
|
+
|
|
21
|
+
// Background properties
|
|
22
|
+
background: 'background',
|
|
23
|
+
background_color: 'background-color',
|
|
24
|
+
background_image: 'background-image',
|
|
25
|
+
background_position: 'background-position',
|
|
26
|
+
background_repeat: 'background-repeat',
|
|
27
|
+
background_size: 'background-size',
|
|
28
|
+
background_attachment: 'background-attachment',
|
|
29
|
+
background_blend_mode: 'background-blend-mode',
|
|
30
|
+
background_clip: 'background-clip',
|
|
31
|
+
background_origin: 'background-origin',
|
|
32
|
+
|
|
33
|
+
// Border properties
|
|
34
|
+
border: 'border',
|
|
35
|
+
border_top: 'border-top',
|
|
36
|
+
border_right: 'border-right',
|
|
37
|
+
border_bottom: 'border-bottom',
|
|
38
|
+
border_left: 'border-left',
|
|
39
|
+
border_radius: 'border-radius',
|
|
40
|
+
border_width: 'border-width',
|
|
41
|
+
border_left_width: 'border-left-width',
|
|
42
|
+
border_right_width: 'border-right-width',
|
|
43
|
+
border_top_width: 'border-top-width',
|
|
44
|
+
border_bottom_width: 'border-bottom-width',
|
|
45
|
+
border_color: 'border-color',
|
|
46
|
+
border_left_color: 'border-left-color',
|
|
47
|
+
border_right_color: 'border-right-color',
|
|
48
|
+
border_top_color: 'border-top-color',
|
|
49
|
+
border_bottom_color: 'border-bottom-color',
|
|
50
|
+
border_top_left_radius: 'border-top-left-radius',
|
|
51
|
+
border_top_right_radius: 'border-top-right-radius',
|
|
52
|
+
border_bottom_left_radius: 'border-bottom-left-radius',
|
|
53
|
+
border_bottom_right_radius: 'border-bottom-right-radius',
|
|
54
|
+
border_style: 'border-style',
|
|
55
|
+
border_left_style: 'border-left-style',
|
|
56
|
+
border_top_style: 'border-top-style',
|
|
57
|
+
border_right_style: 'border-right-style',
|
|
58
|
+
border_bottom_style: 'border-bottom-style',
|
|
59
|
+
|
|
60
|
+
// Outline properties
|
|
61
|
+
outline: 'outline',
|
|
62
|
+
outline_style: 'outline-style',
|
|
63
|
+
outline_color: 'outline-color',
|
|
64
|
+
outline_width: 'outline-width',
|
|
65
|
+
outline_offset: 'outline-offset',
|
|
66
|
+
|
|
67
|
+
// Display properties
|
|
68
|
+
display: 'display',
|
|
69
|
+
opacity: 'opacity',
|
|
70
|
+
visibility: 'visibility',
|
|
71
|
+
|
|
72
|
+
// Overflow properties
|
|
73
|
+
overflow: 'overflow',
|
|
74
|
+
overflow_x: 'overflow-x',
|
|
75
|
+
overflow_y: 'overflow-y',
|
|
76
|
+
overflow_block: 'overflow-block',
|
|
77
|
+
overflow_inline: 'overflow-inline',
|
|
78
|
+
overflow_clip_margin: 'overflow-clip-margin',
|
|
79
|
+
|
|
80
|
+
// Flexbox properties
|
|
81
|
+
flex: 'flex',
|
|
82
|
+
flex_direction: 'flex-direction',
|
|
83
|
+
flex_wrap: 'flex-wrap',
|
|
84
|
+
flex_flow: 'flex-flow',
|
|
85
|
+
flex_grow: 'flex-grow',
|
|
86
|
+
flex_shrink: 'flex-shrink',
|
|
87
|
+
flex_basis: 'flex-basis',
|
|
88
|
+
justify_content: 'justify-content',
|
|
89
|
+
justify_items: 'justify-items',
|
|
90
|
+
align_items: 'align-items',
|
|
91
|
+
align_self: 'align-self',
|
|
92
|
+
align_content: 'align-content',
|
|
93
|
+
order: 'order',
|
|
94
|
+
gap: 'gap',
|
|
95
|
+
row_gap: 'row-gap',
|
|
96
|
+
column_gap: 'column-gap',
|
|
97
|
+
|
|
98
|
+
// Grid properties
|
|
99
|
+
grid: 'grid',
|
|
100
|
+
grid_area: 'grid-area',
|
|
101
|
+
grid_template: 'grid-template',
|
|
102
|
+
grid_template_areas: 'grid-template-areas',
|
|
103
|
+
grid_template_rows: 'grid-template-rows',
|
|
104
|
+
grid_template_columns: 'grid-template-columns',
|
|
105
|
+
grid_row: 'grid-row',
|
|
106
|
+
grid_row_start: 'grid-row-start',
|
|
107
|
+
grid_row_end: 'grid-row-end',
|
|
108
|
+
grid_column: 'grid-column',
|
|
109
|
+
grid_column_start: 'grid-column-start',
|
|
110
|
+
grid_column_end: 'grid-column-end',
|
|
111
|
+
grid_gap: 'grid-gap',
|
|
112
|
+
grid_row_gap: 'grid-row-gap',
|
|
113
|
+
grid_column_gap: 'grid-column-gap',
|
|
114
|
+
grid_auto_flow: 'grid-auto-flow',
|
|
115
|
+
grid_auto_rows: 'grid-auto-rows',
|
|
116
|
+
grid_auto_columns: 'grid-auto-columns',
|
|
117
|
+
|
|
118
|
+
// Margin properties
|
|
119
|
+
margin: 'margin',
|
|
120
|
+
margin_left: 'margin-left',
|
|
121
|
+
margin_right: 'margin-right',
|
|
122
|
+
margin_top: 'margin-top',
|
|
123
|
+
margin_bottom: 'margin-bottom',
|
|
124
|
+
|
|
125
|
+
// Padding properties
|
|
126
|
+
padding: 'padding',
|
|
127
|
+
padding_left: 'padding-left',
|
|
128
|
+
padding_right: 'padding-right',
|
|
129
|
+
padding_top: 'padding-top',
|
|
130
|
+
padding_bottom: 'padding-bottom',
|
|
131
|
+
|
|
132
|
+
// Box properties
|
|
133
|
+
box_sizing: 'box-sizing',
|
|
134
|
+
box_shadow: 'box-shadow',
|
|
135
|
+
|
|
136
|
+
// Size properties
|
|
137
|
+
width: 'width',
|
|
138
|
+
min_width: 'min-width',
|
|
139
|
+
max_width: 'max-width',
|
|
140
|
+
height: 'height',
|
|
141
|
+
min_height: 'min-height',
|
|
142
|
+
max_height: 'max-height',
|
|
143
|
+
|
|
144
|
+
// Position properties
|
|
145
|
+
position: 'position',
|
|
146
|
+
top: 'top',
|
|
147
|
+
right: 'right',
|
|
148
|
+
bottom: 'bottom',
|
|
149
|
+
left: 'left',
|
|
150
|
+
z_index: 'z-index',
|
|
151
|
+
|
|
152
|
+
// Float properties
|
|
153
|
+
float: 'float',
|
|
154
|
+
clear: 'clear',
|
|
155
|
+
|
|
156
|
+
// Transform properties
|
|
157
|
+
transform: 'transform',
|
|
158
|
+
transform_origin: 'transform-origin',
|
|
159
|
+
transform_style: 'transform-style',
|
|
160
|
+
translate: 'translate',
|
|
161
|
+
|
|
162
|
+
// Font properties
|
|
163
|
+
font: 'font',
|
|
164
|
+
font_family: 'font-family',
|
|
165
|
+
font_size: 'font-size',
|
|
166
|
+
font_weight: 'font-weight',
|
|
167
|
+
font_style: 'font-style',
|
|
168
|
+
font_variant: 'font-variant',
|
|
169
|
+
font_stretch: 'font-stretch',
|
|
170
|
+
font_size_adjust: 'font-size-adjust',
|
|
171
|
+
font_synthesis: 'font-synthesis',
|
|
172
|
+
font_feature_settings: 'font-feature-settings',
|
|
173
|
+
font_kerning: 'font-kerning',
|
|
174
|
+
font_language_override: 'font-language-override',
|
|
175
|
+
font_optical_sizing: 'font-optical-sizing',
|
|
176
|
+
font_variant_alternates: 'font-variant-alternates',
|
|
177
|
+
font_variant_caps: 'font-variant-caps',
|
|
178
|
+
font_variant_east_asian: 'font-variant-east-asian',
|
|
179
|
+
font_variant_ligatures: 'font-variant-ligatures',
|
|
180
|
+
font_variant_numeric: 'font-variant-numeric',
|
|
181
|
+
font_variant_position: 'font-variant-position',
|
|
182
|
+
|
|
183
|
+
// Text properties
|
|
184
|
+
line_height: 'line-height',
|
|
185
|
+
letter_spacing: 'letter-spacing',
|
|
186
|
+
text_align: 'text-align',
|
|
187
|
+
text_decoration: 'text-decoration',
|
|
188
|
+
text_transform: 'text-transform',
|
|
189
|
+
white_space: 'white-space',
|
|
190
|
+
word_break: 'word-break',
|
|
191
|
+
word_wrap: 'word-wrap',
|
|
192
|
+
text_overflow: 'text-overflow',
|
|
193
|
+
text_shadow: 'text-shadow',
|
|
194
|
+
text_indent: 'text-indent',
|
|
195
|
+
text_justify: 'text-justify',
|
|
196
|
+
text_orientation: 'text-orientation',
|
|
197
|
+
text_rendering: 'text-rendering',
|
|
198
|
+
text_size_adjust: 'text-size-adjust',
|
|
199
|
+
text_combine_upright: 'text-combine-upright',
|
|
200
|
+
text_emphasis: 'text-emphasis',
|
|
201
|
+
text_emphasis_color: 'text-emphasis-color',
|
|
202
|
+
text_emphasis_position: 'text-emphasis-position',
|
|
203
|
+
text_emphasis_style: 'text-emphasis-style',
|
|
204
|
+
text_decoration_color: 'text-decoration-color',
|
|
205
|
+
text_decoration_line: 'text-decoration-line',
|
|
206
|
+
text_decoration_skip: 'text-decoration-skip',
|
|
207
|
+
text_decoration_skip_ink: 'text-decoration-skip-ink',
|
|
208
|
+
text_decoration_style: 'text-decoration-style',
|
|
209
|
+
text_underline_position: 'text-underline-position',
|
|
210
|
+
list_style: 'list-style',
|
|
211
|
+
list_style_type: 'list-style-type',
|
|
212
|
+
list_style_position: 'list-style-position',
|
|
213
|
+
list_style_image: 'list-style-image',
|
|
214
|
+
|
|
215
|
+
// Color properties
|
|
216
|
+
color: 'color',
|
|
217
|
+
accent_color: 'accent-color',
|
|
218
|
+
|
|
219
|
+
// Cursor properties
|
|
220
|
+
cursor: 'cursor',
|
|
221
|
+
pointer_events: 'pointer-events',
|
|
222
|
+
|
|
223
|
+
// Miscellaneous properties
|
|
224
|
+
vertical_align: 'vertical-align',
|
|
225
|
+
inset: 'inset',
|
|
226
|
+
inset_block: 'inset-block',
|
|
227
|
+
inset_block_start: 'inset-block-start',
|
|
228
|
+
inset_block_end: 'inset-block-end',
|
|
229
|
+
inset_inline: 'inset-inline',
|
|
230
|
+
inset_inline_start: 'inset-inline-start',
|
|
231
|
+
inset_inline_end: 'inset-inline-end',
|
|
232
|
+
// transitions
|
|
233
|
+
transition: 'transition',
|
|
234
|
+
transition_property: 'transition-property',
|
|
235
|
+
transition_duration: 'transition-duration',
|
|
236
|
+
transition_timing_function: 'transition-timing-function',
|
|
237
|
+
transition_delay: 'transition-delay',
|
|
238
|
+
// animation
|
|
239
|
+
animation: 'animation',
|
|
240
|
+
animation_name: 'animation-name',
|
|
241
|
+
animation_duration: 'animation-duration',
|
|
242
|
+
animation_timing_function: 'animation-timing-function',
|
|
243
|
+
animation_delay: 'animation-delay',
|
|
244
|
+
animation_iteration_count: 'animation-iteration-count',
|
|
245
|
+
animation_direction: 'animation-direction',
|
|
246
|
+
animation_fill_mode: 'animation-fill-mode',
|
|
247
|
+
animation_play_state: 'animation-play-state',
|
|
248
|
+
animation_timeline: 'animation-timeline',
|
|
249
|
+
// customizations
|
|
250
|
+
appearance: 'appearance',
|
|
251
|
+
user_select: 'user-select',
|
|
252
|
+
aspect_ratio: 'aspect-ratio',
|
|
253
|
+
resize: 'resize',
|
|
254
|
+
caret: 'caret',
|
|
255
|
+
caret_animation: 'caret-animation',
|
|
256
|
+
caret_shape: 'caret-shape',
|
|
257
|
+
caret_color: 'caret-color',
|
|
258
|
+
backdrop_filter: 'backdrop-filter',
|
|
259
|
+
backface_visibility: 'backface-visibility',
|
|
260
|
+
block_size: 'block-size',
|
|
261
|
+
writing_mode: 'writing-mode',
|
|
262
|
+
break_before: 'break-before',
|
|
263
|
+
break_after: 'break-after',
|
|
264
|
+
break_inside: 'break-inside',
|
|
265
|
+
clip: 'clip',
|
|
266
|
+
clip_path: 'clip-path',
|
|
267
|
+
clip_rule: 'clip-rule',
|
|
268
|
+
filter: 'filter',
|
|
269
|
+
float_offset: 'float-offset',
|
|
270
|
+
float_defer: 'float-defer',
|
|
271
|
+
hyphens: 'hyphens',
|
|
272
|
+
image_rendering: 'image-rendering',
|
|
273
|
+
image_orientation: 'image-orientation',
|
|
274
|
+
image_resolution: 'image-resolution',
|
|
275
|
+
isolation: 'isolation',
|
|
276
|
+
mix_blend_mode: 'mix-blend-mode',
|
|
277
|
+
object_fit: 'object-fit',
|
|
278
|
+
object_position: 'object-position',
|
|
279
|
+
overscroll_behavior: 'overscroll-behavior',
|
|
280
|
+
overscroll_behavior_x: 'overscroll-behavior-x',
|
|
281
|
+
overscroll_behavior_y: 'overscroll-behavior-y',
|
|
282
|
+
perspective: 'perspective',
|
|
283
|
+
perspective_origin: 'perspective-origin',
|
|
284
|
+
scroll_snap_margin: 'scroll-snap-margin',
|
|
285
|
+
scroll_snap_align: 'scroll-snap-align',
|
|
286
|
+
caption_side: 'caption-side',
|
|
287
|
+
empty_cells: 'empty-cells',
|
|
288
|
+
// svg and graphics
|
|
289
|
+
fill: 'fill',
|
|
290
|
+
fill_rule: 'fill-rule',
|
|
291
|
+
flood_color: 'flood-color',
|
|
292
|
+
flood_opacity: 'flood-opacity',
|
|
293
|
+
lighting_color: 'lighting-color',
|
|
294
|
+
marker_end: 'marker-end',
|
|
295
|
+
marker_mid: 'marker-mid',
|
|
296
|
+
marker_start: 'marker-start',
|
|
297
|
+
shape_rendering: 'shape-rendering',
|
|
298
|
+
stop_color: 'stop-color',
|
|
299
|
+
stop_opacity: 'stop-opacity',
|
|
300
|
+
stroke: 'stroke',
|
|
301
|
+
stroke_dasharray: 'stroke-dasharray',
|
|
302
|
+
stroke_dashoffset: 'stroke-dashoffset',
|
|
303
|
+
stroke_linecap: 'stroke-linecap',
|
|
304
|
+
stroke_linejoin: 'stroke-linejoin',
|
|
305
|
+
stroke_miterlimit: 'stroke-miterlimit',
|
|
306
|
+
stroke_opacity: 'stroke-opacity',
|
|
307
|
+
mask: 'mask',
|
|
308
|
+
mask_type: 'mask-type',
|
|
309
|
+
mask_image: 'mask-image',
|
|
310
|
+
mask_mode: 'mask-mode',
|
|
311
|
+
mask_repeat: 'mask-repeat',
|
|
312
|
+
mask_position: 'mask-position',
|
|
313
|
+
mask_clip: 'mask-clip',
|
|
314
|
+
mask_origin: 'mask-origin',
|
|
315
|
+
mask_size: 'mask-size',
|
|
316
|
+
mask_composite: 'mask-composite',
|
|
317
|
+
mask_border: 'mask-border',
|
|
318
|
+
mask_border_source: 'mask-border-source',
|
|
319
|
+
mask_border_mode: 'mask-border-mode',
|
|
320
|
+
mask_border_slice: 'mask-border-slice',
|
|
321
|
+
mask_border_width: 'mask-border-width',
|
|
322
|
+
mask_border_outset: 'mask-border-outset',
|
|
323
|
+
mask_border_repeat: 'mask-border-repeat',
|
|
324
|
+
|
|
325
|
+
//? only for pseudo-elements. Is the equivalent of content for ::before and ::after
|
|
326
|
+
$content: 'content',
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
expect(cssProps).toEqual(expectedProps);
|
|
330
|
+
});
|
|
331
|
+
});
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import { cssPseudoClasses } from '../cssPseudoClasses.js';
|
|
3
|
+
|
|
4
|
+
describe('cssPseudoClasses constants', () => {
|
|
5
|
+
it('should include common interactive pseudo-classes', () => {
|
|
6
|
+
expect(cssPseudoClasses).toHaveProperty('hover');
|
|
7
|
+
expect(cssPseudoClasses).toHaveProperty('focus');
|
|
8
|
+
expect(cssPseudoClasses).toHaveProperty('active');
|
|
9
|
+
expect(cssPseudoClasses).toHaveProperty('visited');
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
it('should include form-related pseudo-classes', () => {
|
|
13
|
+
expect(cssPseudoClasses).toHaveProperty('enabled');
|
|
14
|
+
expect(cssPseudoClasses).toHaveProperty('disabled');
|
|
15
|
+
expect(cssPseudoClasses).toHaveProperty('checked');
|
|
16
|
+
expect(cssPseudoClasses).toHaveProperty('valid');
|
|
17
|
+
expect(cssPseudoClasses).toHaveProperty('invalid');
|
|
18
|
+
expect(cssPseudoClasses).toHaveProperty('required');
|
|
19
|
+
expect(cssPseudoClasses).toHaveProperty('optional');
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
it('should include structural pseudo-classes', () => {
|
|
23
|
+
expect(cssPseudoClasses).toHaveProperty('first_child');
|
|
24
|
+
expect(cssPseudoClasses).toHaveProperty('last_child');
|
|
25
|
+
expect(cssPseudoClasses).toHaveProperty('nth_child');
|
|
26
|
+
expect(cssPseudoClasses).toHaveProperty('empty');
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
it('should have correct CSS pseudo-class names', () => {
|
|
30
|
+
expect(cssPseudoClasses.hover).toBe('hover');
|
|
31
|
+
expect(cssPseudoClasses.first_child).toBe('first-child');
|
|
32
|
+
expect(cssPseudoClasses.last_child).toBe('last-child');
|
|
33
|
+
expect(cssPseudoClasses.nth_child).toBe('nth-child');
|
|
34
|
+
expect(cssPseudoClasses.read_only).toBe('read-only');
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it('should convert underscores to hyphens in pseudo-class names', () => {
|
|
38
|
+
// Test that underscore-separated names map to hyphen-separated CSS
|
|
39
|
+
expect(cssPseudoClasses.placeholder_shown).toBe('placeholder-shown');
|
|
40
|
+
expect(cssPseudoClasses.out_of_range).toBe('out-of-range');
|
|
41
|
+
expect(cssPseudoClasses.user_invalid).toBe('user-invalid');
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
it('should be a comprehensive object with many pseudo-classes', () => {
|
|
45
|
+
const pseudoClassCount = Object.keys(cssPseudoClasses).length;
|
|
46
|
+
expect(pseudoClassCount).toBeGreaterThan(50); // Should have many pseudo-classes
|
|
47
|
+
});
|
|
48
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Valid compiler types for Bernova CSS generation
|
|
3
|
+
* Determines what parts of the CSS will be compiled and output
|
|
4
|
+
*/
|
|
5
|
+
const compilerTypeValid = {
|
|
6
|
+
/** Generate only foundation styles (CSS variables, base styles, reset CSS) */
|
|
7
|
+
foundationOnly: 'foundationOnly',
|
|
8
|
+
/** Generate only component/theme styles (classes, utilities, media queries) */
|
|
9
|
+
componentOnly: 'componentOnly',
|
|
10
|
+
/** Generate both foundation and component styles (complete build) */
|
|
11
|
+
full: 'full',
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
module.exports = { compilerTypeValid };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CSS Advanced Selectors for Bernova
|
|
3
|
+
*
|
|
4
|
+
* Defines CSS selector combinators that enable advanced targeting of elements.
|
|
5
|
+
* These selectors allow for complex CSS relationships and precise element selection.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* // Using adjacent selector: targets next sibling
|
|
9
|
+
* { $advancedSelectors: [{ adjacent: { color: 'red' }, $target: '.item' }] }
|
|
10
|
+
* // Generates: .parent + .item { color: red; }
|
|
11
|
+
*/
|
|
12
|
+
const cssAdvancedSelectors = {
|
|
13
|
+
/** Adjacent sibling selector - targets the immediately following sibling */
|
|
14
|
+
adjacent: ' + ',
|
|
15
|
+
|
|
16
|
+
/** Direct child selector - targets only direct children */
|
|
17
|
+
child: ' > ',
|
|
18
|
+
|
|
19
|
+
/** Descendant selector - targets all nested descendants */
|
|
20
|
+
descendant: ' ',
|
|
21
|
+
|
|
22
|
+
/** General sibling selector - targets all following siblings */
|
|
23
|
+
near: ' ~ ',
|
|
24
|
+
|
|
25
|
+
/** Concatenation - combines selectors without space */
|
|
26
|
+
concat: '',
|
|
27
|
+
|
|
28
|
+
/** Column combinator - targets elements in table columns (CSS4) */
|
|
29
|
+
column: ' || ',
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
module.exports = { cssAdvancedSelectors };
|