{"id":18246330,"url":"https://github.com/subsetcss/linter","last_synced_at":"2025-04-04T14:31:13.356Z","repository":{"id":42175791,"uuid":"183661482","full_name":"subsetcss/linter","owner":"subsetcss","description":"Linting your CSS to limit yourself to a defined subset of values.","archived":false,"fork":false,"pushed_at":"2023-01-05T14:51:49.000Z","size":757,"stargazers_count":104,"open_issues_count":7,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T14:19:56.879Z","etag":null,"topics":["css","lint","styleguide"],"latest_commit_sha":null,"homepage":"https://subsetcss-docs.netlify.com","language":"TypeScript","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/subsetcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"knownasilya"}},"created_at":"2019-04-26T16:29:37.000Z","updated_at":"2025-02-20T11:20:55.000Z","dependencies_parsed_at":"2023-02-04T06:32:03.329Z","dependency_job_id":null,"html_url":"https://github.com/subsetcss/linter","commit_stats":null,"previous_names":["knownasilya/subsetcss"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subsetcss%2Flinter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subsetcss%2Flinter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subsetcss%2Flinter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subsetcss%2Flinter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/subsetcss","download_url":"https://codeload.github.com/subsetcss/linter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247193967,"owners_count":20899401,"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","lint","styleguide"],"created_at":"2024-11-05T09:25:29.900Z","updated_at":"2025-04-04T14:31:13.052Z","avatar_url":"https://github.com/subsetcss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/knownasilya"],"categories":[],"sub_categories":[],"readme":"# subsetcss\n\nLinting your CSS to limit yourself to a defined subset of values.\n\nCSS can get unweildy sometimes, as new features are added and new people join the team. It's hard to be consistent,\nand that's why utility/functional CSS libraries like Tailwind are growing in popularity. SubsetCSS helps aleviate this problem by enforcing your CSS to a predefined amount of values, keeping everyone on the same page as a project evolves.\n\nNote: in development\n\n![Example Output](./example.png 'Example')\n\n## Install\n\n```sh\nyarn add -D subsetcss stylelint\n```\n\n## Setup\n\nAdd a `stylelint.config.js` file with the following config:\n\n```js\nlet config = require('./.subsetcss');\n\nmodule.exports = {\n  plugins: ['subsetcss'],\n  rules: {\n    'subsetcss/config': [true, config],\n  },\n};\n```\n\nCreate a `.subsetcss.js` file with content like:\n\n```js\nmodule.exports = {\n  subsets: {\n    'font-size': [\n      '.75rem', // 12px\n      '.875rem', // 14px\n      '1rem', // 16px\n      '1.125rem', // 18px\n      '1.25rem', // 20px\n      '1.5rem', // 24px\n      '1.875rem', // 30px\n      '2.25rem', // 36px\n      '3rem', // 48px\n    ],\n    'border-width': (key, value) =\u003e ['0', '1px', '2px', '3px'],\n    'border-color': [\n      'transparent',\n      '#22292f',\n      '#3d4852',\n      '#606f7b',\n      '#8795a1',\n      '#b8c2cc',\n    ],\n    'border-style': ['solid'],\n  },\n  '@media': [\n    {\n      // optional\n      type: 'print',\n      // optional\n      params: {\n        'max-width': ['400px', '768px'],\n      },\n      subsets: {\n        'font-size': [\n          '1rem', // 16px\n          '1.125rem', // 18px\n          '1.25rem', // 20px\n          '1.5rem', // 24px\n          '1.875rem', // 30px\n        ],\n      },\n    },\n  ],\n};\n```\n\n\u003e Here's an example config based on TailwindCSS styles https://gist.github.com/knownasilya/0ceb5fe6c02d558f2e908516dc1551bd\n\n## Run\n\nYou can run with `yarn stylelint \"src/styles/*.css\"`. Feel free to add to your npm scripts\nor setup with any intermediate tools.\n\n## Tips\n\n### Using variables in your subsets\n\n- css variables: `'font-color': ['var(--text-color, black)']`\n- sass variables: `'font-color': ['$text-color']`\n- less variables: `'font-color': ['@text-color']`\n\n### Generate a modular scale\n\nUse https://polished.js.org/docs/#modularscale or something similar.\n\n```js\n'font-size': Array.from({ length: 5 }, (_v, index) =\u003e polished.modularScale(index)),\n```\n\nFirst value is the step, second the starting value (defaults to `'1em'`) and third is the modular scale, which can\nbe one of the values defined here: https://polished.js.org/docs/#modularscaleratio\n\nYou can preview modular scales here: https://www.modularscale.com/\n\n### Generate custom color combinations\n\nUse https://github.com/TypeCtrl/tinycolor#color-combinations or something similar.\n\n```js\nconst colors = new TinyColor('#f00').polyad(4);\n// later\n'color': colors.map(t =\u003e t.toHexString())\n```\n\n## Helper Functions\n\nHave a look at https://github.com/subsetcss/config-helpers for official helper functions to help build out your config.\n\n## Contributing\n\nSee the [Contributing](./CONTRIBUTING.md) guide.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubsetcss%2Flinter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubsetcss%2Flinter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubsetcss%2Flinter/lists"}