{"id":30180955,"url":"https://github.com/streamich/css-light","last_synced_at":"2025-08-12T08:06:33.929Z","repository":{"id":66051538,"uuid":"61916407","full_name":"streamich/css-light","owner":"streamich","description":"Light-weight module to write CSS in JavaScript","archived":false,"fork":false,"pushed_at":"2018-01-05T09:31:32.000Z","size":16,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T04:06:25.977Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/streamich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-06-24T22:47:41.000Z","updated_at":"2023-01-18T00:09:23.000Z","dependencies_parsed_at":"2023-02-22T01:16:25.289Z","dependency_job_id":null,"html_url":"https://github.com/streamich/css-light","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"09405e9fd97f053c40648265f12fa4adecfb7424"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/streamich/css-light","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fcss-light","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fcss-light/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fcss-light/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fcss-light/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/streamich","download_url":"https://codeload.github.com/streamich/css-light/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fcss-light/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269693450,"owners_count":24460230,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-08-12T08:06:15.988Z","updated_at":"2025-08-12T08:06:33.920Z","avatar_url":"https://github.com/streamich.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-light\r\n\r\nSuper light-weight package to write CSS in JavaScript. At only 100 lines\r\nof code this module has everything you need to generate CSS from plain\r\nJavaScript objects on the server or client.\r\n\r\n```js\r\nvar css = require('css-light');\r\nconsole.log(css.css({\r\n    '.block': {\r\n        border: '1px solid red',\r\n    }\r\n}));\r\n```\r\n\r\nThis will generate:\r\n\r\n    .block{border:1px solid red}\r\n\r\n\r\n## Variables\r\n\r\n```js\r\nvar fontStack = 'Helvetica, sans-serif';\r\nvar primaryColor = '#333';\r\nconsole.log(css.css({\r\n    body: {\r\n        font: `100% ${fontStack}`,\r\n        color: primaryColor,\r\n    }\r\n}));\r\n```\r\n\r\nOutput:\r\n\r\n    body{font:100% Helvetica, sans-serif;color:#333}\r\n\r\n## Nesting\r\n\r\n```js\r\nconsole.log(css.css({\r\n    nav: {\r\n        ul: {\r\n            mar: 0,\r\n            pad: 0,\r\n            lis: 'none',\r\n        },\r\n        li: {d: 'inline-block'},\r\n        a: {\r\n            d: 'block',\r\n            pad: '6px 12px',\r\n            ted: 'none',\r\n        }\r\n    }\r\n}));\r\n```\r\n\r\nOutput:\r\n\r\n    nav ul{margin:0;padding:0;list-style:none}\r\n    nav li{display:inline-block}\r\n    nav a{display:block;padding:6px 12px;text-decoration:none}\r\n\r\n\r\n## Mixins\r\n\r\n```js\r\nfunction borderRadius(radius) {\r\n    return {\r\n        '-webkit-border-radius': radius,\r\n        '-moz-border-radius': radius,\r\n        '-ms-border-radius': radius,\r\n        'border-radius': radius,\r\n    };\r\n}\r\nconsole.log(css.css({\r\n    '.box': borderRadius('10px'),\r\n    '.another-box': [\r\n        borderRadius('20px'),\r\n        {\r\n            'background': 'red',\r\n            '.child': {\r\n                'font-size': '12pt',\r\n            }\r\n        }\r\n    ],\r\n}));\r\n```\r\n\r\nOutput:\r\n\r\n    .box{-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;border-radius:10px}\r\n    .another-box{-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;border-radius:20px;background:red}\r\n    .another-box .child{font-size:}\r\n\r\n\r\n## Extend/Inheritance\r\n\r\n```js\r\n    var message = {\r\n        bd: '1px solid #ccc',\r\n        pad: '10px',\r\n        col: '#333',\r\n    };\r\n    console.log(css.css({\r\n        '.message': message,\r\n        '.success': css.extend({}, message, {\r\n            'border-color': 'green',\r\n        }),\r\n        '.error': [\r\n            message,\r\n            {\r\n                'border-color': 'red',\r\n            }\r\n        ],\r\n    }));\r\n```\r\n\r\nOutput:\r\n\r\n    .message{border:1px solid #ccc;padding:10px;color:#333}\r\n    .success{border:1px solid #ccc;padding:10px;color:#333;border-color:green}\r\n    .error{border:1px solid #ccc;padding:10px;color:#333;border-color:red}\r\n\r\n\r\n## Operators\r\n\r\nUse standard JavaScript to do calculations `*`, `/`, `+`, `-`:\r\n\r\n```js\r\nconsole.log(css.css({\r\n    'article[role=\"main\"]': {\r\n        fl: 'left',\r\n        w: 600 / 960 * 100 + '%',\r\n    },\r\n    'aside[role=\"complementary\"]': {\r\n        fl: 'right',\r\n        w: 300 / 960 * 100 + '%',\r\n    }\r\n}));\r\n```\r\n\r\nOutput:\r\n    \r\n    article[role=\"main\"]{float:left;width:62.5%}\r\n    aside[role=\"complementary\"]{float:right;width:31.25%}\r\n\r\n\r\n## `\u0026` Operator\r\n\r\nThe `\u0026` operator is replaced by the parent selector:\r\n\r\n```js\r\nconsole.log(css.css({\r\n    '.parent': {\r\n        '.child': { color: 'red'},\r\n        '\u0026 .child': { color: 'red'},\r\n        '\u0026.child': { color: 'red'},\r\n    }\r\n}));\r\n```\r\n\r\nOutput:\r\n\r\n    .parent .child{color:red}\r\n    .parent .child{color:red}\r\n    .parent.child{color:red}\r\n\r\n\r\n## Atoms\r\n\r\n`css-light` comes with a short list of *atoms* for commonly used CSS properties,\r\nfor example, use `pad` instead of `padding`:\r\n\r\n```js\r\nconsole.log(css.css({\r\n    'div': {\r\n        padding: '0 0 0 0',\r\n        pad: '0 0 0 0',\r\n    }\r\n}));\r\n```\r\n\r\nOutput:\r\n\r\n    div{padding:0 0 0 0;padding:0 0 0 0}\r\n\r\nPrint the full list of *atoms*:\r\n\r\n```js\r\nconsole.log(css.atoms);\r\n```\r\n\r\nOutput:\r\n    \r\n    {\r\n        d:      'display',\r\n        mar:    'margin',\r\n        mart:   'margin-top',\r\n        marr:   'margin-right',\r\n        marb:   'margin-bottom',\r\n        marl:   'margin-left',\r\n        pad:    'padding',\r\n        padt:   'padding-top',\r\n        padr:   'padding-right',\r\n        padb:   'padding-bottom',\r\n        padl:   'padding-left',\r\n        bd:     'border',\r\n        bdt:    'border-top',\r\n        bdr:    'border-right',\r\n        bdb:    'border-bottom',\r\n        bdl:    'border-left',\r\n        bdrad:  'border-radius',\r\n        col:    'color',\r\n        op:     'opacity',\r\n        bg:     'background',\r\n        bgc:    'background-color',\r\n        fz:     'font-size',\r\n        fs:     'font-style',\r\n        fw:     'font-weight',\r\n        ff:     'font-family',\r\n        lh:     'line-height',\r\n        bxz:    'box-sizing',\r\n        w_bxz:  '-webkit-box-sizing',\r\n        m_bxz:  '-moz-box-sizing',\r\n        cur:    'cursor',\r\n        ov:     'overflow',\r\n        pos:    'position',\r\n        ls:     'list-style',\r\n        ta:     'text-align',\r\n        td:     'text-decoration',\r\n        fl:     'float',\r\n        w:      'width',\r\n        h:      'height',\r\n        trs:    'transition',\r\n        out:    'outline',\r\n        vis:    'visibility',\r\n        ww:     'word-wrap',\r\n        con:    'content',\r\n    }\r\n\r\n\r\n## Media Queries\r\n\r\n```js\r\n// ## Media queries\r\nconsole.log(css.css({\r\n    '@media (max-width: 600px)': {\r\n        '.facet_sidebar': {\r\n            display: 'none'\r\n        }\r\n    }\r\n}));\r\n```\r\n\r\nOutput:\r\n\r\n    @media (max-width: 600px){\r\n        .facet_sidebar{display:none}\r\n    }\r\n\r\n## Nested lists\r\n\r\n```js\r\nconsole.log(css.css({\r\n    'section, div': {\r\n        'h1, h2': {\r\n            'span, .light': {\r\n                td: 'none'\r\n            },\r\n        },\r\n    },\r\n}));\r\n```\r\n\r\nOutput:\r\n\r\n    section h1 span, div h1 span,section  h2 span, div  h2 span,section h1  .light, div h1  .light,section  h2  .light, div  h2  .light{text-decoration:none}\r\n\r\n// ## Overwrite\r\n\r\nAdd multiple definitions of the same property: \r\n\r\n```js\r\nconsole.log(css.css({\r\n    div: [\r\n        {boder: '1px solid red'},\r\n        {boder: '1px solid green'},\r\n    ]\r\n}));\r\n```\r\n\r\nOutput:\r\n\r\n    div{boder:1px solid red;boder:1px solid green}\r\n    \r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamich%2Fcss-light","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstreamich%2Fcss-light","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamich%2Fcss-light/lists"}