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,
  },
}