Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 stylelint.config.js file with the following config:

let config = require('./.subsetcss');

module.exports = {
  plugins: ['subsetcss'],
  rules: {
    'subsetcss/config': [true, config],
  },
};

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': (key, value) => ['0', '1px', '2px', '3px'],
    'border-color': [
      'transparent',
      '#22292f',
      '#3d4852',
      '#606f7b',
      '#8795a1',
      '#b8c2cc',
    ],
    'border-style': ['solid'],
  },
  '@media': [
    {
      // optional
      type: 'print',
      // optional
      params: {
        'max-width': ['400px', '768px'],
      },
      subsets: {
        'font-size': [
          '1rem', // 16px
          '1.125rem', // 18px
          '1.25rem', // 20px
          '1.5rem', // 24px
          '1.875rem', // 30px
        ],
      },
    },
  ],
};

Here's an example config based on TailwindCSS styles https://gist.github.com/knownasilya/0ceb5fe6c02d558f2e908516dc1551bd

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']

Generate a modular scale

Use https://polished.js.org/docs/#modularscale or something similar.

'font-size': Array.from({ length: 5 }, (_v, index) => polished.modularScale(index)),

First value is the step, second the starting value (defaults to '1em') and third is the modular scale, which can be one of the values defined here: https://polished.js.org/docs/#modularscaleratio

You can preview modular scales here: https://www.modularscale.com/

Generate custom color combinations

Use https://github.com/TypeCtrl/tinycolor#color-combinations or something similar.

const colors = new TinyColor('#f00').polyad(4);
// later
'color': colors.map(t => t.toHexString())

Helper Functions

Have a look at https://github.com/subsetcss/config-helpers for official helper functions to help build out your config.

Contributing

See the Contributing guide.

About

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

Topics

Resources

Sponsor this project

 

Packages

No packages published