npmpackage.info

Gathering detailed insights and metrics for babel-plugin-transform-cssobj-jsx

Other packages similar to babel-plugin-transform-cssobj-jsx

babel-plugin-transform-cssobj

3.0.2

Babel plugin to transform css into cssobj (CSS in JS engine), map class names into cssobj localized names

babel-plugin-transform-cssobj-jsx

Babel plugin to transform css into cssobj (CSS in JS solution), map class names into cssobj localized names

2.1.0

MIT

JavaScript

537.00 B

1,504 3

Installations

npm install babel-plugin-transform-cssobj-jsx

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

6.9.1

NPM Version

3.10.9 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

JavaScript

JavaScript (100%)

Developer

cssobj

Download Statistics

Total Downloads

1,504

Last Day

Last Week

Last Month

Last Year

131

GitHub Statistics

1 Stars

25 Commits

2 Watching

1 Branches

1 Contributors

Bundle Size

0.98 kB

Minified

537.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

2.1.0

Package Id

babel-plugin-transform-cssobj-jsx@2.1.0

Size

3.00 kB

NPM Version

3.10.9

Node Version

6.9.1

Total Downloads

Cumulative downloads

Total Downloads

1,504

Last day

Compared to previous day

Last week

-70%

Compared to previous week

Last month

27.3%

Compared to previous month

Last year

-20.6%

131

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

babel-plugin-syntax-jsx

Dev Dependencies

babel-core chai coveralls gulp gulp-bump mocha mocha-lcov-reporter

Versions

babel-plugin-transform-cssobj-jsx

Babel plugin to transform class names into cssobj localized names, easily transform existing code into cssobj.

Usage

Install

1npm install --save-dev babel-plugin-transform-cssobj-jsx

In your .babelrc:

1{
2  "plugins": ["transform-cssobj-jsx"]
3}

Wrap your JSX in result.mapClass()

1const style = cssobj(obj)
2
3const html = style.mapClass(
4  <div className='container'>
5    <div className={func()}>
6    <p className='!news item active'> </p></div></div>
7)

Which transform into below code:

1const html = (
2  <div className={style.mapClass('container')}>
3    <div className={style.mapClass(func())}>
4    <p className={style.mapClass('!news item active')}> </p></div></div>
5)

Note: According to cssobj mapClass rule, the !news will become news and not localized (aka keep AS IS).

More Usage

This plugin transform the below formats:

result.mapClass(JSX)
result.mapName(JSX) (alias of result.mapClass)
mapName(JSX) (function reference of result.mapClass)

If your existing code already has the form, .e.g:

1// existing code, you don't want below to transform
2myObj.mapClass(<div className='abc'>should not be transformed</div>)

You have two way to escape the transform

Change the original method call as myObj['mapClass'], that way this plugin don't touch it
Pass plugin option mapName to use other name rather than mapClass

1{
2  "plugins": [ ["transform-cssobj-jsx", {"mapName": "makeLocal"}] ]
3}

Then you can use makeLocal instead of mapClass, as a alias property of cssobj result

Notice: makeLocal must not exists in result object to avoid conflict

1// below will be transformed, using alias property
2style.makeLocal( <div className='nav'></div> )
3// <div className={ style.mapClass('nav') }></div>
4
5// your existing code keep untouched
6myObj.mapClass( <div className='abc'> )

More about mapName

If you discard the cssobj result part, then the mapName is not alias, it's a real function

Notice: makeLocal must exists in your scope, it will be kept as real function

1// makeLocal is not alias, it's have to be assigned
2const makeLocal = style.mapClass
3
4// will inject to className, shorter code
5makeLocal( <div className='nav'></div> )
6// <div className={ makeLocal('nav') }></div>

See, all the className have a shorter code, that reduced the bundle size and have better pref

TODO

Support JSX Spread
Child element should regard to parent cssobj scope

No vulnerabilities found.

10

Binary-Artifacts

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

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

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

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

3

/10

Last Scanned on 2025-01-27

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