no-global-styles

Blocks global styles through CSS-in-JS and CSS module imports.

Use local styles so that style dependencies are statically resolvable.

The only global styling that should be used is @atlaskit/css-reset.

import { Global } from '@emotion/react';

<Global
    styles={{
        '.some-class': {
            fontSize: 50,
            textAlign: 'center',
        },
    }}
/>;

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle({
    body: {
        margin: 0,
    },
});

import { injectGlobal } from 'styled-components';

injectGlobal({
    body: {
        margin: 0,
    },
});

<style>
    {`
    .some-class {
      color: red;
    }
  `}
</style>

import '@atlaskit/css-reset';