mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-24 17:35:16 +00:00
70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
|
import nested from '../ThemeProvider/nested';
|
||
|
/**
|
||
|
* This is the list of the style rule name we use as drop in replacement for the built-in
|
||
|
* pseudo classes (:checked, :disabled, :focused, etc.).
|
||
|
*
|
||
|
* Why do they exist in the first place?
|
||
|
* These classes are used at a specificity of 2.
|
||
|
* It allows them to override previously definied styles as well as
|
||
|
* being untouched by simple user overrides.
|
||
|
*/
|
||
|
|
||
|
const pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected']; // Returns a function which generates unique class names based on counters.
|
||
|
// When new generator function is created, rule counter is reset.
|
||
|
// We need to reset the rule counter for SSR for each request.
|
||
|
//
|
||
|
// It's inspired by
|
||
|
// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
|
||
|
|
||
|
export default function createGenerateClassName(options = {}) {
|
||
|
const {
|
||
|
disableGlobal = false,
|
||
|
productionPrefix = 'jss',
|
||
|
seed = ''
|
||
|
} = options;
|
||
|
const seedPrefix = seed === '' ? '' : `${seed}-`;
|
||
|
let ruleCounter = 0;
|
||
|
|
||
|
const getNextCounterId = () => {
|
||
|
ruleCounter += 1;
|
||
|
|
||
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
if (ruleCounter >= 1e10) {
|
||
|
console.warn(['Material-UI: You might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join(''));
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return ruleCounter;
|
||
|
};
|
||
|
|
||
|
return (rule, styleSheet) => {
|
||
|
const name = styleSheet.options.name; // Is a global static MUI style?
|
||
|
|
||
|
if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
|
||
|
// We can use a shorthand class name, we never use the keys to style the components.
|
||
|
if (pseudoClasses.indexOf(rule.key) !== -1) {
|
||
|
return `Mui-${rule.key}`;
|
||
|
}
|
||
|
|
||
|
const prefix = `${seedPrefix}${name}-${rule.key}`;
|
||
|
|
||
|
if (!styleSheet.options.theme[nested] || seed !== '') {
|
||
|
return prefix;
|
||
|
}
|
||
|
|
||
|
return `${prefix}-${getNextCounterId()}`;
|
||
|
}
|
||
|
|
||
|
if (process.env.NODE_ENV === 'production') {
|
||
|
return `${seedPrefix}${productionPrefix}${getNextCounterId()}`;
|
||
|
}
|
||
|
|
||
|
const suffix = `${rule.key}-${getNextCounterId()}`; // Help with debuggability.
|
||
|
|
||
|
if (styleSheet.options.classNamePrefix) {
|
||
|
return `${seedPrefix}${styleSheet.options.classNamePrefix}-${suffix}`;
|
||
|
}
|
||
|
|
||
|
return `${seedPrefix}${suffix}`;
|
||
|
};
|
||
|
}
|