![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@instructure/brandable_css
Advanced tools
Readme
A tool for compiling SASS source files into different variants that have different values for their variables. This can be used, for example, to provide a high-contrast mode for your styles.
---
paths:
# path to where static assets referenced in stylesheets through url() should
# be resolved from, like images or fonts
public_dir: public
# the base directory for all your source SASS stylesheets:
#
# - included in sass's "includePaths" so you can include relative to it
# - must contain a "variants/${variant}" folder for each defined variant
# wherein that variant can define a "_variant_variables.scss" stylseheet
# to be used when compiling that specific variant
# - used as the root when it's necessary to produce relative sass paths
# - used as a target directory in the watch mode; changes to files inside
# will trigger the watcher
#
sass_dir: app/stylesheets
# minimatch/glob pattern to select all the stylesheets to process; note
# that this should not cover the partials, only the bundles that you want
# to generate variants for
#
# this is relative to PWD
all_sass_bundles: './app/stylesheets/**/[^_]*.s[ac]ss'
# path to where the manifest should be generated
bundles_with_deps: public/dist/brandable_css/bundles_with_deps.json
# path to where the internal cache file should be generated; this is used
# internally by brandable_css to tell which stylesheets needs to be
# reprocessed on successive runs
file_checksums: tmp/brandable_css_file_checksums.json
# directory that will contain the processed variant bundle files: this is
# what can be served to the user
output_dir: public/dist/brandable_css
# path to the file that contains the mapping of supported browsers to be
# passed to [autoprefixer], which may look like this:
#
# minimums:
# chrome: 83
# safari: 12
# firefox: 78
#
# [autoprefixer]: https://autoprefixer.github.io/
browsers_yml: config/browsers.yml
Since: v2.0.0
The main output of brandable_css
can be very big and is unfit for inclusion
at runtime (e.g. in your bundle or over an HTTP request.) brandable_css supports
emitting a compact structure that is optimized for runtime inclusion referred
to as an index. An index can be generated for only a subset of the bundles
and requires a little processing to decode it into something usable.
Configuring an index
indices:
name_of_index:
keysz: Integer
path: Filepath
bundles: MinimatchGlob
Structure of an index:
index = Array.<
variants: Array.<String>,
checksums: Map.<
contrivedId: String,
variantChecksums: Array.<Union.<md5: String, Integer>>
>
>
Decoding the structure
variants
is the set of available variants for the bundles contained in the
index.
variantChecksums
is an ordered set: each element corresponds to the variant
defined in the variants
set at that index.
When a variant checksum is defined as a number, it must be a treated as an index into the current bundle's variant checksum set; you can resolve the actual checksum by looking at the element in the set at that index. This is done as an optimization to avoid duplicate strings, which are 10 characters long.
Example index
[
[
"new_styles_normal_contrast",
"responsive_layout_normal_contrast",
"responsive_layout_high_contrast",
"new_styles_high_contrast",
"new_styles_normal_contrast_rtl",
"new_styles_high_contrast_rtl",
"responsive_layout_normal_contrast_rtl",
"responsive_layout_high_contrast_rtl"
],
{
"10": ["cbc4135c8d", 0, 0, 0, "8323e1aa23", 4, 4, 4],
"15": ["16a8653e3f", 0, 0, 0, "e158453b86", 4, 4, 4],
}
]
This index contains variant checksums for 2 bundles for 8 variants. The first
bundle is identified as 10
, this is its "contrived ID" which is equal to the
first @keysz
characters of the MD5 digest of the bundle name. The variant
CSS files for this particular bundle are found at the following paths:
Resolving an ID to the actual bundle name is left to the caller.
bundles_with_deps: ./a.json
you used to get either
a.jsonnested
or a.jsoncompressed
based on what SASS_STYLE indicated, you
now unconditionally get a.json
SASS_STYLE=compressed
when
running brandable_css@instructure/brandable-css
lib/
, minimum required Node is now 12MIT
FAQs
This is what we use to compile sass in canvas-lms with all our variants and custom theme editor css
The npm package @instructure/brandable_css receives a total of 1,097 weekly downloads. As such, @instructure/brandable_css popularity was classified as popular.
We found that @instructure/brandable_css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 22 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.