@tacc/core-styles
Advanced tools
The shared styles for TACC WMA Workspace Portals & Websites
Installwith any package manager e.g.:
npm install @tacc/core-stylesyarn add @tacc/core-stylesImport stylesheets of either type:
/dist/src/lib/_importsPlease review the plugins expected.
require('core-styles').buildStylesheetsconst 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-stylesUsage: 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 buildUsage: 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 <path> parse source at which path¹
-o, --output <path> output CSS files to which path¹
-v, --verbose print more info during build process
-c, --custom-configs <paths...> extend base config with YAML files²³
-b, --build-id <identifier> any value to identify the build (default: version of app)
-m, --base-mirror-dir <path> 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/...".
(initially) Install dependencies:
npm ci
(optional) Make changes to /src/lib files.
Build the styles*:
npm run build:css
Build and preview the styles*:
npm start
(to debug) Review output in respective /dist or /demo files.*
* Stylesheets are built from source files in src/lib directory to compiled files in dist directory.
Build stylesheets and build static demo:
npm run build
Run the static demo:
npx serve demo
Web page will live-reload on demo build, but not on change of source files.
Open the web interface. The build command will output the URL (and may even open it for you).
Run each of these commands in its own terminal.
Build stylesheets and re-build on change:
npm run watch
Run the auto-refresh demo:
npm run start
Web page will live-reload twice on change of source files. The second reload will show changes.
npm run build:css
npm run build:css -- --build-id="..."
All testing is done manually.
The Core Styles are not independently deployed.
Currently, the demo is served by Core CMS (since v3.9.0).
Later, the demo may be deployed indpendently and core-styles.….css served from a CDN.
We use a modifed version of GitFlow as our development workflow. Our development site (accessible behind the TACC Network) is always up-to-date with main, while the production site is built to a hashed commit tag.
task/ for features and updatesbug/ for bugfixesfix/ for hotfixesSign your commits (see this link for help).
Only authorized team members may publish.
npm login.CHANGELOG.md.npm version N.N.N.npm run build:css --build-id=vN.N.N.npm publish --access public.Notice: Project build will automatically occur before publish.
[2.0.0] - 2023-02-28: Font Sizes & Headings, New Patterns & Classes & Clients
<summary> tag 9984174o- patterns from base to cms (#119)<main> (#103)<strong> and <b> selectors lacked & 00d182b<figure> shrink ee96b93<dl>'s (#109)FAQs
CSS source and processor for TACC Core-CMS and Core-Portal.
The npm package @tacc/core-styles receives a total of 152 weekly downloads. As such, @tacc/core-styles popularity was classified as not popular.
We found that @tacc/core-styles demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.