Gathering detailed insights and metrics for @netlify/classnames-template-literals
Gathering detailed insights and metrics for @netlify/classnames-template-literals
Small utility to format long classnames with template literals
Installations
npm install @netlify/classnames-template-literalsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, UMD
Node Version
12.14.1
NPM Version
6.13.4
Languages
1
JavaScript
JavaScript (100%)
Developer
netlify
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
75 Stars
11 Commits
3 Forks
4 Watchers
3 Branches
7 Contributors
Updated on Dec 14, 2024
Maintainers
19
Package Meta Information
Latest Version
1.0.3
Package Id
@netlify/classnames-template-literals@1.0.3
Unpacked Size
4.83 kB
Size
2.18 kB
File Count
7
NPM Version
6.13.4
Node Version
12.14.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
4
classnames-template-literals
Utility originally created to deal with long Tailwind classnames.
To make our code more readable, we extract our Tailwind classes into variables, for example:
1const twClasses = ` 2 tw-sr-only 3 focus:tw-not-sr-only 4 tw-bg-teal-darker 5 tw-text-white 6 tw-block 7 tw-text-sm 8 tw-l-0 9`;
The issue with writing classes this way is that they are rendered as-is in the DOM.
Example:
1<p 2 class=" 3 tw-sr-only 4 focus:tw-not-sr-only 5 tw-bg-teal-darker 6 tw-text-white 7 tw-block 8 tw-text-sm 9 tw-l-0" 10> 11 Hello world 12</p>
Using the ctl util formats classnames so they are rendered in a more standard way in the DOM.
Example:
1<p class="tw-sr-only focus:tw-not-sr-only tw-bg-teal-darker tw-text-white tw-block tw-text-sm tw-l-0"> 2 Hello world 3</p>
Installation
1npm install @netlify/classnames-template-literals
Usage
Wrap your classnames inside ctl.
1import ctl from "@netlify/classnames-template-literals"; 2 3const buttonClasses = ctl(` 4 bg-black 5 text-white 6 p-1 7 rounded-sm 8`);
You can also use conditional classes:
1import ctl from "@netlify/classnames-template-literals"; 2 3const buttonClasses = ctl(` 4 bg-black 5 text-white 6 p-1 7 rounded-sm 8 ${someState && "bg-pink"} 9`);
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/netlify/.github/SECURITY.md:1
- Info: Found linked content: github.com/netlify/.github/SECURITY.md:1
- Warn: One or no descriptive hints of disclosure, vulnerability, and/or timelines in security policy
- Info: Found text in security policy: github.com/netlify/.github/SECURITY.md:1
Reason
Found 2/8 approved changesets -- score normalized to 2
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/fossa.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/netlify/classnames-template-literals/fossa.yml/main?enable=pin
- Info: 0 out of 1 GitHub-owned GitHubAction dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/fossa.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 5 are checked with a SAST tool
Reason
25 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
3.2
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More