# TACC Core Styles
The shared styles for TACC WMA Workspace Portals & Websites
## Known Clients
- [Core CMS], the base CMS code for TACC WMA CMS Websites
- [Core Portal], the base Portal code for TACC WMA CMS Websites
- [Core Components], the UI components for [Core Portal] and [TUP UI]
- [TUP UI], the client code for TACC User Portal
- [TACC Docs], the documentation for TACC
- and, indirectly, [DesignSafe User Guide]
- [Tapis Authenticator], the web server for Tapis v3 auth
- [Hazmapper], a TACC application for geospatial data
- [DesignSafe Portal], the DesignSafe-CI Portal code
## Table of Contents
- [External Project Usage](#external-project-usage)
- [A. Load from a Project](#a-load-from-a-project)
- [B. Install into a Project](#b-install-into-a-project)
- [Local Development Setup](#local-development-setup)
- [Testing](#testing)
- [Deployment](#deployment)
- [Contributing](#contributing)
- [Publishing](#publishing)
- [Bootstrap](#bootstrap)
## External Project Usage
### A. Load from a Project
> [!NOTE]
> This is likely the easier and simpler solution. Try this first.
See [`QUICKSTART.md`](QUICKSTART.md).
### B. Install into a Project
#### Install This Package
1. Install with any package manager e.g.:
- `npm install @tacc/core-styles`
- `yarn add @tacc/core-styles`
2. Import stylesheets of either type:
- pre-compiled, from `/dist`
- source files, from `/src/lib/_imports`
#### Build from Source
##### Via Your Environment's [PostCSS](https://github.com/postcss/postcss#readme)
Please review [the plugins expected](./src/.postcssrc.base.yml).
##### Via Core-Styles API
###### JavaScript
require('core-styles').buildStylesheets
```js
const buildStylesheets = require('core-styles').buildStylesheets;
buildStylesheets(
// Parse CSS files from which directory (required)
`path/to/your/css/src`,
// Output CSS files to which directory (required)
`path/to/put/css/output`,
{
// List of YAML config files (optional)
// (The first file is merged on top of the base config.)
// (Each successive file overwrites the file before it.)
// SEE: https://github.com/postcss/postcss-load-config#postcssrc
customConfigs: [
// The "base" config is `/.postcssrc.base.yml`
`path/to/custom/config/that/extends/base/.postcssrc.yml`,
`path/to/custom/config/that/extends/above/.postcssrc.yml`,
],
// Print more info from build log (optional, default: false)
verbose: true,
// Print version of this software (optional, default: false)
version: true,
// Any value to help identify the build (optional, default: app version)
buildId: process.env.npm_package_version + someUniqueId,
}
);
```
core-styles
```bash
Usage: core-styles [options] [command]
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
build [options] build stylesheets with TACC standard process:
- "post-css" plugins
- custom input path
- custom output path
- custom configs
- prepend build id
help [command] display help for command
```
core-styles build
```bash
Usage: core-styles build [options]
build stylesheets with TACC standard process:
- "post-css" plugins
- custom input path
- custom output path
- custom configs
- prepend build id
Options:
-i, --input parse source at which path¹
-o, --output output CSS files to which path¹
-v, --verbose print more info during build process
-c, --custom-configs extend base config with YAML files²³
-b, --build-id any value to identify the build (default: version of app)
-m, --base-mirror-dir if input folder structure is mirrored, this path is not⁴
-h, --help display help for command
Notes:
¹ Folder structure of "--input-dir" mirrored in "--output-dir" i.e.
given input
- "input_dir/x.css"
- "input_dir/sub_dir_a/y.css"
- "input_dir"
- "input_dir/**/*"
expect output
- "output_dir/x.css"
- "output_dir/sub_dir_a/y.css"
- "output_dir/..." (all files from input not in sub-directories)
- "output_dir/.../..." (all files from input as nested)
² The file formats are like ".postcssrc.yml" from
https://github.com/postcss/postcss-load-config#postcssrc
³ The first file is merged on top of the base config.
Each successive file overwrites the file before it.
⁴ Given '-i "a/b*" -o "x/" -m "a/"' output is "x/b/...".
Given '-i "a/b*" -o "x/" -m "a/b/"' output is "x/...".
Given '-i "a/b*" -o "x/" -m "not-a/"' output is "x/abs-path-to-input/...".
```