Skip to content

Commit 31013d5

Browse files
chananchanan
committed
v3.00-alpha-03
1 parent f72e49e commit 31013d5

File tree

5 files changed

+248
-10
lines changed

5 files changed

+248
-10
lines changed

‎src/BlazorStyled/BlazorStyled.csproj

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<LangVersion>8.0</LangVersion>
77
<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
88
<PackageId>BlazorStyled</PackageId>
9-
<Version>3.0.0-alpha-02</Version>
9+
<Version>3.0.0-alpha-03</Version>
1010
<Authors>Chanan Braunstein</Authors>
1111
<Title>BlazorStyled</Title>
1212
<Description>CSS in Blazor Components</Description>

‎src/BlazorStyled/Internal/ScriptManager.cs

+239-1
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,244 @@ internal async Task ClearStyles(string stylesheetId, string stylesheetName)
7272
}
7373

7474
//Script
75-
private readonly string _script = @"window.BlazorStyled={insertClasses:function(n,t,i,r,u,f){for(var e=0;e<r.length;e++){const o=r[e];window.BlazorStyled.insertClass(n,t,i,o,u,f)}},insertClass:function(n,t,i,r,u,f){const e=window.BlazorStyled.initLogger(f),s=window.BlazorStyled.getOrCreateSheet(n,t,i,e),o=window.BlazorStyled.parseTheme(n,r,e);if(o)if(u)window.BlazorStyled.writeRule(s,o,e);else try{o.indexOf(':-moz')!==-1&&'MozBoxSizing'in document.body.style?window.BlazorStyled.insertRule(s.sheet,o,e):o.indexOf(':-moz')===-1?window.BlazorStyled.insertRule(s.sheet,o,e):e.warn('Mozilla rule not inserted: ',o)}catch(h){e.error('Failed to insert: ',o);e.error(h)}},updateRule:function(n,t,i,r,u,f,e,o){const s=window.BlazorStyled.initLogger(o),h=window.BlazorStyled.getOrCreateSheet(n,t,i,s),c=window.BlazorStyled.parseTheme(n,f,s);if(e)window.BlazorStyled.updateWrittenRule(h,u,c,s);else try{window.BlazorStyled.updatedInsertedRule(h.sheet,u,c,s)}catch(l){s.error('Failed to update: ',f);s.error(l)}},clearStyles:function(n,t,i){const u=window.BlazorStyled.initLogger(i),r=document.getElementById(n);r&&(document.head.removeChild(r),u.log('Cleared stylesheet: ',t))},setThemeValue:function(n,t,i,r,u,f,e){const o=window.BlazorStyled.initLogger(e);try{const h=window.BlazorStyled.getOrCreateTheme(n),c=h.values[r];h.values[r]=u;for(var s in h.rules){const u=h.rules[s];if(u.indexOf(r)!==-1)if(c){const h=u.substring(0,u.indexOf('{')),s=window.BlazorStyled.parseTheme(n,u.replace('['+r+']',c),o);s&&window.BlazorStyled.updateRule(n,t,i,h,s,u,f,e)}else window.BlazorStyled.insertClass(n,t,i,u,f,e)}}catch(h){o.error('Failed to update: ',rule);o.error(h)}},getThemeValues:function(n){const t=window.BlazorStyled.getOrCreateTheme(n);return t.values},setGlobalStyle:function(n,t,i){const r=window.BlazorStyled.getOrCreateTheme(n);r.globalStyles[t]=i},getGlobalStyles:function(n){const t=window.BlazorStyled.getOrCreateTheme(n);return t.globalStyles},parseTheme:function(n,t,i){if(t.indexOf('[')===-1)return t;const r=window.BlazorStyled.getOrCreateTheme(n);r.rules.find(n=>n===t)||r.rules.push(t);const u=t.substring(t.indexOf('[')+1,t.indexOf(']')),f=r.values[u];if(f===undefined)return undefined;const e=t.replace('['+u+']',f);return window.BlazorStyled.parseTheme(n,e,i)},getOrCreateTheme:function(n){return window.BlazorStyled.themes[n]===undefined&&(window.BlazorStyled.themes[n]={values:{},rules:[],globalStyles:{}}),window.BlazorStyled.themes[n]},initLogger:function(n){var t,i;if(this.debug={},n)for(t in console)typeof console[t]=='function'&&(this.debug[t]=console[t].bind(window.console));else for(i in console)typeof console[i]=='function'&&(this.debug[i]=function(){});return this.debug},getOrCreateSheet:function(n,t,i,r){const e='data-blazorstyled-priority',o=document.getElementById(n);if(o)return o;const f=document.createElement('style'),s=document.createAttribute('id');s.value=n;f.setAttributeNode(s);const h=document.createAttribute('data-blazorstyled-name');h.value=t;f.setAttributeNode(h);const c=document.createAttribute(e);c.value=i;f.setAttributeNode(c);const u=document.head;if(u.hasChildNodes()){let n=!1;for(let t=0;t<u.children.length;t++){const r=u.children[t];if(r.hasAttribute(e)){const o=r.getAttribute(e),s=parseInt(o,10);i>=s&&!n&&(n=!0,t!==u.children.length-1?u.insertBefore(f,u.children[t+1]):u.appendChild(f))}}n||u.insertBefore(f,u.firstChild)}else u.appendChild(f);return r.log('Inserted stylesheet: ',f),f},writeRule:function(n,t,i){n.innerText?n.innerText.indexOf(t)===-1&&(n.innerText=t.startsWith('@import')?t+n.innerText:n.innerText+t,i.log('Written: ',t)):(n.innerText=t,i.log('Written: ',t))},insertRule:function(n,t,i){const r=t.startsWith('@import')?0:n.cssRules.length;n.insertRule(t,r);i.log('Inserted at '+r+': ',t)},updateWrittenRule:function(n,t,i,r){n.innerText||(n.innerText=i);n.innerText=n.innerText.replace(t,i);r.log('Updated old rule: '+t+' to new rule: '+i)},updatedInsertedRule:function(n,t,i,r){const e=window.BlazorStyled.getOrCreateSheet('temp','temp',initLogger(!1));e.sheet.insertRule(t);const o=e.sheet.cssRules[0].cssText;document.head.removeChild(e);let u=-1;for(var f=0;f<n.cssRules.length;f++)n.cssRules[f].cssText===o&&(u=f);u!==-1&&(n.deleteRule(u),n.insertRule(i,u),r.log('Updated old rule at '+u+': '+t+' to new rule: '+i))},themes:{}};";
75+
private readonly string _script = @"window.BlazorStyled = {
76+
insertClasses: function (stylesheetId, stylesheetName, priority, rules, development, debug) {
77+
//console.log('insertClasses');
78+
//console.time('insertClasses');
79+
for (var i = 0; i < rules.length; i++) {
80+
const rule = rules[i];
81+
window.BlazorStyled.insertClass(stylesheetId, stylesheetName, priority, rule, development, debug);
82+
}
83+
//console.timeEnd('insertClasses');
84+
},
85+
insertClass: function (stylesheetId, stylesheetName, priority, rule, development, debug) {
86+
//console.log('insertClass');
87+
const logger = window.BlazorStyled.initLogger(debug);
88+
const sheet = window.BlazorStyled.getOrCreateSheet(stylesheetId, stylesheetName, priority, logger);
89+
const updatedRule = window.BlazorStyled.parseTheme(stylesheetId, rule, logger);
90+
//console.log('insertClass updatedRule: ', updatedRule);
91+
if (updatedRule) {
92+
if (development) {
93+
window.BlazorStyled.writeRule(sheet, updatedRule, logger);
94+
} else {
95+
try {
96+
if (updatedRule.indexOf(':-moz') !== -1 && 'MozBoxSizing' in document.body.style) {
97+
window.BlazorStyled.insertRule(sheet.sheet, updatedRule, logger);
98+
} else if (updatedRule.indexOf(':-moz') === -1) {
99+
window.BlazorStyled.insertRule(sheet.sheet, updatedRule, logger);
100+
} else {
101+
logger.warn('Mozilla rule not inserted: ', updatedRule);
102+
}
103+
} catch (err) {
104+
logger.error('Failed to insert: ', updatedRule);
105+
logger.error(err);
106+
}
107+
}
108+
}
109+
},
110+
updateRule: function (stylesheetId, stylesheetName, priority, selector, oldRule, rule, development, debug) {
111+
//console.log('updateRule - rule: ', rule);
112+
const logger = window.BlazorStyled.initLogger(debug);
113+
const sheet = window.BlazorStyled.getOrCreateSheet(stylesheetId, stylesheetName, priority, logger);
114+
const updatedRule = window.BlazorStyled.parseTheme(stylesheetId, rule, logger);
115+
//console.log('updateRule updatedRule: ', updatedRule);
116+
if (development) {
117+
//console.log('here1');
118+
window.BlazorStyled.updateWrittenRule(sheet, oldRule, updatedRule, logger);
119+
//console.log('here2');
120+
} else {
121+
try {
122+
window.BlazorStyled.updatedInsertedRule(sheet.sheet, oldRule, updatedRule, logger);
123+
} catch (err) {
124+
logger.error('Failed to update: ', rule);
125+
logger.error(err);
126+
}
127+
}
128+
},
129+
clearStyles: function (stylesheetId, stylesheetName, debug) {
130+
const logger = window.BlazorStyled.initLogger(debug);
131+
const sheet = document.getElementById(stylesheetId);
132+
if (sheet) {
133+
document.head.removeChild(sheet);
134+
logger.log('Cleared stylesheet: ', stylesheetName);
135+
}
136+
},
137+
setThemeValue: function (stylesheetId, stylesheetName, priority, name, value, development, debug) {
138+
const logger = window.BlazorStyled.initLogger(debug);
139+
try {
140+
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
141+
const oldValue = theme.values[name];
142+
//console.log('oldValue: ', oldValue);
143+
theme.values[name] = value;
144+
//console.log('theme: ', theme);
145+
//console.log('updated: ', theme.values[name]);
146+
for (var i in theme.rules) {
147+
const rule = theme.rules[i];
148+
if (rule.indexOf(name) !== -1) {
149+
//console.log('found rule: ', rule);
150+
if(oldValue) {
151+
//console.log('update');
152+
const selector = rule.substring(0, rule.indexOf('{'));
153+
const oldRule = window.BlazorStyled.parseTheme(stylesheetId, rule.replace('[' + name + ']', oldValue), logger);
154+
//console.log('oldRule: ', oldRule);
155+
if(oldRule) {
156+
window.BlazorStyled.updateRule(stylesheetId, stylesheetName, priority, selector, oldRule, rule, development, debug);
157+
//console.log('end update');
158+
}
159+
} else {
160+
//console.log('insert');
161+
window.BlazorStyled.insertClass(stylesheetId, stylesheetName, priority, rule, development, debug);
162+
}
163+
}
164+
}
165+
} catch (err) {
166+
logger.error('Failed to update: ', rule);
167+
logger.error(err);
168+
}
169+
//console.log('end setThemeValue');
170+
},
171+
getThemeValues: function (stylesheetId) {
172+
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
173+
return theme.values;
174+
},
175+
setGlobalStyle: function (stylesheetId, name, value) {
176+
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
177+
theme.globalStyles[name] = value;
178+
},
179+
getGlobalStyles: function (stylesheetId) {
180+
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
181+
return theme.globalStyles;
182+
},
183+
parseTheme: function (stylesheetId, rule, logger) {
184+
if (rule.indexOf('[') === -1) {
185+
return rule;
186+
}
187+
const theme = window.BlazorStyled.getOrCreateTheme(stylesheetId);
188+
if (!theme.rules.find((r) => r === rule)) {
189+
theme.rules.push(rule);
190+
}
191+
const themeValueName = rule.substring(rule.indexOf('[') + 1, rule.indexOf(']'));
192+
const themeValue = theme.values[themeValueName];
193+
if (themeValue === undefined) {
194+
return undefined;
195+
}
196+
const updated = rule.replace('[' + themeValueName + ']', themeValue);
197+
return window.BlazorStyled.parseTheme(stylesheetId, updated, logger);
198+
},
199+
getOrCreateTheme: function (stylesheetId) {
200+
if (window.BlazorStyled.themes[stylesheetId] === undefined) {
201+
window.BlazorStyled.themes[stylesheetId] = {
202+
values: {},
203+
rules: [],
204+
globalStyles: {},
205+
};
206+
}
207+
return window.BlazorStyled.themes[stylesheetId];
208+
},
209+
initLogger: function (debug) {
210+
this.debug = {};
211+
if (debug) {
212+
for (var m in console) {
213+
if (typeof console[m] === 'function') {
214+
this.debug[m] = console[m].bind(window.console);
215+
}
216+
}
217+
} else {
218+
for (var m2 in console) {
219+
if (typeof console[m2] === 'function') {
220+
this.debug[m2] = function () {};
221+
}
222+
}
223+
}
224+
return this.debug;
225+
},
226+
getOrCreateSheet: function (stylesheetId, stylesheetName, priority, logger) {
227+
const DATA_PRIORITY = 'data-blazorstyled-priority';
228+
const DATA_NAME = 'data-blazorstyled-name';
229+
const sheet = document.getElementById(stylesheetId);
230+
if (sheet) return sheet;
231+
const styleEl = document.createElement('style');
232+
const id = document.createAttribute('id');
233+
id.value = stylesheetId;
234+
styleEl.setAttributeNode(id);
235+
const dataName = document.createAttribute(DATA_NAME);
236+
dataName.value = stylesheetName;
237+
styleEl.setAttributeNode(dataName);
238+
const dataPriority = document.createAttribute(DATA_PRIORITY);
239+
dataPriority.value = priority;
240+
styleEl.setAttributeNode(dataPriority);
241+
const head = document.head;
242+
if (head.hasChildNodes()) {
243+
let found = false;
244+
for (let i = 0; i < head.children.length; i++) {
245+
const node = head.children[i];
246+
if (node.hasAttribute(DATA_PRIORITY)) {
247+
const attr = node.getAttribute(DATA_PRIORITY);
248+
const currentPriority = parseInt(attr, 10);
249+
if (priority >= currentPriority && !found) {
250+
found = true;
251+
if (i !== head.children.length - 1) {
252+
head.insertBefore(styleEl, head.children[i + 1]);
253+
} else {
254+
head.appendChild(styleEl);
255+
}
256+
}
257+
}
258+
}
259+
if (!found) {
260+
head.insertBefore(styleEl, head.firstChild);
261+
}
262+
} else {
263+
head.appendChild(styleEl);
264+
}
265+
logger.log('Inserted stylesheet: ', styleEl);
266+
return styleEl;
267+
},
268+
writeRule: function (sheet, rule, logger) {
269+
if (!sheet.innerText) {
270+
sheet.innerText = rule;
271+
logger.log('Written: ', rule);
272+
} else {
273+
if (sheet.innerText.indexOf(rule) === -1) {
274+
sheet.innerText = rule.startsWith('@import') ? rule + sheet.innerText : sheet.innerText + rule;
275+
logger.log('Written: ', rule);
276+
}
277+
}
278+
},
279+
insertRule: function (sheet, rule, logger) {
280+
const index = rule.startsWith('@import') ? 0 : sheet.cssRules.length;
281+
sheet.insertRule(rule, index);
282+
logger.log('Inserted at ' + index + ': ', rule);
283+
},
284+
updateWrittenRule: function (sheet, oldRule, rule, logger) {
285+
//console.log('updateWrittenRule');
286+
if (!sheet.innerText) {
287+
sheet.innerText = rule;
288+
}
289+
//console.log('oldRule: ', oldRule);
290+
//console.log('rule: ', rule);
291+
//console.log('sheet.innerText.replace(oldRule, rule): ', sheet.innerText.replace(oldRule, rule));
292+
sheet.innerText = sheet.innerText.replace(oldRule, rule);
293+
logger.log('Updated old rule: ' + oldRule + ' to new rule: ' + rule);
294+
},
295+
updatedInsertedRule: function (sheet, oldRule, rule, logger) {
296+
const temp = window.BlazorStyled.getOrCreateSheet('temp', 'temp', window.BlazorStyled.initLogger(false));
297+
temp.sheet.insertRule(oldRule);
298+
const oldCssText = temp.sheet.cssRules[0].cssText;
299+
document.head.removeChild(temp);
300+
let index = -1;
301+
for (var i = 0; i < sheet.cssRules.length; i++) {
302+
if (sheet.cssRules[i].cssText === oldCssText) {
303+
index = i;
304+
}
305+
}
306+
if (index !== -1) {
307+
sheet.deleteRule(index);
308+
sheet.insertRule(rule, index);
309+
logger.log('Updated old rule at ' + index + ': ' + oldRule + ' to new rule: ' + rule);
310+
}
311+
},
312+
themes: {},
313+
};";
76314
}
77315
}

