Private betav0.1.0
Docs
Format developer documentation

CSS Modules

Use CSS Modules for scoped styles in Format Studio documents.

Supported frameworks

FrameworkSupported
React
Vue
HTML

Installation

No additional installation steps required.

Usage

You can use both .module.css|scss files and also Vue's scoped CSS and CSS module support.

CSS module files

Add one or more module stylesheets to your project.

documents
invoice
styles.module.css
styles.module.scss
index.tsx
documents/invoice/styles.module.css
.peach {
	background: peachpuff;
}
documents/invoice/styles.module.scss
.pear {
	$pear: darkseagreen;
	color: $pear;
}

Import and use the styles object in your components.

documents/invoice/index.tsx
import { Document, Layout } from '@format.dev/react'
import css from './styles.module.css'
import scss from './styles.module.scss'

export default function Invoice () {
	return (
		<Document title="Invoice">
			<Layout id="invoice" width={793.71} height={1122.52}>
				<div className={css.peach}>Hey, 🍑</div>
				<div className={scss.pear}>Hey, 🍐</div>
			</Layout>
		</Document>
	)
}

You can use CSS Modules to scope all your individual components' styles.

Add one or more module stylesheets to your project.

documents
invoice
styles.module.css
styles.module.scss
index.vue
documents/invoice/styles.module.css
.peach {
	background: peachpuff;
}
documents/invoice/styles.module.scss
.pear {
	$pear: darkseagreen;
	color: $pear;
}

Import and use the styles object in your components.

documents/invoice/index.vue
<script setup lang="ts">
import { Document, Layout } from '@format.dev/vue'
import css from './styles.module.css'
import scss from './styles.module.scss'
</script>

<template>
	<Document title="Invoice">
		<Layout id="invoice" :width="793.71" :height="1122.52">
			<div :class="css.peach">Hey, 🍑</div>
			<div :class="scss.pear">Hey, 🍐</div>
		</Layout>
	</Document>
</template>

Vue <style module>

You can also use Vue's built-in <style module> syntax.

documents/invoice/index.vue
<script setup lang="ts">
import { Document, Layout } from '@format.dev/vue'
</script>

<template>
	<Document title="Invoice">
		<Layout id="invoice" :width="793.71" :height="1122.52">
			<div :class="$style.peach">Hey, 🍑</div>
		</Layout>
	</Document>
</template>

<style module>
.peach {
	background: peachpuff;
}
</style>

Vue scoped CSS

Although not strictly CSS Modules, we also support Vue's attribute scoped styles in SFCs.

documents/invoice/index.vue
<script setup lang="ts">
import { Document, Layout } from '@format.dev/vue'
</script>

<template>
	<Document title="Invoice">
		<Layout id="invoice" :width="793.71" :height="1122.52">
			<div class="peach">Hey, 🍑</div>
		</Layout>
	</Document>
</template>

<style scoped>
.peach {
	background: peachpuff;
}
</style>
Was this page helpful?