Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
@clearkit/hype
Advanced tools
This repo takes the Tailwind config and the CSS variables stylesheet from the
published clearkit-core
npm package and uses them to generate a complete
CSS library, named clearkit-hype
.
This CSS library includes atomic CSS utility classes, informed by the variables
from clearkit-core.css
. It also uses these utility classes to construct helper
classes with the @apply
Tailwind function.
The intention would be to publish clearkit-hype
as a package on NPM, and make
the compiled stylesheet available on a CDN.
The build process in this repo also generates a front-end that documents the classes in the library and demos the blueprints created by helper classes.
$ yarn
.$ yarn start
to build clearkit-hype.css
, watch for changes, and serve
the front-end at http://localhost:5678
.Running $ yarn start
kicks off the following process:
npm-run-all -s clean -p postcss:watch parcel:serve
PostCSS takes the Tailwind config from /clearkit.config.js
and builds the src/css
directory, importing the CSS helpers from src/css/helpers
, inlining them in
src/css/clearkit-hype.css
and then running the Tailwind directives to compile
to a single stylesheet named src/clearkit-hype.css
.
Parcel then serves the front-end at http://localhost:5678
and reloads when it
detects changes in the CSS and HTML.
By default clearkit-hype
imports the Tailwind config from clearkit-core
and uses it for it's own Tailwind config file at /clearkit.config.js
.
To replace or override properties from clearkit-core
you can edit this file and
refer to the Tailwind docs. For example,
to add a magenta color that could be used with .text-my-custom-color
and
.bg-my-custom-color
you could write the following -
theme: {
colors: {
"my-custom-color": "#ff00ff",
...clearKitCore.theme.colors
}
}
To compose new helper classes that can be used in blueprints, you could create
src/css/helpers/_ck-panel.css
and src/blueprints/_ck-panel.html
.
In _ck-panel.css
you would write -
.ck-panel {
@apply bg-white shadow rounded-lg;
}
And you would document it's usage in _ck-panel.html
with -
<div class="ck-panel">
Here is my panel
</div>
To add the blueprint to the front-end you would add the new partial to
src/blueprints.html
as an include, which would get automatically get compiled
by posthtml
as part of the parcel
build process -
<include src="blueprints/_ck-panel.html"></include>
FAQs
ClearKit Hype
The npm package @clearkit/hype receives a total of 4 weekly downloads. As such, @clearkit/hype popularity was classified as not popular.
We found that @clearkit/hype demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.