• About
• Requirements
• Installation
• Usage
• Configuration

• node >= 22.17.0
• bun >= 1.1.0

bun i -D astro-inline-css

npm i -D astro-inline-css

pnpm i -D astro-inline-css

yarn i -D astro-inline-css

In your astro.config.ts file add the following code in integrations:

  import { defineConfig } from 'astro/config';
  import { inlineCss } from 'astro-inline-css'; 

  export default defineConfig({
    integrations: [ inlineCss() ]
  });

Extra settings that can be added.

  import { defineConfig } from 'astro/config';
  import { inlineCss } from 'astro-inline-css'; 

  export default defineConfig({
    integrations: [ 
      inlineCss({
        // prefix path for css, example http://localhost/style.css
        prefixPath?: '',

        // Keep font inline
        inlineFonts?: true,

        // Show logs
        logLevel?: 'silent' | 'error' | 'warn' | 'info',

        // Delete source from css file
        pruneSource?: true,

        // If you use CSP in your web this allow you to generete a hash for the inline css
        csp: true,

        // This allow yo te replace in both html and css the generated hash
        cspHashPlaceholder: 'sha256-INLINE_CSS_HASH'
      }) 
    ]
  });

In case you are using csp in astro this is a good configuration example.

  import { defineConfig } from 'astro/config';
  import { inlineCss } from 'astro-inline-css'; 

  export default defineConfig({
    integrations: [ 
      inlineCss({
        csp: true,
        cspHashPlaceholder: 'sha256-INLINE_CSS_HASH'
      }) 
    ],
    security: {
      csp: {
        styleDirective: {
          hashes: ['sha256-INLINE_CSS_HASH']
        }
      }
    },
  });