Common Sass partials and stylesheets used across Threespot WordPress projects.

Loaded directly from GitHub by tag — no npm registry involved.

{
  "dependencies": {
    "@threespot/wp-base-styles": "github:Threespot/wp-base-styles#v0.1.0"
  }
}

Pin to a tag (immutable) or a semver range:

"@threespot/wp-base-styles": "github:Threespot/wp-base-styles#semver:^0.1.0"

The package ships four standalone entry points, each meant to be compiled into a stylesheet enqueued in a different WP context:

From a consumer's Sass entry point:

// Front-end bundle
@use '@threespot/wp-base-styles/main';

// Or compile any of the context-specific entry points directly
@use '@threespot/wp-base-styles/gutenberg';
@use '@threespot/wp-base-styles/admin-all';
@use '@threespot/wp-base-styles/admin-fields';

// Pick individual partials
@use '@threespot/wp-base-styles/base/fonts';

// Sass variables (Gutenberg breakpoints, admin sidebar dimensions)
@use '@threespot/wp-base-styles/vars' as *;

// Sass mixins (no-wrap, etc.)
@use '@threespot/wp-base-styles/mixins' as *;

main.scss            Front-end entry point (forwards vars, base, helpers)
gutenberg.scss       Block editor entry point
admin-all.scss       Admin-wide entry point
admin-fields.scss    Editable-fields admin entry point

base/                Element defaults (admin-bar, fonts)
helpers/             Utility classes (javascript-helpers, what-input)
vars/                Sass variables (Gutenberg breakpoints, admin sidebar)
mixins/              Sass mixins

Each folder has an _index.scss that forwards its partials. main.scss forwards vars, base, and helpers — mixins/ is opt-in via explicit @use since mixins emit no CSS until included.

npm install        # installs deps and sets up the pre-commit hook
npm run lint:css   # lint all .scss files
npm run lint:css:fix

Stylelint runs automatically on staged .scss files via husky + lint-staged before each commit.

Tag the commit you want consumers to be able to pin to:

git tag v0.1.0
git push --tags

Consumers update by bumping the tag in their package.json and running npm install.