Skip to main content

@roots/sage

@roots/sage is a preset configuration for the Sage WordPress starter theme.

Installation

yarn add @roots/sage --dev

Generate theme.json

You can generate a theme.json during build using the themeJson function provided by Sage.

Shown with defaults:

bud.config.js
app.wptheme.settings({
color: {
custom: false,
customGradient: false,
},
custom: {
spacing: {},
typography: {'font-size': {}, 'line-height': {}},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
dropCap: false,
},
})

If you just want to modify the defaults rather than provide your own entirely, you can do so with a function.

By default, the callback will supply you with a container of the default theme.json values:

bud.config.js
app.wptheme.settings(theme => {
theme.set('typography.customFontSize', true)
return theme
})

If preferred, you can request a normal object by passing true as an optional second parameter:

bud.config.js
app.wptheme.settings(
theme => ({
...theme,
typography: {
...theme.typography,
customFontSize: true,
},
}),
true,
)

Defining theme.json colors from tailwind.config.js

If generating theme.json with the themeJson function, you can define the theme.json color.palette option from values found in tailwind.config.js.

bud.config.js
app.wpjson.useTailwindColors().enable()

This only works with colors defined under the theme.extend.colors key in tailwind.config.js:

tailwind.config.js
module.exports = {
content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
theme: {
extend: {
colors: {
primary: '#525ddc',
},
},
},
variants: {
extend: {},
},
plugins: [],
}

Linting

Linting with eslint

Install the @roots/bud-eslint extension:

yarn add @roots/bud-eslint --dev

Next, in your theme directory create a eslint.config.js file and include the Sage default eslint config:

module.exports = {
root: true,
extends: ['@roots/eslint-config/sage'],
}

Linting with stylelint

Install the @roots/bud-stylelint extension:

yarn add @roots/bud-stylelint --dev

Next, in your theme directory create a .stylelintrc.js file and include the Sage default stylelint config:

module.exports = {
extends: ['@roots/sage/stylelint-config'],
rules: {
'color-no-invalid-hex': true,
},
}

Usage with Sass

Install the @roots/bud-sass extension:

yarn add @roots/bud-sass --dev

If using stylelint you will need to configure it for sass:

module.exports = {
extends: [
'@roots/sage/stylelint-config',
'@roots/bud-sass/stylelint-config',
],
rules: {
'color-no-invalid-hex': true,
},
}