How to use @emotion/hash - 10 common examples

To help you get started, we’ve selected a few @emotion/hash examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mui-org / material-ui / packages / material-ui-styles / src / createGenerateClassName / createGenerateClassNameHash.js View on Github external
return (rule, styleSheet) => {
    const isStatic = !styleSheet.options.link;

    if (dangerouslyUseGlobalCSS && styleSheet && styleSheet.options.name && isStatic) {
      return `${safePrefix(styleSheet.options.name)}-${rule.key}`;
    }

    let suffix;

    // It's a static rule.
    if (isStatic) {
      let themeHash = themeHashCache[styleSheet.options.theme];
      if (!themeHash) {
        themeHash = hash(JSON.stringify(styleSheet.options.theme));
        themeHashCache[styleSheet.theme] = themeHash;
      }
      const raw = styleSheet.rules.raw[rule.key];
      suffix = hash(`${themeHash}${rule.key}${JSON.stringify(raw)}`);
    }

    if (!suffix) {
      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(''),
          );
github mui-org / material-ui / packages / material-ui-styles / src / createGenerateClassName / createGenerateClassNameHash.js View on Github external
if (dangerouslyUseGlobalCSS && styleSheet && styleSheet.options.name && isStatic) {
      return `${safePrefix(styleSheet.options.name)}-${rule.key}`;
    }

    let suffix;

    // It's a static rule.
    if (isStatic) {
      let themeHash = themeHashCache[styleSheet.options.theme];
      if (!themeHash) {
        themeHash = hash(JSON.stringify(styleSheet.options.theme));
        themeHashCache[styleSheet.theme] = themeHash;
      }
      const raw = styleSheet.rules.raw[rule.key];
      suffix = hash(`${themeHash}${rule.key}${JSON.stringify(raw)}`);
    }

    if (!suffix) {
      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(''),
          );
        }
      }

      suffix = ruleCounter;
github segmentio / ui-box / src / get-class-name.ts View on Github external
export default function getClassName(propertyInfo: PropertyInfo, value: string) {
  const {
    className,
    safeValue = false, // Value never contains unsafe characters. e.g: 10, hidden, border-box
    complexValue = false // Complex values that are best hashed. e.g: background-image
  } = propertyInfo
  let valueKey: string

  // Shortcut the global keywords
  if (value === 'inherit' || value === 'initial' || value === 'unset') {
    valueKey = value
    /* Always hash values that contain a calc() because the operators get
    stripped which can result in class name collisions
    */
  } else if (complexValue || value.includes('calc(')) {
    valueKey = hash(value)
  } else if (safeValue) {
    valueKey = value
  } else {
    valueKey = getSafeValue(value)
  }

  return `ub-${className}_${valueKey}`
}
github emotion-js / emotion / packages / cache / __tests__ / hydration.js View on Github external
test('it works', () => {
  let css = `color:hotpink;`
  let hash = hashString(css)
  safeQuerySelector(
    'body'
  ).innerHTML = `<style data-emotion-css="${hash}">.css-${hash}{${css}}</style>`
  let cache = createCache()
  expect(cache.inserted).toEqual({ [hash]: true })
  expect(document.documentElement).toMatchSnapshot()
})
github emotion-js / emotion / packages / hash / __tests__ / index.js View on Github external
it('accepts a string and returns a string as a hash', () => {
  expect(hash('something')).toBe('crsxd7')
})
github emotion-js / next / packages / css / src / index.js View on Github external
styles += handleInterpolation(fakeRegisteredCache, strings)
  } else {
    styles += strings[0]
  }

  interpolations.forEach(function(interpolation, i) {
    styles += handleInterpolation(fakeRegisteredCache, interpolation)
    if (stringMode === true && strings[i + 1] !== undefined) {
      styles += strings[i + 1]
    }
  }, this)
  styles = styles.replace(labelPattern, (match, p1: string) => {
    identifierName += `-${p1}`
    return ''
  })
  let name = hashString(styles) + identifierName

  return {
    name,
    styles
  }
}
github keystonejs / keystone / packages / build-field-types / src / rollup-plugins / pkg-json-redirect.js View on Github external
async writeBundle(bundle) {
      let pkgDir = map.get(this.addWatchFile);
      if (!pkgDir) {
        throw new Error(
          'pkgDir not found, this is likely a bug in build-field-types. Please open an issue with a reproduction.'
        );
      }
      for (const n in bundle) {
        const file = bundle[n];

        const facadeModuleId = typeof file.facadeModuleId === 'string' ? file.facadeModuleId : null;
        if (!file.isAsset && file.isDynamicEntry && facadeModuleId != null) {
          let hash = hashString(path.relative(pkgDir, facadeModuleId));
          let pkgJsonFileName = path.join(pkgDir, 'dist', hash, 'package.json');
          let pkgJsonField = file.fileName.endsWith('.esm.js') ? 'module' : 'main';
          let json = {};
          try {
            json = JSON.parse(fs.readFileSync(pkgJsonFileName, 'utf8'));
          } catch (err) {
            if (err.code !== 'ENOENT') {
              throw err;
            }
          }
          json[pkgJsonField] = path.relative(
            path.dirname(pkgJsonFileName),
            path.join(pkgDir, file.fileName)
          );

          fse.ensureFileSync(pkgJsonFileName);
github siddharthkp / use-css / index.js View on Github external
function getClassName(styles) {
  return 'c' + hash(styles)
}
github emotion-js / next / packages / babel-utils / src / get-target-class-name.js View on Github external
let hashArray = (arr: Array<string>) => hashString(arr.join(''))

@emotion/hash

A MurmurHash2 implementation

MIT
Latest version published 4 months ago

Package Health Score

90 / 100
Full package analysis

Similar packages

Popular JavaScript code snippets

Find secure code to use in your application or website