Avoid automatically adding the @keyframes within <GlobalStyles />

[kelvindecosta]

Hey everyone!

As far as I know, a setup using Styled Components doesn't require a utility like PurgeCSS.
Only components that are rendered have their styles generated in the build.

I was just wondering whether this is the same for my setup.
I am using twin.macro in a Gatsby site alongside styled-components.
I haven't added any purge patterns in tailwind.config.js.

I noticed the following styles in the final build of a blank site, one without any user-defined styles:

@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}/*!sc*/
@keyframes spin{to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}/*!sc*/
@-webkit-keyframes ping{75%,100%{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}/*!sc*/
@keyframes ping{75%,100%{-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}/*!sc*/
@-webkit-keyframes pulse{50%{opacity:.5;}}/*!sc*/
@keyframes pulse{50%{opacity:.5;}}/*!sc*/
@-webkit-keyframes bounce{0%,100%{-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%);-webkit-animationTimingFunction:cubic-bezier(0.8,0,1,1);animationTimingFunction:cubic-bezier(0.8,0,1,1);}50%{-webkit-transform:none;-ms-transform:none;transform:none;-webkit-animationTimingFunction:cubic-bezier(0,0,0.2,1);animationTimingFunction:cubic-bezier(0,0,0.2,1);}}/*!sc*/
@keyframes bounce{0%,100%{-webkit-transform:translateY(-25%);-ms-transform:translateY(-25%);transform:translateY(-25%);-webkit-animationTimingFunction:cubic-bezier(0.8,0,1,1);animationTimingFunction:cubic-bezier(0.8,0,1,1);}50%{-webkit-transform:none;-ms-transform:none;transform:none;-webkit-animationTimingFunction:cubic-bezier(0,0,0.2,1);animationTimingFunction:cubic-bezier(0,0,0.2,1);}}/*!sc*/

This is my current configuration:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: "styled-components",
  },
}

// gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-styled-components`]
}

// src/components/layout/index.js
import React from "react"
import { GlobalStyles } from "twin.macro"

const Layout = ({ children }) => (
  <>
    <GlobalStyles />
    {children}
  </>
)

export default Layout

Any help with clarifying this matter is appreciated.
Thanks!

[kelvindecosta]

I just noticed the following in the gatsby-styled-components guide:

GlobalStyles also includes some @keyframes so the animate-xxx classes have animations and some global css that makes the ring classes work.

Now, I appreciate the thought behind adding these styles.
However, I would still like to know if only the HTML element specific styles can be added via something similar to GlobalStyles.

[ben-rogerson]

Hey there!

You've probably worked out by now that purging doesn't work in this environment.
Those keyframes are there so you can use the animate classes - but if you're not using those it's a little extra cruft.

I guess you could avoid using the GlobalStyles import but you'd miss out on setting default colors/borders/fonts and things.

If you're comfortable with that, here are the base styles that you can add yourself via the globalStyles import from styled-components:

`
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  :root {
    -moz-tab-size: 4;
    tab-size: 4;
  }

  html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }

  body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  }

  hr {
    height: 0;
    color: inherit;
  }

  abbr[title] {
    text-decoration: underline dotted;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
  }

  button,
  select {
    text-transform: none;
  }

  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    -webkit-appearance: button;
  }

  ::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  :-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  legend {
    padding: 0;
  }

  progress {
    vertical-align: baseline;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  [type='search'] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  summary {
    display: list-item;
  }

  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0;
  }

  button {
    background-color: transparent;
    background-image: none;
  }

  button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
  }

  fieldset {
    margin: 0;
    padding: 0;
  }

  ol,
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  html {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
  }

  body {
    font-family: inherit;
    line-height: inherit;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
  }

  hr {
    border-top-width: 1px;
  }

  img {
    border-style: solid;
  }

  textarea {
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    color: #9ca3af;
  }

  button,
  [role="button"] {
    cursor: pointer;
  }

  table {
    border-collapse: collapse;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    padding: 0;
    line-height: inherit;
    color: inherit;
  }

  pre,
  code,
  kbd,
  samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  @keyframes spin {
      to { 
        transform: rotate(360deg);
      }
    }
  @keyframes ping {
      75%, 100% { 
        transform: scale(2); opacity: 0;
      }
    }
  @keyframes pulse {
      50% { 
        opacity: .5;
      }
    }
  @keyframes bounce {
      0%, 100% { 
        transform: translateY(-25%); animationTimingFunction: cubic-bezier(0.8,0,1,1);
      }
    
      50% { 
        transform: none; animationTimingFunction: cubic-bezier(0,0,0.2,1);
      }
    }
* {
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
  }
* {
  --tw-shadow: 0 0 #0000; }
`;

[kelvindecosta]

Thanks for the reply @ben-rogerson!

I decided to keep the GlobalStyles component because I have plans to use some of the animations.

Thank you for your help and for this amazing utility!