Skip to content

Instantly share code, notes, and snippets.

@scottgruber
Last active July 29, 2019 21:14
Show Gist options
  • Select an option

  • Save scottgruber/eafe276f3fd825eee35cb49d418772ee to your computer and use it in GitHub Desktop.

Select an option

Save scottgruber/eafe276f3fd825eee35cb49d418772ee to your computer and use it in GitHub Desktop.

Revisions

  1. scottgruber revised this gist Jul 29, 2019. 1 changed file with 219 additions and 0 deletions.
    219 changes: 219 additions & 0 deletions stylelint-order-config.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,219 @@
    "order/properties-order": [
    "all",
    "content",
    "box-sizing",
    "will-change",
    "position",
    "top",
    "right",
    "bottom",
    "left",
    "width",
    "min-width",
    "max-width",
    "height",
    "min-height",
    "max-height",
    "z-index",
    "overflow",
    "overflow-x",
    "overflow-y",
    "margin",
    "margin-top",
    "margin-left",
    "margin-bottom",
    "margin-right",
    "padding",
    "padding-top",
    "padding-left",
    "padding-bottom",
    "padding-right",
    "transform",
    "transform-box",
    "transform-origin",
    "transform-style",
    "backface-visibility",
    "perspective",
    "perspective-origin",
    "zoom",
    "display",
    "flex",
    "flex-basis",
    "flex-grow",
    "flex-shrink",
    "flex-flow",
    "flex-wrap",
    "flex-direction",
    "justify-content",
    "align-self",
    "align-items",
    "align-content",
    "order",
    "grid",
    "grid-area",
    "grid-auto-columns",
    "grid-auto-flow",
    "grid-auto-rows",
    "grid-gap",
    "grid-column",
    "grid-column-end",
    "grid-column-gap",
    "grid-column-start",
    "grid-row",
    "grid-row-end",
    "grid-row-gap",
    "grid-row-start",
    "grid-template",
    "grid-template-areas",
    "grid-template-columns",
    "grid-template-rows",
    "columns",
    "column-width",
    "column-count",
    "column-fill",
    "column-gap",
    "column-rule",
    "column-rule-color",
    "column-rule-style",
    "column-rule-width",
    "column-span",
    "break-after",
    "break-before",
    "break-inside",
    "orphans",
    "widows",
    "clear",
    "float",
    "visibility",
    "vertical-align",
    "direction",
    "table-layout",
    "empty-cells",
    "list-style",
    "list-style-image",
    "list-style-position",
    "list-style-type",
    "border",
    "border-width",
    "border-style",
    "border-color",
    "border-top",
    "border-top-width",
    "border-top-style",
    "border-top-color",
    "border-left",
    "border-left-width",
    "border-left-style",
    "border-left-color",
    "border-bottom",
    "border-bottom-width",
    "border-bottom-style",
    "border-bottom-color",
    "border-right",
    "border-right-width",
    "border-right-style",
    "border-right-color",
    "outline",
    "outline-color",
    "outline-width",
    "outline-style",
    "outline-offset",
    "opacity",
    "object-fit",
    "object-position",
    "clip-path",
    "background",
    "background-color",
    "background-image",
    "background-position",
    "background-size",
    "background-origin",
    "background-repeat",
    "background-clip",
    "background-attachment",
    "background-blend-mode",
    "border-radius",
    "border-top-left-radius",
    "border-top-right-radius",
    "border-bottom-right-radius",
    "border-bottom-left-radius",
    "box-shadow",
    "filter",
    "color",
    "font",
    "font-family",
    "font-variant",
    "font-variant-alternates",
    "font-variant-caps",
    "font-variant-east-asian",
    "font-variant-ligatures",
    "font-variant-numeric",
    "font-variant-position",
    "font-size",
    "font-size-adjust",
    "font-kerning",
    "font-weight",
    "font-stretch",
    "font-style",
    "font-smooth",
    "font-smoothing",
    "font-feature-settings",
    "font-language-override",
    "font-synthesis",
    "text-decoration",
    "text-decoration-line",
    "text-decoration-style",
    "text-decoration-color",
    "text-underline-position",
    "text-transform",
    "text-shadow",
    "text-overflow",
    "text-align",
    "text-align-last",
    "text-justify",
    "text-indent",
    "text-emphasis",
    "text-emphasis-color",
    "text-emphasis-position",
    "text-emphasis-style",
    "text-orientation",
    "text-rendering",
    "text-combine-upright",
    "line-height",
    "tab-size",
    "white-space",
    "letter-spacing",
    "word-spacing",
    "word-wrap",
    "overflow-wrap",
    "hanging-punctuation",
    "word-break",
    "line-break",
    "hyphens",
    "pointer-events",
    "user-select",
    "cursor",
    "resize",
    "animation",
    "animation-name",
    "animation-play-state",
    "animation-direction",
    "animation-fill-mode",
    "animation-duration",
    "animation-delay",
    "animation-iteration-count",
    "animation-timing-function",
    "offset",
    "offset-position",
    "offset-path",
    "offset-distance",
    "offset-anchor",
    "offset-rotate",
    "transition",
    "transition-property",
    "transition-duration",
    "transition-delay",
    "transition-timing-function",

    { "unspecified": "bottom" }
    ]
  2. scottgruber created this gist Jul 19, 2019.
    269 changes: 269 additions & 0 deletions stylelint-order-config
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,269 @@
    'use strict';

    // See https://github.com/hudochenkov/stylelint-order

    const order = [
    // Overview
    'all',
    'content',
    'box-sizing',
    'will-change',

    // Position, dimensions and boundaries
    'position',
    'top',
    'right',
    'bottom',
    'left',

    'width',
    'min-width',
    'max-width',
    'height',
    'min-height',
    'max-height',

    'z-index',
    'overflow',
    'overflow-x',
    'overflow-y',

    'margin',
    'margin-top',
    'margin-left',
    'margin-bottom',
    'margin-right',
    'padding',
    'padding-top',
    'padding-left',
    'padding-bottom',
    'padding-right',

    'transform',
    'transform-box',
    'transform-origin',
    'transform-style',
    'backface-visibility',
    'perspective',
    'perspective-origin',
    'zoom',

    // Display
    'display',

    // Flexbox only
    'flex',
    'flex-basis',
    'flex-grow',
    'flex-shrink',
    'flex-flow',
    'flex-wrap',
    'flex-direction',
    'justify-content',
    'align-self',
    'align-items',
    'align-content',
    'order',

    // Grid Layout
    'grid',
    'grid-area',
    'grid-auto-columns',
    'grid-auto-flow',
    'grid-auto-rows',
    'grid-gap',
    'grid-column',
    'grid-column-end',
    'grid-column-gap',
    'grid-column-start',
    'grid-row',
    'grid-row-end',
    'grid-row-gap',
    'grid-row-start',
    'grid-template',
    'grid-template-areas',
    'grid-template-columns',
    'grid-template-rows',

    // CSS Columns
    'columns',
    'column-width',
    'column-count',
    'column-fill',
    'column-gap',
    'column-rule',
    'column-rule-color',
    'column-rule-style',
    'column-rule-width',
    'column-span',
    'break-after',
    'break-before',
    'break-inside',
    'orphans',
    'widows',

    'clear',
    'float',
    'visibility',
    'vertical-align',
    'direction',

    // Table related stuff only
    'table-layout',
    'empty-cells',

    // Asthethic
    'list-style',
    'list-style-image',
    'list-style-position',
    'list-style-type',

    'border',
    'border-width',
    'border-style',
    'border-color',
    'border-top',
    'border-top-width',
    'border-top-style',
    'border-top-color',
    'border-left',
    'border-left-width',
    'border-left-style',
    'border-left-color',
    'border-bottom',
    'border-bottom-width',
    'border-bottom-style',
    'border-bottom-color',
    'border-right',
    'border-right-width',
    'border-right-style',
    'border-right-color',

    'outline',
    'outline-color',
    'outline-width',
    'outline-style',
    'outline-offset',

    'opacity',
    'object-fit',
    'object-position',
    'clip-path',

    'background',
    'background-color',
    'background-image',
    'background-position',
    'background-size',
    'background-origin',
    'background-repeat',
    'background-clip',
    'background-attachment',
    'background-blend-mode',

    'border-radius',
    'border-top-left-radius',
    'border-top-right-radius',
    'border-bottom-right-radius',
    'border-bottom-left-radius',

    'box-shadow',
    'filter',

    // Text
    'color',

    'font',
    'font-family',
    'font-variant',
    'font-variant-alternates',
    'font-variant-caps',
    'font-variant-east-asian',
    'font-variant-ligatures',
    'font-variant-numeric',
    'font-variant-position',
    'font-size',
    'font-size-adjust',
    'font-kerning',
    'font-weight',
    'font-stretch',
    'font-style',
    'font-smooth',
    'font-smoothing',
    'font-feature-settings',
    'font-language-override',
    'font-synthesis',

    'text-decoration',
    'text-decoration-line',
    'text-decoration-style',
    'text-decoration-color',
    'text-underline-position',
    'text-transform',
    'text-shadow',
    'text-overflow',
    'text-align',
    'text-align-last',
    'text-justify',
    'text-indent',
    'text-emphasis',
    'text-emphasis-color',
    'text-emphasis-position',
    'text-emphasis-style',
    'text-orientation',
    'text-rendering',
    'text-combine-upright',

    'line-height',
    'tab-size',
    'white-space',
    'letter-spacing',
    'word-spacing',
    'word-wrap',
    'overflow-wrap',
    'hanging-punctuation',

    // Paragraphs and wrapping
    'word-break',
    'line-break',
    'hyphens',

    // Cursor
    'pointer-events',
    'user-select',
    'cursor',
    'resize',

    // Animations & transitions
    'animation',
    'animation-name',
    'animation-play-state',
    'animation-direction',
    'animation-fill-mode',
    'animation-duration',
    'animation-delay',
    'animation-iteration-count',
    'animation-timing-function',

    'offset',
    'offset-position',
    'offset-path',
    'offset-distance',
    'offset-anchor',
    'offset-rotate',

    'transition',
    'transition-property',
    'transition-duration',
    'transition-delay',
    'transition-timing-function',
    ];

    module.exports = {
    'plugins': [
    'stylelint-order',
    ],
    'rules': {
    'order/properties-order': [order, { 'unspecified': 'bottom' }],
    },
    };