npmpackage.info

Gathering detailed insights and metrics for style-to-object

Other packages similar to style-to-object

copy-descriptor

0.1.1

Copy a descriptor from object A to object B

run-parallel

1.2.0

Run an array of functions in parallel

object-is

1.1.6

ES2015-compliant shim for Object.is - differentiates between -0 and +0

json-schema-traverse

1.0.0

Traverse JSON Schema passing each schema object to callback

Gathering detailed insights and metrics for style-to-object

style-to-object

📝 Parse CSS inline style to JavaScript object.

1.0.8

MIT

TypeScript

1.09 kB

1,077,085,464 7.4

Installations

npm install style-to-object

Pull Requests

Open

0

Total

469

Closed

21

Merged

448

Issues

Open

1

Total

6

Closed

5

Releases

v1.0.8

Published on 11 Sept 2024

v1.0.7

Published on 28 Aug 2024

v1.0.6

Published on 27 Mar 2024

v1.0.5

Published on 01 Dec 2023

v1.0.4

Published on 31 Oct 2023

v1.0.3

Published on 20 Oct 2023

View all 20 releases

Developer

remarkablemark

Developer Guide

BETA

Module System

CommonJS, ESM

Min. Node Version

Typescript Support

Yes

Node Version

20.17.0

NPM Version

10.8.2 Statistics

54 Stars

685 Commits

3 Forks

1 Watching

1 Branches

4 Contributors

Updated on 27 Nov 2024

Bundle Size

2.14 kB

Minified

1.09 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (71.82%)

JavaScript (28.18%)

Total Downloads

Cumulative downloads

Total Downloads

1,077,085,464

Last day

-1.7%

1,490,042

Compared to previous day

Last week

7,827,166

Compared to previous week

Last month

11.9%

32,807,303

Compared to previous month

Last year

15.4%

345,597,294

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

style-to-object

Parse CSS inline style to JavaScript object:

1import parse from 'style-to-object';
2
3parse('color: #C0FFEE; background: #BADA55;');

Output:

1{ color: '#C0FFEE', background: '#BADA55' }

JSFiddle | Replit | Examples

Installation

NPM:

1npm install style-to-object --save

Yarn:

1yarn add style-to-object

CDN:

1<script src="https://unpkg.com/style-to-object@latest/dist/style-to-object.min.js"></script>
2<script>
3  window.StyleToObject(/* string */);
4</script>

Usage

Import with ES Modules:

1import parse from 'style-to-object';

Require with CommonJS:

1const parse = require('style-to-object').default;

Parse single declaration:

1parse('line-height: 42');

Output:

1{ 'line-height': '42' }

Parse multiple declarations:

1parse(`
2  border-color: #ACE;
3  z-index: 1337;
4`);

Output:

1{ 'border-color': '#ACE', 'z-index': '1337' }

Parse unknown declarations:

1parse('answer: 42;');

Output:

1{ 'answer': '42' }

Invalid declarations/arguments:

1parse(`
2  top: ;
3  right: 1em;
4`); // { right: '1em' }
5
6parse();        // null
7parse(null);    // null
8parse(1);       // null
9parse(true);    // null
10parse('top:');  // null
11parse(':12px'); // null
12parse(':');     // null
13parse(';');     // null
14
15parse('top'); // throws Error
16parse('/*');  // throws Error

Iterator

If the 2nd argument is a function, then the parser will return null:

1parse('color: #f00', () => {}); // null

But the function will iterate through each declaration:

1parse('color: #f00', (name, value, declaration) => {
2  console.log(name);        // 'color'
3  console.log(value);       // '#f00'
4  console.log(declaration); // { type: 'declaration', property: 'color', value: '#f00' }
5});

This makes it easy to customize the output:

1const style = `
2  color: red;
3  background: blue;
4`;
5const output = [];
6
7function iterator(name, value) {
8  output.push([name, value]);
9}
10
11parse(style, iterator);
12console.log(output); // [['color', 'red'], ['background', 'blue']]

Migration

v1

Migrated to TypeScript. Iterator excludes Comment. CommonJS requires the .default key:

1const parse = require('style-to-object').default;

Release

Release and publish are automated by Release Please.

Special Thanks

License

MIT

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Security-Policy

Determines if the project has published a security policy.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

10

SAST

Determines if the project uses static code analysis.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

5

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/remarkablemark/style-to-object/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/remarkablemark/style-to-object/build.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/remarkablemark/style-to-object/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commitlint.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/remarkablemark/style-to-object/commitlint.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commitlint.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/remarkablemark/style-to-object/commitlint.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-please.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/remarkablemark/style-to-object/release-please.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-please.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/remarkablemark/style-to-object/release-please.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-please.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/remarkablemark/style-to-object/release-please.yml/master?enable=pin
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

Score

7.4

/10

Last Scanned on 2024-11-18

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

Other packages similar to style-to-object

Other packages similar to style-to-object

style-to-object

Installations

Pull Requests

0

469

21

448

Issues

1

6

5

Releases

Developer

Developer Guide

CommonJS, ESM

Yes

20.17.0

10.8.2

Statistics

Bundle Size

2.14 kB

1.09 kB

Languages

Total Downloads

1,077,085,464

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

style-to-object

Installation

Usage

Iterator

Migration

v1

Release

Special Thanks

License

10

10

10

10

10

10

10

9

5

0

0

0

7.4

/10