stylelint-config-rational-declaration

    2.0.0 • Public • Published

    stylelint-config-rational-declaration

    Stylelint config that sorts related property declarations by grouping together following the order:

    1. Positioning
    2. Structure
    3. Dimension
    4. Definition
    5. Typography
    6. Visual
    7. Animation
    8. Misc
    .declaration-order {
      /* Positioning */
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
    
      /* Structure */
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      float: right;
    
      /* Grid */
      display: grid;
      grid-template-columns: 40px 50px auto 50px 40px;
      grid-template-rows: 25% 100px auto;
    
      /* Dimension */
      width: 100px;
      height: 100px;
    
      /* Definition */
      padding: 10px;
      border: 1px solid #888;
      border-radius: 4px;
      margin: 10px;
    
      /* Typography */
      font: normal 16px Helvetica, sans-serif;
      color: #888;
      line-height: 1.3;
      text-align: center;
    
      /* Visual */
      background-color: #eee;
      opacity: 1;
    
      /* Animation */
      transition: all 1s;
    
      /* Misc */
      user-select: none;
    }

    Usage

    1. Add stylelint, stylelint-order and this package to your project:
    npm install --save-dev stylelint stylelint-order stylelint-config-rational-declaration
    # or, if you prefer yarn over npm:
    yarn add --dev stylelint stylelint-order stylelint-config-rational-declaration
    1. Add this package to the end of your extends array inside Stylelint configuration (.stylelintrc for example):
    {
      "extends": [
        // "stylelint-config-standard",
        "stylelint-config-rational-declaration"
      ]
    }

    This shareable config contains the following:

    {
      "plugins": [
        "stylelint-order",
        "stylelint-config-rational-declaration/plugin"
      ],
      "rules": {
        "order/properties-order": [],
        "plugin/rational-declaration": [true, {
          "empty-line-between-groups": false,
        }]
      }
    }

    Since it adds stylelint-order and stylelint-config-rational-declaration to plugins and also adds required rules, you don't have to do this yourself when extending this config.

    Optional options / rules

    empty-line-between-groups

    If true adds an empty line between groups. The default value is false.

    FAQ

    Why should I use the rational order and group and sort CSS properties by type instead of alphabetical order?

    The pros and cons of both ways in detail:

    Credits

    https://github.com/constverum/stylelint-config-rational-order/packages

    Install

    npm i stylelint-config-rational-declaration

    DownloadsWeekly Downloads

    6

    Version

    2.0.0

    License

    Apache-2.0

    Unpacked Size

    29.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar