Skip to content
Linting your CSS to limit yourself to a defined subset of values.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix: pas node May 7, 2019
test fix: ruleName May 7, 2019
.gitignore feat: first commit May 7, 2019
CHANGELOG.md
CONTRIBUTING.md fix: update notes May 7, 2019
README.md
example.png
jest.config.js feat: first commit May 7, 2019
package.json chore(release): 0.1.4 May 7, 2019
tsconfig.json fix: build May 7, 2019
yarn.lock

README.md

subsetcss

Linting your CSS to limit yourself to a defined subset of values.

CSS can get unweildy sometimes, as new features are added and new people join the team. It's hard to be consistent, and 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.

Note: in development

Example Output

Install

yarn add -D subsetcss stylelint

Setup

Add a .stylelintrc file with the following config:

{
  "plugins": [
    "subsetcss"
  ],
  "rules": {
    "subsetcss/config": "./.subsetcss.js"
  }
}

Create a .subsetcss.js file with content like:

module.exports = {
  'subsets': {
    'font-size': [
      '.75rem',     // 12px
      '.875rem',    // 14px
      '1rem',       // 16px
      '1.125rem',   // 18px
      '1.25rem',    // 20px
      '1.5rem',     // 24px
      '1.875rem',   // 30px
      '2.25rem',    // 36px
      '3rem',       // 48px
    ],
    'border-width': [
      '0',
      '1px',
      '2px',
      '3px'
    ],
    'border-color': [
      'transparent',
      '#22292f',
      '#3d4852',
      '#606f7b',
      '#8795a1',
      '#b8c2cc'
    ],
    'border-style': ['solid'],
    '@media': {
      'params': {
        'max-width': ['400px', '768px'],
      },
      'subsets': {
         'font-size': [
          '1rem',       // 16px
          '1.125rem',   // 18px
          '1.25rem',    // 20px
          '1.5rem',     // 24px
          '1.875rem'    // 30px
        ]
      }
    }
  }
};

Run

You can run with yarn stylelint "src/styles/*.css". Feel free to add to your npm scripts or setup with any intermediate tools.

Tips

Using variables in your subsets

  • css variables: 'font-color': ['var(--text-color, black)']
  • sass variables: 'font-color': ['$text-color']
  • less variables: 'font-color': ['@text-color']

Contributing

See the Contributing guide.

You can’t perform that action at this time.