@navita/css 0.0.10 → 0.0.11
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/classList.cjs +10 -0
- package/classList.mjs +8 -0
- package/fontFace.cjs +9 -0
- package/fontFace.mjs +7 -0
- package/globalStyle.cjs +9 -0
- package/globalStyle.mjs +7 -0
- package/helpers/walkObject.cjs +20 -0
- package/helpers/walkObject.mjs +18 -0
- package/index.cjs +75 -0
- package/index.mjs +15 -177
- package/keyframes.cjs +9 -0
- package/keyframes.mjs +7 -0
- package/merge.cjs +13 -0
- package/merge.mjs +11 -0
- package/package.json +4 -4
- package/style.cjs +9 -0
- package/style.mjs +7 -0
- package/theme.cjs +49 -0
- package/theme.mjs +44 -0
- package/validateContract.cjs +56 -0
- package/validateContract.mjs +54 -0
- package/vars.cjs +49 -0
- package/vars.mjs +45 -0
- package/index.js +0 -237
package/classList.cjs
ADDED
package/classList.mjs
ADDED
package/fontFace.cjs
ADDED
package/fontFace.mjs
ADDED
package/globalStyle.cjs
ADDED
package/globalStyle.mjs
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function walkObject(objectToWalk, transformFn, currentPath = []) {
|
|
4
|
+
const clonedObject = objectToWalk.constructor();
|
|
5
|
+
for(const key in objectToWalk){
|
|
6
|
+
const value = objectToWalk[key];
|
|
7
|
+
const newPath = [
|
|
8
|
+
...currentPath,
|
|
9
|
+
key
|
|
10
|
+
];
|
|
11
|
+
if (typeof value === 'string' || typeof value === 'number' || value == null) {
|
|
12
|
+
clonedObject[key] = transformFn(value, newPath);
|
|
13
|
+
} else if (typeof value === 'object' && !Array.isArray(value)) {
|
|
14
|
+
clonedObject[key] = walkObject(value, transformFn, newPath);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return clonedObject;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
exports.walkObject = walkObject;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
function walkObject(objectToWalk, transformFn, currentPath = []) {
|
|
2
|
+
const clonedObject = objectToWalk.constructor();
|
|
3
|
+
for(const key in objectToWalk){
|
|
4
|
+
const value = objectToWalk[key];
|
|
5
|
+
const newPath = [
|
|
6
|
+
...currentPath,
|
|
7
|
+
key
|
|
8
|
+
];
|
|
9
|
+
if (typeof value === 'string' || typeof value === 'number' || value == null) {
|
|
10
|
+
clonedObject[key] = transformFn(value, newPath);
|
|
11
|
+
} else if (typeof value === 'object' && !Array.isArray(value)) {
|
|
12
|
+
clonedObject[key] = walkObject(value, transformFn, newPath);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
return clonedObject;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { walkObject };
|
package/index.cjs
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var style = require('./style.cjs');
|
|
4
|
+
var globalStyle = require('./globalStyle.cjs');
|
|
5
|
+
var merge = require('./merge.cjs');
|
|
6
|
+
var keyframes = require('./keyframes.cjs');
|
|
7
|
+
var fontFace = require('./fontFace.cjs');
|
|
8
|
+
var theme = require('./theme.cjs');
|
|
9
|
+
var vars = require('./vars.cjs');
|
|
10
|
+
var classList = require('./classList.cjs');
|
|
11
|
+
require('@navita/adapter');
|
|
12
|
+
require('cssesc');
|
|
13
|
+
require('./helpers/walkObject.cjs');
|
|
14
|
+
require('./validateContract.cjs');
|
|
15
|
+
require('deep-object-diff');
|
|
16
|
+
require('picocolors');
|
|
17
|
+
|
|
18
|
+
const source = '@navita/css';
|
|
19
|
+
const importMap = [
|
|
20
|
+
{
|
|
21
|
+
callee: "style",
|
|
22
|
+
source
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
callee: "globalStyle",
|
|
26
|
+
source
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
callee: "keyframes",
|
|
30
|
+
source
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
callee: "fontFace",
|
|
34
|
+
source
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
callee: "createThemeContract",
|
|
38
|
+
source
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
callee: "createGlobalThemeContract",
|
|
42
|
+
source
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
callee: "createGlobalTheme",
|
|
46
|
+
source
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
callee: "createTheme",
|
|
50
|
+
source
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
callee: "createVar",
|
|
54
|
+
source
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
callee: "fallbackVar",
|
|
58
|
+
source
|
|
59
|
+
}
|
|
60
|
+
];
|
|
61
|
+
|
|
62
|
+
exports.style = style.style;
|
|
63
|
+
exports.globalStyle = globalStyle.globalStyle;
|
|
64
|
+
exports.merge = merge.merge;
|
|
65
|
+
exports.keyframes = keyframes.keyframes;
|
|
66
|
+
exports.fontFace = fontFace.fontFace;
|
|
67
|
+
exports.createGlobalTheme = theme.createGlobalTheme;
|
|
68
|
+
exports.createGlobalThemeContract = theme.createGlobalThemeContract;
|
|
69
|
+
exports.createTheme = theme.createTheme;
|
|
70
|
+
exports.createThemeContract = theme.createThemeContract;
|
|
71
|
+
exports.assignVars = vars.assignVars;
|
|
72
|
+
exports.createVar = vars.createVar;
|
|
73
|
+
exports.fallbackVar = vars.fallbackVar;
|
|
74
|
+
exports.ClassList = classList.ClassList;
|
|
75
|
+
exports.importMap = importMap;
|
package/index.mjs
CHANGED
|
@@ -1,179 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const input = classNames.filter(Boolean).join(' ').split(' ');
|
|
16
|
-
const output = {};
|
|
17
|
-
for (const className of input){
|
|
18
|
-
const [property] = className.split(/\d+$/);
|
|
19
|
-
output[property] = className;
|
|
20
|
-
}
|
|
21
|
-
return Object.values(output).join(' ');
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function keyframes(rule) {
|
|
25
|
-
return addKeyframe(rule);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function fontFace(rule) {
|
|
29
|
-
return addFontFace(rule);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function walkObject(objectToWalk, transformFn, currentPath = []) {
|
|
33
|
-
const clonedObject = objectToWalk.constructor();
|
|
34
|
-
for(const key in objectToWalk){
|
|
35
|
-
const value = objectToWalk[key];
|
|
36
|
-
const newPath = [
|
|
37
|
-
...currentPath,
|
|
38
|
-
key
|
|
39
|
-
];
|
|
40
|
-
if (typeof value === 'string' || typeof value === 'number' || value == null) {
|
|
41
|
-
clonedObject[key] = transformFn(value, newPath);
|
|
42
|
-
} else if (typeof value === 'object' && !Array.isArray(value)) {
|
|
43
|
-
clonedObject[key] = walkObject(value, transformFn, newPath);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
return clonedObject;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
const normaliseObject = (obj)=>walkObject(obj, ()=>'');
|
|
50
|
-
function validateContract(contract, tokens) {
|
|
51
|
-
const theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
|
|
52
|
-
const valid = Object.keys(theDiff).length === 0;
|
|
53
|
-
return {
|
|
54
|
-
valid,
|
|
55
|
-
diffString: valid ? '' : renderDiff(contract, theDiff)
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
function diffLine(value, nesting, type) {
|
|
59
|
-
const whitespace = [
|
|
60
|
-
...Array(nesting).keys()
|
|
61
|
-
].map(()=>' ').join('');
|
|
62
|
-
const line = `${type ? type : ' '}${whitespace}${value}`;
|
|
63
|
-
{
|
|
64
|
-
if (type === '-') {
|
|
65
|
-
return chalk.red(line);
|
|
66
|
-
}
|
|
67
|
-
if (type === '+') {
|
|
68
|
-
return chalk.green(line);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
return line;
|
|
72
|
-
}
|
|
73
|
-
function renderDiff(orig, diff, nesting = 0) {
|
|
74
|
-
const lines = [];
|
|
75
|
-
if (nesting === 0) {
|
|
76
|
-
lines.push(diffLine('{', 0));
|
|
77
|
-
}
|
|
78
|
-
const innerNesting = nesting + 1;
|
|
79
|
-
const keys = Object.keys(diff).sort();
|
|
80
|
-
for (const key of keys){
|
|
81
|
-
const value = diff[key];
|
|
82
|
-
if (!(key in orig)) {
|
|
83
|
-
lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));
|
|
84
|
-
} else if (typeof value === 'object') {
|
|
85
|
-
lines.push(diffLine(`${key}: {`, innerNesting));
|
|
86
|
-
lines.push(renderDiff(orig[key], diff[key], innerNesting));
|
|
87
|
-
lines.push(diffLine('}', innerNesting));
|
|
88
|
-
} else {
|
|
89
|
-
lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
if (nesting === 0) {
|
|
93
|
-
lines.push(diffLine('}', 0));
|
|
94
|
-
}
|
|
95
|
-
return lines.join('\n');
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function createVar(name) {
|
|
99
|
-
return `--${cssesc(!name ? generateIdentifier(undefined) : name, {
|
|
100
|
-
isIdentifier: true
|
|
101
|
-
})}`;
|
|
102
|
-
}
|
|
103
|
-
function fallbackVar(...values) {
|
|
104
|
-
let finalValue = '';
|
|
105
|
-
for (let value of values.reverse()){
|
|
106
|
-
if (/^--/.test(value)) {
|
|
107
|
-
value = `var(${value})`;
|
|
108
|
-
}
|
|
109
|
-
if (finalValue === '') {
|
|
110
|
-
finalValue = String(value);
|
|
111
|
-
} else {
|
|
112
|
-
if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
|
|
113
|
-
throw new Error(`Invalid variable name: ${value}`);
|
|
114
|
-
}
|
|
115
|
-
finalValue = value.replace(/\)$/, `, ${finalValue})`);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
return finalValue;
|
|
119
|
-
}
|
|
120
|
-
function assignVars(varContract, tokens) {
|
|
121
|
-
const varSetters = {};
|
|
122
|
-
const { valid , diffString } = validateContract(varContract, tokens);
|
|
123
|
-
if (!valid) {
|
|
124
|
-
throw new Error(`Tokens don't match contract.\n${diffString}`);
|
|
125
|
-
}
|
|
126
|
-
walkObject(tokens, (value, path)=>{
|
|
127
|
-
const cssVarWithoutVar = `--${cssesc(path.join('-').toLowerCase(), {
|
|
128
|
-
isIdentifier: true
|
|
129
|
-
})}`;
|
|
130
|
-
varSetters[cssVarWithoutVar] = String(value);
|
|
131
|
-
});
|
|
132
|
-
return varSetters;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
function createThemeContract(tokens) {
|
|
136
|
-
return walkObject(tokens, (_value, path)=>{
|
|
137
|
-
return `var(${createVar(path.join('-').toLowerCase())})`;
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
function createGlobalThemeContract(tokens, mapFn) {
|
|
141
|
-
return walkObject(tokens, (value, path)=>{
|
|
142
|
-
const rawVarName = typeof mapFn === 'function' ? mapFn(value, path) : value;
|
|
143
|
-
const varName = typeof rawVarName === 'string' ? rawVarName.replace(/^--/, '') : null;
|
|
144
|
-
if (typeof varName !== 'string' || varName !== cssesc(varName, {
|
|
145
|
-
isIdentifier: true
|
|
146
|
-
})) {
|
|
147
|
-
throw new Error(`Invalid variable name for "${path.join('.')}": ${varName}`);
|
|
148
|
-
}
|
|
149
|
-
return `var(--${varName})`;
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
function createGlobalTheme(selector, arg2, arg3) {
|
|
153
|
-
const shouldCreateVars = Boolean(!arg3);
|
|
154
|
-
const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
|
|
155
|
-
const tokens = shouldCreateVars ? arg2 : arg3;
|
|
156
|
-
const temp = assignVars(themeVars, tokens);
|
|
157
|
-
addStaticCss(selector, temp);
|
|
158
|
-
if (shouldCreateVars) {
|
|
159
|
-
return themeVars;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
function createTheme(arg1, arg2) {
|
|
163
|
-
const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1);
|
|
164
|
-
const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
|
|
165
|
-
return vars ? [
|
|
166
|
-
themeClassName,
|
|
167
|
-
vars
|
|
168
|
-
] : themeClassName;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
class ClassList extends String {
|
|
172
|
-
constructor(str, classList){
|
|
173
|
-
super(str);
|
|
174
|
-
this.classList = classList;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
1
|
+
export { style } from './style.mjs';
|
|
2
|
+
export { globalStyle } from './globalStyle.mjs';
|
|
3
|
+
export { merge } from './merge.mjs';
|
|
4
|
+
export { keyframes } from './keyframes.mjs';
|
|
5
|
+
export { fontFace } from './fontFace.mjs';
|
|
6
|
+
export { createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract } from './theme.mjs';
|
|
7
|
+
export { assignVars, createVar, fallbackVar } from './vars.mjs';
|
|
8
|
+
export { ClassList } from './classList.mjs';
|
|
9
|
+
import '@navita/adapter';
|
|
10
|
+
import 'cssesc';
|
|
11
|
+
import './helpers/walkObject.mjs';
|
|
12
|
+
import './validateContract.mjs';
|
|
13
|
+
import 'deep-object-diff';
|
|
14
|
+
import 'picocolors';
|
|
177
15
|
|
|
178
16
|
const source = '@navita/css';
|
|
179
17
|
const importMap = [
|
|
@@ -219,4 +57,4 @@ const importMap = [
|
|
|
219
57
|
}
|
|
220
58
|
];
|
|
221
59
|
|
|
222
|
-
export {
|
|
60
|
+
export { importMap };
|
package/keyframes.cjs
ADDED
package/keyframes.mjs
ADDED
package/merge.cjs
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function merge(...classNames) {
|
|
4
|
+
const input = classNames.filter(Boolean).join(' ').split(' ');
|
|
5
|
+
const output = {};
|
|
6
|
+
for (const className of input){
|
|
7
|
+
const [property] = className.split(/\d+$/);
|
|
8
|
+
output[property] = className;
|
|
9
|
+
}
|
|
10
|
+
return Object.values(output).join(' ');
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
exports.merge = merge;
|
package/merge.mjs
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
function merge(...classNames) {
|
|
2
|
+
const input = classNames.filter(Boolean).join(' ').split(' ');
|
|
3
|
+
const output = {};
|
|
4
|
+
for (const className of input){
|
|
5
|
+
const [property] = className.split(/\d+$/);
|
|
6
|
+
output[property] = className;
|
|
7
|
+
}
|
|
8
|
+
return Object.values(output).join(' ');
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export { merge };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navita/css",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"description": "Public API for Navita",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"api",
|
|
@@ -13,15 +13,15 @@
|
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
15
|
"import": "./index.mjs",
|
|
16
|
-
"require": "./index.
|
|
16
|
+
"require": "./index.cjs",
|
|
17
17
|
"types": "./index.d.ts"
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"deep-object-diff": "^1.1.9",
|
|
22
22
|
"cssesc": "^3.0.0",
|
|
23
|
-
"
|
|
24
|
-
"@navita/adapter": "0.0.
|
|
23
|
+
"picocolors": "^1.0.0",
|
|
24
|
+
"@navita/adapter": "0.0.10"
|
|
25
25
|
},
|
|
26
26
|
"license": "MIT",
|
|
27
27
|
"author": "Eagerpatch",
|
package/style.cjs
ADDED
package/style.mjs
ADDED
package/theme.cjs
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var adapter = require('@navita/adapter');
|
|
4
|
+
var cssesc = require('cssesc');
|
|
5
|
+
var helpers_walkObject = require('./helpers/walkObject.cjs');
|
|
6
|
+
var vars = require('./vars.cjs');
|
|
7
|
+
require('./validateContract.cjs');
|
|
8
|
+
require('deep-object-diff');
|
|
9
|
+
require('picocolors');
|
|
10
|
+
|
|
11
|
+
function createThemeContract(tokens) {
|
|
12
|
+
return helpers_walkObject.walkObject(tokens, (_value, path)=>{
|
|
13
|
+
return `var(${vars.createVar(path.join('-').toLowerCase())})`;
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
function createGlobalThemeContract(tokens, mapFn) {
|
|
17
|
+
return helpers_walkObject.walkObject(tokens, (value, path)=>{
|
|
18
|
+
const rawVarName = typeof mapFn === 'function' ? mapFn(value, path) : value;
|
|
19
|
+
const varName = typeof rawVarName === 'string' ? rawVarName.replace(/^--/, '') : null;
|
|
20
|
+
if (typeof varName !== 'string' || varName !== cssesc(varName, {
|
|
21
|
+
isIdentifier: true
|
|
22
|
+
})) {
|
|
23
|
+
throw new Error(`Invalid variable name for "${path.join('.')}": ${varName}`);
|
|
24
|
+
}
|
|
25
|
+
return `var(--${varName})`;
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function createGlobalTheme(selector, arg2, arg3) {
|
|
29
|
+
const shouldCreateVars = Boolean(!arg3);
|
|
30
|
+
const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
|
|
31
|
+
const tokens = shouldCreateVars ? arg2 : arg3;
|
|
32
|
+
adapter.addStaticCss(selector, vars.assignVars(themeVars, tokens));
|
|
33
|
+
if (shouldCreateVars) {
|
|
34
|
+
return themeVars;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
function createTheme(arg1, arg2) {
|
|
38
|
+
const themeClassName = adapter.generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1);
|
|
39
|
+
const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
|
|
40
|
+
return vars ? [
|
|
41
|
+
themeClassName,
|
|
42
|
+
vars
|
|
43
|
+
] : themeClassName;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
exports.createGlobalTheme = createGlobalTheme;
|
|
47
|
+
exports.createGlobalThemeContract = createGlobalThemeContract;
|
|
48
|
+
exports.createTheme = createTheme;
|
|
49
|
+
exports.createThemeContract = createThemeContract;
|
package/theme.mjs
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { addStaticCss, generateIdentifier } from '@navita/adapter';
|
|
2
|
+
import cssesc from 'cssesc';
|
|
3
|
+
import { walkObject } from './helpers/walkObject.mjs';
|
|
4
|
+
import { createVar, assignVars } from './vars.mjs';
|
|
5
|
+
import './validateContract.mjs';
|
|
6
|
+
import 'deep-object-diff';
|
|
7
|
+
import 'picocolors';
|
|
8
|
+
|
|
9
|
+
function createThemeContract(tokens) {
|
|
10
|
+
return walkObject(tokens, (_value, path)=>{
|
|
11
|
+
return `var(${createVar(path.join('-').toLowerCase())})`;
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function createGlobalThemeContract(tokens, mapFn) {
|
|
15
|
+
return walkObject(tokens, (value, path)=>{
|
|
16
|
+
const rawVarName = typeof mapFn === 'function' ? mapFn(value, path) : value;
|
|
17
|
+
const varName = typeof rawVarName === 'string' ? rawVarName.replace(/^--/, '') : null;
|
|
18
|
+
if (typeof varName !== 'string' || varName !== cssesc(varName, {
|
|
19
|
+
isIdentifier: true
|
|
20
|
+
})) {
|
|
21
|
+
throw new Error(`Invalid variable name for "${path.join('.')}": ${varName}`);
|
|
22
|
+
}
|
|
23
|
+
return `var(--${varName})`;
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
function createGlobalTheme(selector, arg2, arg3) {
|
|
27
|
+
const shouldCreateVars = Boolean(!arg3);
|
|
28
|
+
const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
|
|
29
|
+
const tokens = shouldCreateVars ? arg2 : arg3;
|
|
30
|
+
addStaticCss(selector, assignVars(themeVars, tokens));
|
|
31
|
+
if (shouldCreateVars) {
|
|
32
|
+
return themeVars;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
function createTheme(arg1, arg2) {
|
|
36
|
+
const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1);
|
|
37
|
+
const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
|
|
38
|
+
return vars ? [
|
|
39
|
+
themeClassName,
|
|
40
|
+
vars
|
|
41
|
+
] : themeClassName;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export { createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var deepObjectDiff = require('deep-object-diff');
|
|
4
|
+
var pc = require('picocolors');
|
|
5
|
+
var helpers_walkObject = require('./helpers/walkObject.cjs');
|
|
6
|
+
|
|
7
|
+
const normaliseObject = (obj)=>helpers_walkObject.walkObject(obj, ()=>'');
|
|
8
|
+
function validateContract(contract, tokens) {
|
|
9
|
+
const theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
|
|
10
|
+
const valid = Object.keys(theDiff).length === 0;
|
|
11
|
+
return {
|
|
12
|
+
valid,
|
|
13
|
+
diffString: valid ? '' : renderDiff(contract, theDiff)
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
function diffLine(value, nesting, type) {
|
|
17
|
+
const whitespace = [
|
|
18
|
+
...Array(nesting).keys()
|
|
19
|
+
].map(()=>' ').join('');
|
|
20
|
+
const line = `${type ? type : ' '}${whitespace}${value}`;
|
|
21
|
+
{
|
|
22
|
+
if (type === '-') {
|
|
23
|
+
return pc.red(line);
|
|
24
|
+
}
|
|
25
|
+
if (type === '+') {
|
|
26
|
+
return pc.green(line);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
return line;
|
|
30
|
+
}
|
|
31
|
+
function renderDiff(orig, diff, nesting = 0) {
|
|
32
|
+
const lines = [];
|
|
33
|
+
if (nesting === 0) {
|
|
34
|
+
lines.push(diffLine('{', 0));
|
|
35
|
+
}
|
|
36
|
+
const innerNesting = nesting + 1;
|
|
37
|
+
const keys = Object.keys(diff).sort();
|
|
38
|
+
for (const key of keys){
|
|
39
|
+
const value = diff[key];
|
|
40
|
+
if (!(key in orig)) {
|
|
41
|
+
lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));
|
|
42
|
+
} else if (typeof value === 'object') {
|
|
43
|
+
lines.push(diffLine(`${key}: {`, innerNesting));
|
|
44
|
+
lines.push(renderDiff(orig[key], diff[key], innerNesting));
|
|
45
|
+
lines.push(diffLine('}', innerNesting));
|
|
46
|
+
} else {
|
|
47
|
+
lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
if (nesting === 0) {
|
|
51
|
+
lines.push(diffLine('}', 0));
|
|
52
|
+
}
|
|
53
|
+
return lines.join('\n');
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
exports.validateContract = validateContract;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { diff } from 'deep-object-diff';
|
|
2
|
+
import pc from 'picocolors';
|
|
3
|
+
import { walkObject } from './helpers/walkObject.mjs';
|
|
4
|
+
|
|
5
|
+
const normaliseObject = (obj)=>walkObject(obj, ()=>'');
|
|
6
|
+
function validateContract(contract, tokens) {
|
|
7
|
+
const theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
|
|
8
|
+
const valid = Object.keys(theDiff).length === 0;
|
|
9
|
+
return {
|
|
10
|
+
valid,
|
|
11
|
+
diffString: valid ? '' : renderDiff(contract, theDiff)
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
function diffLine(value, nesting, type) {
|
|
15
|
+
const whitespace = [
|
|
16
|
+
...Array(nesting).keys()
|
|
17
|
+
].map(()=>' ').join('');
|
|
18
|
+
const line = `${type ? type : ' '}${whitespace}${value}`;
|
|
19
|
+
{
|
|
20
|
+
if (type === '-') {
|
|
21
|
+
return pc.red(line);
|
|
22
|
+
}
|
|
23
|
+
if (type === '+') {
|
|
24
|
+
return pc.green(line);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return line;
|
|
28
|
+
}
|
|
29
|
+
function renderDiff(orig, diff, nesting = 0) {
|
|
30
|
+
const lines = [];
|
|
31
|
+
if (nesting === 0) {
|
|
32
|
+
lines.push(diffLine('{', 0));
|
|
33
|
+
}
|
|
34
|
+
const innerNesting = nesting + 1;
|
|
35
|
+
const keys = Object.keys(diff).sort();
|
|
36
|
+
for (const key of keys){
|
|
37
|
+
const value = diff[key];
|
|
38
|
+
if (!(key in orig)) {
|
|
39
|
+
lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));
|
|
40
|
+
} else if (typeof value === 'object') {
|
|
41
|
+
lines.push(diffLine(`${key}: {`, innerNesting));
|
|
42
|
+
lines.push(renderDiff(orig[key], diff[key], innerNesting));
|
|
43
|
+
lines.push(diffLine('}', innerNesting));
|
|
44
|
+
} else {
|
|
45
|
+
lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
if (nesting === 0) {
|
|
49
|
+
lines.push(diffLine('}', 0));
|
|
50
|
+
}
|
|
51
|
+
return lines.join('\n');
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export { validateContract };
|
package/vars.cjs
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var adapter = require('@navita/adapter');
|
|
4
|
+
var cssesc = require('cssesc');
|
|
5
|
+
var helpers_walkObject = require('./helpers/walkObject.cjs');
|
|
6
|
+
var validateContract = require('./validateContract.cjs');
|
|
7
|
+
require('deep-object-diff');
|
|
8
|
+
require('picocolors');
|
|
9
|
+
|
|
10
|
+
function createVar(name) {
|
|
11
|
+
return `--${cssesc(!name ? adapter.generateIdentifier(undefined) : name, {
|
|
12
|
+
isIdentifier: true
|
|
13
|
+
})}`;
|
|
14
|
+
}
|
|
15
|
+
function fallbackVar(...values) {
|
|
16
|
+
let finalValue = '';
|
|
17
|
+
for (let value of values.reverse()){
|
|
18
|
+
if (/^--/.test(value)) {
|
|
19
|
+
value = `var(${value})`;
|
|
20
|
+
}
|
|
21
|
+
if (finalValue === '') {
|
|
22
|
+
finalValue = String(value);
|
|
23
|
+
} else {
|
|
24
|
+
if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
|
|
25
|
+
throw new Error(`Invalid variable name: ${value}`);
|
|
26
|
+
}
|
|
27
|
+
finalValue = value.replace(/\)$/, `, ${finalValue})`);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return finalValue;
|
|
31
|
+
}
|
|
32
|
+
function assignVars(varContract, tokens) {
|
|
33
|
+
const varSetters = {};
|
|
34
|
+
const { valid , diffString } = validateContract.validateContract(varContract, tokens);
|
|
35
|
+
if (!valid) {
|
|
36
|
+
throw new Error(`Tokens don't match contract.\n${diffString}`);
|
|
37
|
+
}
|
|
38
|
+
helpers_walkObject.walkObject(tokens, (value, path)=>{
|
|
39
|
+
const cssVarWithoutVar = `--${cssesc(path.join('-').toLowerCase(), {
|
|
40
|
+
isIdentifier: true
|
|
41
|
+
})}`;
|
|
42
|
+
varSetters[cssVarWithoutVar] = String(value);
|
|
43
|
+
});
|
|
44
|
+
return varSetters;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
exports.assignVars = assignVars;
|
|
48
|
+
exports.createVar = createVar;
|
|
49
|
+
exports.fallbackVar = fallbackVar;
|
package/vars.mjs
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { generateIdentifier } from '@navita/adapter';
|
|
2
|
+
import cssesc from 'cssesc';
|
|
3
|
+
import { walkObject } from './helpers/walkObject.mjs';
|
|
4
|
+
import { validateContract } from './validateContract.mjs';
|
|
5
|
+
import 'deep-object-diff';
|
|
6
|
+
import 'picocolors';
|
|
7
|
+
|
|
8
|
+
function createVar(name) {
|
|
9
|
+
return `--${cssesc(!name ? generateIdentifier(undefined) : name, {
|
|
10
|
+
isIdentifier: true
|
|
11
|
+
})}`;
|
|
12
|
+
}
|
|
13
|
+
function fallbackVar(...values) {
|
|
14
|
+
let finalValue = '';
|
|
15
|
+
for (let value of values.reverse()){
|
|
16
|
+
if (/^--/.test(value)) {
|
|
17
|
+
value = `var(${value})`;
|
|
18
|
+
}
|
|
19
|
+
if (finalValue === '') {
|
|
20
|
+
finalValue = String(value);
|
|
21
|
+
} else {
|
|
22
|
+
if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
|
|
23
|
+
throw new Error(`Invalid variable name: ${value}`);
|
|
24
|
+
}
|
|
25
|
+
finalValue = value.replace(/\)$/, `, ${finalValue})`);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return finalValue;
|
|
29
|
+
}
|
|
30
|
+
function assignVars(varContract, tokens) {
|
|
31
|
+
const varSetters = {};
|
|
32
|
+
const { valid , diffString } = validateContract(varContract, tokens);
|
|
33
|
+
if (!valid) {
|
|
34
|
+
throw new Error(`Tokens don't match contract.\n${diffString}`);
|
|
35
|
+
}
|
|
36
|
+
walkObject(tokens, (value, path)=>{
|
|
37
|
+
const cssVarWithoutVar = `--${cssesc(path.join('-').toLowerCase(), {
|
|
38
|
+
isIdentifier: true
|
|
39
|
+
})}`;
|
|
40
|
+
varSetters[cssVarWithoutVar] = String(value);
|
|
41
|
+
});
|
|
42
|
+
return varSetters;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export { assignVars, createVar, fallbackVar };
|
package/index.js
DELETED
|
@@ -1,237 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var adapter = require('@navita/adapter');
|
|
4
|
-
var cssesc = require('cssesc');
|
|
5
|
-
var chalk = require('chalk');
|
|
6
|
-
var deepObjectDiff = require('deep-object-diff');
|
|
7
|
-
|
|
8
|
-
function style(rule) {
|
|
9
|
-
return adapter.addCss(rule);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
function globalStyle(selector, rule) {
|
|
13
|
-
adapter.addStaticCss(selector, rule);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function merge(...classNames) {
|
|
17
|
-
const input = classNames.filter(Boolean).join(' ').split(' ');
|
|
18
|
-
const output = {};
|
|
19
|
-
for (const className of input){
|
|
20
|
-
const [property] = className.split(/\d+$/);
|
|
21
|
-
output[property] = className;
|
|
22
|
-
}
|
|
23
|
-
return Object.values(output).join(' ');
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function keyframes(rule) {
|
|
27
|
-
return adapter.addKeyframe(rule);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function fontFace(rule) {
|
|
31
|
-
return adapter.addFontFace(rule);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function walkObject(objectToWalk, transformFn, currentPath = []) {
|
|
35
|
-
const clonedObject = objectToWalk.constructor();
|
|
36
|
-
for(const key in objectToWalk){
|
|
37
|
-
const value = objectToWalk[key];
|
|
38
|
-
const newPath = [
|
|
39
|
-
...currentPath,
|
|
40
|
-
key
|
|
41
|
-
];
|
|
42
|
-
if (typeof value === 'string' || typeof value === 'number' || value == null) {
|
|
43
|
-
clonedObject[key] = transformFn(value, newPath);
|
|
44
|
-
} else if (typeof value === 'object' && !Array.isArray(value)) {
|
|
45
|
-
clonedObject[key] = walkObject(value, transformFn, newPath);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
return clonedObject;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
const normaliseObject = (obj)=>walkObject(obj, ()=>'');
|
|
52
|
-
function validateContract(contract, tokens) {
|
|
53
|
-
const theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
|
|
54
|
-
const valid = Object.keys(theDiff).length === 0;
|
|
55
|
-
return {
|
|
56
|
-
valid,
|
|
57
|
-
diffString: valid ? '' : renderDiff(contract, theDiff)
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
function diffLine(value, nesting, type) {
|
|
61
|
-
const whitespace = [
|
|
62
|
-
...Array(nesting).keys()
|
|
63
|
-
].map(()=>' ').join('');
|
|
64
|
-
const line = `${type ? type : ' '}${whitespace}${value}`;
|
|
65
|
-
{
|
|
66
|
-
if (type === '-') {
|
|
67
|
-
return chalk.red(line);
|
|
68
|
-
}
|
|
69
|
-
if (type === '+') {
|
|
70
|
-
return chalk.green(line);
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
return line;
|
|
74
|
-
}
|
|
75
|
-
function renderDiff(orig, diff, nesting = 0) {
|
|
76
|
-
const lines = [];
|
|
77
|
-
if (nesting === 0) {
|
|
78
|
-
lines.push(diffLine('{', 0));
|
|
79
|
-
}
|
|
80
|
-
const innerNesting = nesting + 1;
|
|
81
|
-
const keys = Object.keys(diff).sort();
|
|
82
|
-
for (const key of keys){
|
|
83
|
-
const value = diff[key];
|
|
84
|
-
if (!(key in orig)) {
|
|
85
|
-
lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));
|
|
86
|
-
} else if (typeof value === 'object') {
|
|
87
|
-
lines.push(diffLine(`${key}: {`, innerNesting));
|
|
88
|
-
lines.push(renderDiff(orig[key], diff[key], innerNesting));
|
|
89
|
-
lines.push(diffLine('}', innerNesting));
|
|
90
|
-
} else {
|
|
91
|
-
lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
if (nesting === 0) {
|
|
95
|
-
lines.push(diffLine('}', 0));
|
|
96
|
-
}
|
|
97
|
-
return lines.join('\n');
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
function createVar(name) {
|
|
101
|
-
return `--${cssesc(!name ? adapter.generateIdentifier(undefined) : name, {
|
|
102
|
-
isIdentifier: true
|
|
103
|
-
})}`;
|
|
104
|
-
}
|
|
105
|
-
function fallbackVar(...values) {
|
|
106
|
-
let finalValue = '';
|
|
107
|
-
for (let value of values.reverse()){
|
|
108
|
-
if (/^--/.test(value)) {
|
|
109
|
-
value = `var(${value})`;
|
|
110
|
-
}
|
|
111
|
-
if (finalValue === '') {
|
|
112
|
-
finalValue = String(value);
|
|
113
|
-
} else {
|
|
114
|
-
if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
|
|
115
|
-
throw new Error(`Invalid variable name: ${value}`);
|
|
116
|
-
}
|
|
117
|
-
finalValue = value.replace(/\)$/, `, ${finalValue})`);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
return finalValue;
|
|
121
|
-
}
|
|
122
|
-
function assignVars(varContract, tokens) {
|
|
123
|
-
const varSetters = {};
|
|
124
|
-
const { valid , diffString } = validateContract(varContract, tokens);
|
|
125
|
-
if (!valid) {
|
|
126
|
-
throw new Error(`Tokens don't match contract.\n${diffString}`);
|
|
127
|
-
}
|
|
128
|
-
walkObject(tokens, (value, path)=>{
|
|
129
|
-
const cssVarWithoutVar = `--${cssesc(path.join('-').toLowerCase(), {
|
|
130
|
-
isIdentifier: true
|
|
131
|
-
})}`;
|
|
132
|
-
varSetters[cssVarWithoutVar] = String(value);
|
|
133
|
-
});
|
|
134
|
-
return varSetters;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
function createThemeContract(tokens) {
|
|
138
|
-
return walkObject(tokens, (_value, path)=>{
|
|
139
|
-
return `var(${createVar(path.join('-').toLowerCase())})`;
|
|
140
|
-
});
|
|
141
|
-
}
|
|
142
|
-
function createGlobalThemeContract(tokens, mapFn) {
|
|
143
|
-
return walkObject(tokens, (value, path)=>{
|
|
144
|
-
const rawVarName = typeof mapFn === 'function' ? mapFn(value, path) : value;
|
|
145
|
-
const varName = typeof rawVarName === 'string' ? rawVarName.replace(/^--/, '') : null;
|
|
146
|
-
if (typeof varName !== 'string' || varName !== cssesc(varName, {
|
|
147
|
-
isIdentifier: true
|
|
148
|
-
})) {
|
|
149
|
-
throw new Error(`Invalid variable name for "${path.join('.')}": ${varName}`);
|
|
150
|
-
}
|
|
151
|
-
return `var(--${varName})`;
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
function createGlobalTheme(selector, arg2, arg3) {
|
|
155
|
-
const shouldCreateVars = Boolean(!arg3);
|
|
156
|
-
const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
|
|
157
|
-
const tokens = shouldCreateVars ? arg2 : arg3;
|
|
158
|
-
const temp = assignVars(themeVars, tokens);
|
|
159
|
-
adapter.addStaticCss(selector, temp);
|
|
160
|
-
if (shouldCreateVars) {
|
|
161
|
-
return themeVars;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
function createTheme(arg1, arg2) {
|
|
165
|
-
const themeClassName = adapter.generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1);
|
|
166
|
-
const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
|
|
167
|
-
return vars ? [
|
|
168
|
-
themeClassName,
|
|
169
|
-
vars
|
|
170
|
-
] : themeClassName;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
class ClassList extends String {
|
|
174
|
-
constructor(str, classList){
|
|
175
|
-
super(str);
|
|
176
|
-
this.classList = classList;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
const source = '@navita/css';
|
|
181
|
-
const importMap = [
|
|
182
|
-
{
|
|
183
|
-
callee: "style",
|
|
184
|
-
source
|
|
185
|
-
},
|
|
186
|
-
{
|
|
187
|
-
callee: "globalStyle",
|
|
188
|
-
source
|
|
189
|
-
},
|
|
190
|
-
{
|
|
191
|
-
callee: "keyframes",
|
|
192
|
-
source
|
|
193
|
-
},
|
|
194
|
-
{
|
|
195
|
-
callee: "fontFace",
|
|
196
|
-
source
|
|
197
|
-
},
|
|
198
|
-
{
|
|
199
|
-
callee: "createThemeContract",
|
|
200
|
-
source
|
|
201
|
-
},
|
|
202
|
-
{
|
|
203
|
-
callee: "createGlobalThemeContract",
|
|
204
|
-
source
|
|
205
|
-
},
|
|
206
|
-
{
|
|
207
|
-
callee: "createGlobalTheme",
|
|
208
|
-
source
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
callee: "createTheme",
|
|
212
|
-
source
|
|
213
|
-
},
|
|
214
|
-
{
|
|
215
|
-
callee: "createVar",
|
|
216
|
-
source
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
callee: "fallbackVar",
|
|
220
|
-
source
|
|
221
|
-
}
|
|
222
|
-
];
|
|
223
|
-
|
|
224
|
-
exports.ClassList = ClassList;
|
|
225
|
-
exports.assignVars = assignVars;
|
|
226
|
-
exports.createGlobalTheme = createGlobalTheme;
|
|
227
|
-
exports.createGlobalThemeContract = createGlobalThemeContract;
|
|
228
|
-
exports.createTheme = createTheme;
|
|
229
|
-
exports.createThemeContract = createThemeContract;
|
|
230
|
-
exports.createVar = createVar;
|
|
231
|
-
exports.fallbackVar = fallbackVar;
|
|
232
|
-
exports.fontFace = fontFace;
|
|
233
|
-
exports.globalStyle = globalStyle;
|
|
234
|
-
exports.importMap = importMap;
|
|
235
|
-
exports.keyframes = keyframes;
|
|
236
|
-
exports.merge = merge;
|
|
237
|
-
exports.style = style;
|