‎src/BlazorStyled/Internal/Scripts.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@
217217
logger.log('Updated old rule: ' + oldRule + ' to new rule: ' + rule);
218218
},
219219
updatedInsertedRule: function (sheet, oldRule, rule, logger) {
220-
const temp = window.BlazorStyled.getOrCreateSheet('temp', 'temp', initLogger(false));
220+
const temp = window.BlazorStyled.getOrCreateSheet('temp', 'temp', window.BlazorStyled.initLogger(false));
221221
temp.sheet.insertRule(oldRule);
222222
const oldCssText = temp.sheet.cssRules[0].cssText;
223223
document.head.removeChild(temp);

‎src/ClientSideSample/wwwroot/index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@
2525
z-index: 1000;
2626
}
2727

28-
#blazor-error-ui .dismiss {
29-
cursor: pointer;
30-
position: absolute;
31-
right: 0.75rem;
32-
top: 0.5rem;
33-
}
28+
#blazor-error-ui .dismiss {
29+
cursor: pointer;
30+
position: absolute;
31+
right: 0.75rem;
32+
top: 0.5rem;
33+
}
3434
</style>
3535
</head>
3636

‎src/ServerSideSample/Startup.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ public void ConfigureServices(IServiceCollection services)
4545

4646
//AddBlazorStyled is needed for BlazorStyled to work
4747
IConfigurationSection section = Configuration.GetSection("BlazorStyled");
48-
services.AddBlazorStyled(isDevelopment: section.GetValue<bool>("development"), isDebug: section.GetValue<bool>("debug"));
48+
services.AddBlazorStyled(isDevelopment: false, isDebug: section.GetValue<bool>("debug"));
4949

5050
//The following is only used by the sample sites and is not required for BlazorStyled to work
5151
services.AddServicesForSampleSites();

0 commit comments

Comments
 (0)