{"id":20100911,"url":"https://github.com/cssobj/babel-plugin-transform-cssobj","last_synced_at":"2026-05-10T13:22:08.635Z","repository":{"id":57157502,"uuid":"76645543","full_name":"cssobj/babel-plugin-transform-cssobj","owner":"cssobj","description":"Babel plugin to transform css into cssobj (CSS in JS solution), map class names into cssobj localized names","archived":false,"fork":false,"pushed_at":"2016-12-24T01:30:31.000Z","size":40,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-03T09:17:13.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cssobj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-16T10:38:33.000Z","updated_at":"2018-02-01T23:18:20.000Z","dependencies_parsed_at":"2022-09-07T20:50:23.448Z","dependency_job_id":null,"html_url":"https://github.com/cssobj/babel-plugin-transform-cssobj","commit_stats":null,"previous_names":["cssobj/babel-plugin-transform-cssobj-jsx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssobj%2Fbabel-plugin-transform-cssobj","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssobj%2Fbabel-plugin-transform-cssobj/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssobj%2Fbabel-plugin-transform-cssobj/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssobj%2Fbabel-plugin-transform-cssobj/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cssobj","download_url":"https://codeload.github.com/cssobj/babel-plugin-transform-cssobj/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241541451,"owners_count":19979121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T17:22:10.688Z","updated_at":"2026-05-10T13:22:03.605Z","avatar_url":"https://github.com/cssobj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-transform-cssobj\nBabel plugin to transform css into [cssobj][] (CSS in JS solution), map class names into cssobj localized names\n\n[![Join the chat at https://gitter.im/css-in-js/cssobj](https://badges.gitter.im/css-in-js/cssobj.svg)](https://gitter.im/css-in-js/cssobj)\n[![Build Status](https://travis-ci.org/cssobj/babel-plugin-transform-cssobj.svg?branch=master)](https://travis-ci.org/cssobj/babel-plugin-transform-cssobj)\n[![Coverage Status](https://coveralls.io/repos/github/cssobj/babel-plugin-transform-cssobj/badge.svg?branch=master)](https://coveralls.io/github/cssobj/babel-plugin-transform-cssobj?branch=master)\n[![npm](https://img.shields.io/npm/v/babel-plugin-transform-cssobj.svg \"Version\")](https://www.npmjs.com/package/cssobj)\n\n## Usage\n\n1. Install\n\n  ``` bash\n  npm install --save-dev babel-plugin-transform-cssobj\n  ```\n\n2. In your `.babelrc`:\n\n  ``` json\n  {\n    \"plugins\": [\"transform-cssobj\"]\n  }\n  ```\n\n3. **Write CSS as normal, Wrap JSX in result.mapClass()**\n\n    ``` javascript\n    const result = CSSOBJ`\n\n    ---\n    # YAML as config\n    plugins:\n      - default-unit: px\n      - flexbox\n    ---\n\n    // support inline comment in style\n    body { color: red; font-size:12; }\n\n    .container {\n      display: flex;\n      height: ${ getWindowHeight() };\n\n      // nest selector\n      .item {\n        flex: 1; width: 100; height: ${ v=\u003e v.prev ? v.prev + 1 : 200 };\n        a {\n          color: red;\n          \u0026:hover { color: blue; }\n        }\n      }\n    }\n    `\n\n    const html = result.mapClass(\n      \u003cdiv class='container'\u003e\n        \u003cdiv class='item'\u003e\n        \u003ca class='!news item active'\u003elink text\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e\n    )\n    ```\n\n    Which transform into below code:\n\n    ``` javascript\n    import cssobj from 'cssobj';\n    import cssobj_plugin_default_unit from 'cssobj-plugin-default-unit';\n    import cssobj_plugin_flexbox from 'cssobj-plugin-flexbox';\n    const result = cssobj({\n      body: {\n        color: 'red',\n        fontSize: 12\n      },\n      '.container': {\n        display: 'flex',\n        height: getWindowHeight(),\n        '.item': {\n          flex: 1,\n          width: 100,\n          height: v =\u003e v.prev ? v.prev + 1 : 200,\n          a: {\n            color: 'red',\n            '\u0026:hover': {\n              color: 'blue'\n            }\n          }\n        }\n      }\n    }, {\n      plugins: [cssobj_plugin_default_unit('px'), cssobj_plugin_flexbox()]\n    });\n\n    const html = \u003cdiv class={result.mapClass('container')}\u003e\n            \u003cdiv class={result.mapClass('item')}\u003e\n            \u003ca class={result.mapClass('!news item active')}\u003elink text\u003c/a\u003e\u003c/div\u003e\u003c/div\u003e;\n    ```\n\n  **Note**: According to [cssobj][] `mapClass` rule, the `!news` will become `news` and not localized (aka keep AS IS).\n\n## More Usage\n\n  This plugin transform the below formats:\n\n  - **result.mapClass(JSX)**\n\n  - **result.mapName(JSX)** (alias of result.mapClass)\n\n  - **mapName(JSX)** (function reference of result.mapClass)\n\n\n  If your existing code already has the form, .e.g:\n\n  ```Javascript\n  // existing code, you don't want below to transform\n  myObj.mapClass(\u003cdiv className='abc'\u003eshould not be transformed\u003c/div\u003e)\n  ```\n\nYou have two way to escape the transform\n\n1. Change the original method call as `myObj['mapClass']`, that way this plugin don't touch it\n\n2. Pass **plugin option** `mapName` to use other name rather than `mapClass`\n\n  ``` json\n  {\n    \"plugins\": [ [\"transform-cssobj\", {\"mapName\": \"makeLocal\"}] ]\n  }\n  ```\n\n  Then you can use `makeLocal` instead of `mapClass`, as a alias property of [cssobj][] result\n\n  **Notice**: `makeLocal` **must not exists** in result object to avoid conflict\n\n  ```javascript\n  // below will be transformed, using alias property\n  style.makeLocal( \u003cdiv className='nav'\u003e\u003c/div\u003e )\n  // \u003cdiv className={ style.mapClass('nav') }\u003e\u003c/div\u003e\n\n  // your existing code keep untouched\n  myObj.mapClass( \u003cdiv className='abc'\u003e )\n  ```\n\n## More about mapName\n\n  If you discard the [cssobj][] result part, then the `mapName` is not alias, it's a real function\n\n  **Notice**: `makeLocal` **must exists** in your scope, it will be kept as real function\n\n  ```javascript\n  // makeLocal is not alias, it's have to be assigned\n  const makeLocal = style.mapClass\n\n  // will inject to className, shorter code\n  makeLocal( \u003cdiv className='nav'\u003e\u003c/div\u003e )\n  // \u003cdiv className={ makeLocal('nav') }\u003e\u003c/div\u003e\n  ```\n\n  See, all the className have a shorter code, that reduced the bundle size and have better pref\n\n## Option for import names\n\n  Normally the default import name of `import cssobj from 'cssobj'` declear should be ok, but if the `cssobj` have conflicts, pass below option in `.babelrc`\n\n  ```json\n  {\n    \"plugins\": [ [\"transform-cssobj\",\n    {\n    \"mapName\": \"makeLocal\",\n    \"tag\": \"MYTAG\",\n    \"format\": \"less\",\n    \"names\": {\"cssobj\": {\"name\": \"_cssobj\", \"path\": \"./cssobj\"}}\n    } ] ]\n  }\n  ```\n\n## TODO\n\n - [ ] Support JSX Spread\n - [x] Child element should regard to parent [cssobj][] scope\n\n[cssobj]: https://github.com/cssobj/cssobj\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssobj%2Fbabel-plugin-transform-cssobj","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcssobj%2Fbabel-plugin-transform-cssobj","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssobj%2Fbabel-plugin-transform-cssobj/lists"}