How to Disable Inline CSS in Gatsby

How to disable inline CSS in Gatsby?

It seems this is not configurable. I found a solution on Github. Basically in your gatsby-ssr.js rewrite the style elements like this:

export const onPreRenderHTML = ({getHeadComponents}) => {
    if (process.env.NODE_ENV !== 'production')
        return

    getHeadComponents().forEach(el => {
        // Remove inline css.
        if (el.type === 'style') {
            el.type = 'link'
            el.props['href'] = el.props['data-href']
            el.props['rel'] = 'stylesheet'
            el.props['type'] = 'text/css'

            delete el.props['data-href']
            delete el.props['dangerouslySetInnerHTML']
        }
    })
}

Webpack strips tags out of inline SVGs in my stylesheets and I don't know why

use the svgr plugin. For gatsby it's https://www.gatsbyjs.com/plugins/gatsby-plugin-svgr/

Turn svgo on. Try on different svgo plugin configurations: https://nicedoc.io/svg/svgo

Chances that by disabling inlineStyles your issue will be solved

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-svgr',
      options: {
        svgo: true,
        svgoConfig: {
          plugins: [
            { prefixIds: true },
            { inlineStyles: false }
          ],
        },
      },
    },
  ],
}

Refused to apply inline style because it violates the following Content Security Policy directive

You can also relax your CSP for styles by adding style-src 'self' 'unsafe-inline';

"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';" 

This will allow you to keep using inline style in your extension.

Important note

As others have pointed out, this is not recommended, and you should put all your CSS in a dedicated file. See the OWASP explanation on why CSS can be a vector for attacks (kudos to @ KayakinKoder for the link).

How to add inline images using gatsby-image?

Ok I have managed to find the reason why they wouldn't render. Images with display property of inline-block would not render if the width CSS property is not specified.

So after passing the data to the <Img /> component, I have set the width and display styles directly on the <Img /> component itself. So the render function now looks like this:

render={data => {
  const images = data.allFile.edges.map((image, index) => (
    <div className={AccessoryStyles.imageContainer}>
      <Img
        key={index}
        style={{
          maxWidth: image.node.childImageSharp.sizes.presentationWidth,
          width: image.node.childImageSharp.sizes.presentationWidth,
          display: "inline-block",
        }}
        sizes={image.node.childImageSharp.sizes}
      />
    </div>
  ))
  return {images}
 }
}

• You might want to pass a display: flex and flex-wrap: wrap on the parent element of these images to look a bit nicer ;)

How can I use inline images with rich text in Gatsby?

It sounds like you already have the React and Gatsby portions of this figured out, and unless you’re set on modifying the markup, you can solve this with CSS.

Would something like this work? https://codesandbox.io/s/throbbing-leftpad-rlsh3?file=/src/styles.css

.Shout p {
  display: inline;
}

.Shout img {
  display: inline;

  /* Setting the max height of the image
     in ems, so it will scale with the font
     size set in the `.Shout` CSS class.
       You’ll probably want to adjust this
     to roughtly match the x-height or cap height
     of the font you are using. */
  max-height: 0.85em;

  /* If there aren’t spaces in the phrases,
     you might add margins around the images.
     Asjust as you see fit. */
  margin-left: 0.25em;
  margin-right: 0.25em;
}

…where Shout is a CSS class on the React component containing the node (or as in the CodeSandbox example).

const Shout = props => {
  return (
    <div className="Shout">
      <p>If you are</p>
      <img src="https://source.unsplash.com/random/400x300" />
      <p>already intrigued</p>
      <img src="https://source.unsplash.com/random/500x200" />
      <p>and also think about</p>
      <img src="https://source.unsplash.com/random/250x250" />
      <p>while remembering to</p>
      <img src="https://source.unsplash.com/random/400x300" />
    </div>
  );
};

You may need to build on it from here if you have more strict requirements about how the images wrap with the text, but hopefully this helps to get started.

Horizontally lining up images and text on a Gatsby web-page

Stackoverflow: How do I ask a good question? > How to create a Minimal, Reproducible Example

Next time, "clean" your Q (Your issue not really related to react/gatsby/gatsby-plugin-styled-components => this is a pure CSS layout question).

Also, you should "fix" your markup (You use invalid nested lists HTML markup. Copy paste your HTML her: https://validator.w3.org/#validate_by_input).

Before

.eventCalendar {
  width: 100%;
}

.eventCalendar ul {
  text-align: left;
}

.eventCalendar li {
  display: inline-block;
  font-size: 20px;
  padding: 12px;
}

.eventCalendar button {
  background: rgb(148, 88, 199);
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
  color: white;
  font-size: 24pt;
}

<section>
  <li>
    <img src="https://picsum.photos/300/120" alt="thumb"/>
  </li>
  <ul class="eventCalendar">
    <ul>
      <li>29th Aug 2020</li>
      <li>5km - 100km</li>
    </ul>
    <ul>
      <li>BRIGHT RUNNING FESTIVAL</li>
    </ul>
    <ul>
      <li>Virtual</li>
    </ul>
    <button>Details</button>
  </ul>
</section>

---

Related Topics