{"id":13630538,"url":"https://github.com/kamranahmedse/stylos","last_synced_at":"2025-10-25T17:14:01.179Z","repository":{"id":32880225,"uuid":"145046523","full_name":"kamranahmedse/stylos","owner":"kamranahmedse","description":"Webpack plugin to automatically generate and inject CSS utilities to your application","archived":false,"fork":false,"pushed_at":"2023-07-12T00:04:58.000Z","size":367,"stargazers_count":67,"open_issues_count":4,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-25T11:51:33.389Z","etag":null,"topics":["css","css-utilites","webpack","webpack-loader","webpack-plugin"],"latest_commit_sha":null,"homepage":"","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/kamranahmedse.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":"2018-08-16T22:50:49.000Z","updated_at":"2025-05-06T23:15:06.000Z","dependencies_parsed_at":"2024-02-01T20:07:54.852Z","dependency_job_id":"720860fa-e741-469c-9c33-201c84d8d536","html_url":"https://github.com/kamranahmedse/stylos","commit_stats":null,"previous_names":["kamranahmedse/webpack-css-utils"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/kamranahmedse/stylos","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fstylos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fstylos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fstylos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fstylos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kamranahmedse","download_url":"https://codeload.github.com/kamranahmedse/stylos/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamranahmedse%2Fstylos/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265888897,"owners_count":23844527,"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":["css","css-utilites","webpack","webpack-loader","webpack-plugin"],"created_at":"2024-08-01T22:01:46.365Z","updated_at":"2025-10-25T17:14:01.102Z","avatar_url":"https://github.com/kamranahmedse.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n\t\u003cimg height=\"150\" src=\"https://raw.github.com/kamranahmedse/stylos/master/logo.svg?sanitize=true\" alt=\"Stylos - Generate and inject CSS utilities to your application\" /\u003e\n\t\u003cbr\u003e Stylos\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://travis-ci.org/kamranahmedse/stylos\"\u003e\n\t\t\u003cimg src=\"https://img.shields.io/travis/kamranahmedse/stylos/master.svg?style=flat-square\" alt=\"Build Status\"\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://github.com/kamranahmedse/stylos\"\u003e\n\t\t\u003cimg src=\"https://img.shields.io/codecov/c/github/kamranahmedse/stylos.svg?style=flat-square\" alt=\"Codecov\"\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"#\"\u003e\n\t\t\u003cimg src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square\" alt=\"Software License\"\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eWebpack plugin that automatically generates and injects CSS utilities to your application.\u003c/p\u003e\n\n## What is it?\nStylos is a Webpack plugin that automatically generates and injects CSS utilities into your application. All you have to do is specify utility classes on DOM elements; webpack will identify and generate the properties with relevant values and inject them to your application. \n\n![](https://i.imgur.com/cF2pssW.png)\n\nAs you can see, all you have to do is specify the classes having shorthand for the CSS property key, required value and optionally the unit. Stylos will understand it and generate the CSS for you. \n\n![](https://i.imgur.com/XBDrYar.png)\n\u003ch2 align=\"center\"\u003eDon't use it for everything!\u003c/h2\u003e\n\u003cp align=\"center\"\u003eYou should always \u003ca href=\"https://maintainablecss.com/chapters/introduction/\"\u003e prefer to use semantic CSS class names\u003c/a\u003e\u003c/blockquote\u003e\n\nStylos is not meant to be used for everything; you should [**always always** prefer semantic CSS class names](https://maintainablecss.com/chapters/introduction/). The idea behind stylos is to be used for the little UI differences that you may need here and there. For example mostly for me in the cases where there is no clear design specs, or during prototyping or when reusing components, I find myself playing around with margins, paddings etc and it is tedious to modify CSS files every single time and thus for the cases like this I made Stylos to automate the job.\n\n![](https://i.imgur.com/XBDrYar.png)\n\n## Features\n\n- Supports HTML as well as JSX\n- Works well in vanilla JavaScript apps as well as frameworks e.g. Angular, React or Vue.js\n- Plays nicely with `webpack-dev-server` / `webpack serve`\n- Integrates with [html-webpack-plugin](https://npmjs.com/package/html-webpack-plugin)\n- Helps you make those little UI changes without any accidental broken UI \n\n## Supported Shorthands \n\nHere is the the list of known shorthand formulas that you can use in your DOM classes.\n\n| Shorthand | CSS Property     | Example Usage                                    |\n|---------|------------------|--------------------------------------------------|\n| `p`     | `padding`        | `p10` will translate to `padding: 10px`          |\n| `pt`    | `padding-top`    | `pt20` will translate to `padding-top: 20px;`    |\n| `pb`    | `padding-bottom` | `pb10` will translate to `padding-bottom: 10px;` |\n| `pr`    | `padding-right`  | `pr20` will translate to `padding-right: 20px;`  |\n| `pl`    | `padding-left`   | `pl23` will translate to `padding-left: 23px;`   |\n| `m`     | `margin`         | `m20` will translate to `margin: 20px`           |\n| `mt`    | `margin-top`     | `mt20` will translate to `margin-top: 20px;`     |\n| `mb`    | `margin-bottom`  | `mb20` will translate to `margin-bottom: 20px;`  |\n| `ml`    | `margin-left`    | `ml50` will translate to `margin-left: 50px;`    |\n| `mr`    | `margin-right`   | `mr30` will translate to `margin-right: 30px;`   |\n| `w`     | `width`          | `w200` will translate to `width: 200px`          |\n| `h`     | `height`         | `h60` will translate to `height: 60px;`          |\n| `br`    | `border-radius`  | `br5` will translate to `border-radius: 5px;`    |\n| `fs`    | `font-size`      | `fs15` will translate to `font-size: 15px`       |\n| `fw`    | `font-weight`    | `fw400` will translate to `font-weight: 400px`   |\n| `lh`    | `line-height`    | `lh20em` will translate to `line-height: 20em`   |\n| `t`     | `top`            | `t6` will translate to `top: 6px;`               |\n| `l`     | `left`           | `l30` will translate to `left: 30px`             |\n| `b`     | `bottom`         | `b20em` will translate to `bottom: 20em;`        |\n| `r`     | `right`          | `r20em` will translate to `right: 20em;`         |\n\nFor the units, you can specify them after the value and relevant CSS unit will be used\n\n- Units including `px, pt, em, p, vh, vw, vmin, ex, cm, in, mm, pc` will translate to the same unit in CSS\n- If you don't provide any unit `px` will be used\n- If you need `%` specify it as `p` e.g. `w50p` will get translated to `width: 50%`\n- If no unit is needed, specify `n` e.g. `fw600n` will translate to `font-weight: 600`\n\n## Installation\n\nFirst, install Stylos as a development dependency:\n\n```bash\nyarn add --dev stylos\n```\n\nThen, import Stylos into your Webpack configuration and add it to your list of plugins:\n\n```javascript\n// webpack.config.js\nconst Stylos = require('stylos');\n\nmodule.exports = {\n  // ...\n  rules: [\n    // ...\n    // Add the rule to use the loader for HTML or JSX files\n    {\n      test: /(\\.js|\\.jsx|\\.html)$/, // Relevant regex\n      exclude: /node_modules/,\n      use: Stylos.Loader,\n    }\n  ],\n  plugins: [\n    // ...\n    // new HtmlWebpackPlugin(..),  // \u003c-- You must have it installed and set up\n    // Add the plugin right after the HTMLWebpackPlugin\n    new Stylos.Plugin()\n  ]\n}\n```\n\nYou can optionally pass `setImportant` option to loader to make the generated CSS use `!important` i.e.\n\n```javascript\n// webpack.config.js\nconst Stylos = require('stylos');\n\nmodule.exports = {\n  // ...\n  rules: [\n    // ...\n    // Add the rule to use the loader for HTML or JSX files\n    {\n      test: /(\\.js|\\.jsx|\\.html)$/, // Relevant regex\n      exclude: /node_modules/,\n      use: [\n        {\n          loader: Stylos.Loader,\n          options: {\n            setImportant: true\n          }\n        }\n      ],\n    }\n  ],\n  plugins: [\n    // ...\n    // new HtmlWebpackPlugin(..),  // \u003c-- You must have it installed and set up\n    // Add the plugin right after the HTMLWebpackPlugin\n    new Stylos.Plugin()\n  ]\n}\n```\n\n## Contributions\n\n- Open pull request with improvements\n- Report any bugs\n- Discuss ideas in issues\n- Spread the word\n- Reach out with any feedback [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/kamranahmedse.svg?style=social\u0026label=Follow%20%40kamranahmedse)](https://twitter.com/kamranahmedse)\n\n## License\n\nMIT \u0026copy; [Kamran Ahmed](https://twitter.com/kamranahmedse)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamranahmedse%2Fstylos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkamranahmedse%2Fstylos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamranahmedse%2Fstylos/lists"}