alienlebarge/.prettierrc

## .prettierrc
{
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "proseWrap": "preserve",
    "plugins": ["@prettier/plugin-php"]
}

## README.md

      
    Raw
  

              README.md
            
          
    alienlebarge.ch — Coding Style

This repository centralises the code style configuration files used across alienlebarge.ch projects.
Files included


.prettierrc / prettier.config.json — code formatting
stylelint.config.json — CSS/SCSS rules


Prettier

Both files (.prettierrc and prettier.config.json) share the same formatting rules:


Option
Value
Description


printWidth
80
Maximum line length of 80 characters.


tabWidth
2
Indentation of 2 spaces.


useTabs
false
Spaces are used instead of tabs.


semi
true
Semicolons are required at the end of statements.


singleQuote
true
Single quotes for strings.


trailingComma
"none"
No trailing commas.


bracketSpacing
true
Spaces inside object braces { foo: bar }.


endOfLine
"lf"
Unix-style line endings (LF).


htmlWhitespaceSensitivity
"ignore"
Whitespace in HTML is ignored during formatting.


jsxBracketSameLine
false
The closing > of a JSX component is placed on a new line.


proseWrap
"preserve"
Prose text (Markdown) is not reformatted.


.prettierrc additionally includes the @prettier/plugin-php plugin for PHP support.


Stylelint

Selectors & Specificity

These rules aim to keep CSS specificity low and predictable.

selector-max-id: 0 — ID selectors are forbidden. Use classes only.
selector-max-compound-selectors: 3 — A selector may not be composed of more than 3 combined selectors.
selector-no-qualifying-type — Type selectors may not be qualified with a class or attribute (e.g. a.link is forbidden; .link is correct). Exceptions: attributes and classes are allowed.
selector-max-universal: 2 — The universal selector * is limited to 2 occurrences per selector.
selector-max-specificity: "0,3,0" — Maximum allowed specificity is 0,3,0 (three classes maximum, no IDs).
selector-class-pattern — Classes must follow the BEM kebab-case convention: .block, .block__element, .block--modifier.

!important


declaration-no-important: true — The use of !important is strictly forbidden.

Properties & Values


declaration-block-no-duplicate-properties — Duplicate properties within a block are forbidden, unless they are consecutive with different values (useful for fallbacks).
block-no-empty: true — Empty blocks are forbidden.
declaration-block-no-shorthand-property-overrides: true — A shorthand property may not override a longhand property declared after it in the same block.
unit-no-unknown: true — Unknown units are forbidden.
property-no-unknown: true — Unknown CSS properties are forbidden.
selector-pseudo-class-no-unknown: true — Unknown pseudo-classes are forbidden.
selector-pseudo-element-no-unknown: true — Unknown pseudo-elements are forbidden.
function-no-unknown: null — Checking for unknown CSS functions is disabled (to allow custom functions).

Colors


color-function-notation: "modern" — Modern color function notation is required: rgb(255 0 0) instead of rgb(255, 0, 0).
alpha-value-notation: "percentage" — Alpha values must be expressed as percentages: 50% instead of 0.5.
color-no-invalid-hex: true — Invalid hex color values are forbidden.
color-named: "never" — Named colors (red, blue, etc.) are forbidden.

Units


length-zero-no-unit: true — Zero-length values must not have a unit: 0 instead of 0px.

Fonts


font-family-name-quotes: "always-where-recommended" — Quotes around font family names are required where recommended.
font-family-no-duplicate-names: true — Duplicate font family names within a font-family declaration are forbidden.

Custom Properties


custom-property-pattern — Custom properties must follow kebab-case naming, or the Utopia naming convention:

--step-0, --step-1, --step--1 … (Utopia type scale)
--space-s, --space-2xl, --space-s-l … (Utopia space tokens & pairs)
--grid-max-width, --grid-gutter … (Utopia grid tokens)
--any-kebab-case-property (custom tokens)


General


no-duplicate-selectors: true — Duplicate selectors across the stylesheet are forbidden.

Property Order

The stylelint-order plugin enforces a strict order for CSS properties, grouping declarations logically. Logical CSS properties (e.g. margin-inline) are always placed before their physical equivalents (e.g. margin-left). The group order is as follows:

Positioning — position, inset, top, right, bottom, left, z-index
Box model / Layout — display, flex, grid, float, clear
Sizing — logical first (inline-size, block-size), then physical (width, height), aspect-ratio
Margin — logical first (margin-block, margin-inline), then physical
Padding — logical first (padding-block, padding-inline), then physical
Overflow — overflow, overscroll-behavior
Box — box-sizing, visibility, clip, clip-path
Borders — logical first, then physical; width, style, colour, then border-radius, outline
Typography — font-*, line-height, text-*, letter-spacing, white-space, direction, writing-mode
Appearance / Skin — color, background-*, box-shadow, filter, opacity, cursor, appearance
Transitions & animations — transition-*, animation-*, will-change, transform-*
Container queries — container, container-name, container-type
Scroll — scroll-behavior, scroll-snap-*, scroll-margin, scroll-padding


Unlisted properties are placed at the bottom of the block ("unspecified": "bottom").


## prettier.config.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "ignore",
  "jsxBracketSameLine": false,
  "proseWrap": "preserve"
}

## stylelint.config.json
{
  "plugins": ["stylelint-order"],
  "rules": {
    "selector-max-id": 0,
    "selector-max-compound-selectors": 3,
    "selector-no-qualifying-type": [
      true,
      { "ignore": ["attribute", "class"] }
    ],
    "selector-max-universal": 2,
    "selector-max-specificity": "0,3,0",
    "selector-class-pattern": [
      "^[a-z]([a-z0-9-]+)?(__[a-z0-9]([a-z0-9-]+)?)?(--[a-z0-9]([a-z0-9-]+)?)?$",
      {
        "message": "Classes must follow the BEM kebab-case convention: .block, .block__element, .block--modifier"
      }
    ],
    "declaration-no-important": true,
    "declaration-block-no-duplicate-properties": [
      true,
      { "ignore": ["consecutive-duplicates-with-different-values"] }
    ],
    "block-no-empty": true,
    "declaration-block-no-shorthand-property-overrides": true,
    "unit-no-unknown": true,
    "property-no-unknown": true,
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "function-no-unknown": null,
    "color-function-notation": "modern",
    "alpha-value-notation": "percentage",
    "color-no-invalid-hex": true,
    "color-named": "never",
    "length-zero-no-unit": true,
    "font-family-name-quotes": "always-where-recommended",
    "font-family-no-duplicate-names": true,
    "custom-property-pattern": [
      "^(step--?\\d+|space-(3xs|2xs|xs|s|m|l|xl|2xl|3xl)(-(3xs|2xs|xs|s|m|l|xl|2xl|3xl))?|grid-[a-z-]+|[a-z][a-z0-9]*(-[a-z0-9]+)*)$",
      {
        "message": "Custom properties must be kebab-case, or follow Utopia naming: --step-*, --space-*, --grid-*"
      }
    ],
    "no-duplicate-selectors": true,
    "order/properties-order": [
      [
        "position",
        "inset",
        "inset-block", "inset-block-start", "inset-block-end",
        "inset-inline", "inset-inline-start", "inset-inline-end",
        "top", "right", "bottom", "left",
        "z-index",
        "display",
        "flex", "flex-direction", "flex-wrap", "flex-flow",
        "flex-grow", "flex-shrink", "flex-basis",
        "justify-content", "justify-items", "justify-self",
        "align-content", "align-items", "align-self",
        "gap", "row-gap", "column-gap",
        "grid",
        "grid-template", "grid-template-rows", "grid-template-columns", "grid-template-areas",
        "grid-auto-rows", "grid-auto-columns", "grid-auto-flow",
        "grid-area", "grid-row", "grid-column",
        "grid-row-start", "grid-row-end", "grid-column-start", "grid-column-end",
        "float", "clear",
        "inline-size", "min-inline-size", "max-inline-size",
        "block-size", "min-block-size", "max-block-size",
        "width", "min-width", "max-width",
        "height", "min-height", "max-height",
        "contain-intrinsic-inline-size", "contain-intrinsic-block-size",
        "contain-intrinsic-size",
        "aspect-ratio",
        "margin",
        "margin-block", "margin-block-start", "margin-block-end",
        "margin-inline", "margin-inline-start", "margin-inline-end",
        "margin-top", "margin-right", "margin-bottom", "margin-left",
        "padding",
        "padding-block", "padding-block-start", "padding-block-end",
        "padding-inline", "padding-inline-start", "padding-inline-end",
        "padding-top", "padding-right", "padding-bottom", "padding-left",
        "overflow", "overflow-x", "overflow-y",
        "overflow-block", "overflow-inline",
        "overscroll-behavior", "overscroll-behavior-x", "overscroll-behavior-y",
        "overscroll-behavior-block", "overscroll-behavior-inline",
        "box-sizing",
        "visibility", "clip", "clip-path",
        "border",
        "border-block", "border-block-start", "border-block-end",
        "border-inline", "border-inline-start", "border-inline-end",
        "border-width",
        "border-block-width", "border-block-start-width", "border-block-end-width",
        "border-inline-width", "border-inline-start-width", "border-inline-end-width",
        "border-top-width", "border-right-width", "border-bottom-width", "border-left-width",
        "border-style",
        "border-block-style", "border-block-start-style", "border-block-end-style",
        "border-inline-style", "border-inline-start-style", "border-inline-end-style",
        "border-top-style", "border-right-style", "border-bottom-style", "border-left-style",
        "border-color",
        "border-block-color", "border-block-start-color", "border-block-end-color",
        "border-inline-color", "border-inline-start-color", "border-inline-end-color",
        "border-top-color", "border-right-color", "border-bottom-color", "border-left-color",
        "border-top", "border-right", "border-bottom", "border-left",
        "border-radius",
        "border-start-start-radius", "border-start-end-radius",
        "border-end-start-radius", "border-end-end-radius",
        "border-top-left-radius", "border-top-right-radius",
        "border-bottom-left-radius", "border-bottom-right-radius",
        "outline", "outline-width", "outline-style", "outline-color", "outline-offset",
        "font", "font-family", "font-size", "font-weight", "font-style",
        "font-variant", "font-optical-sizing", "font-kerning",
        "font-feature-settings", "font-variation-settings",
        "line-height",
        "text-align", "text-align-last",
        "text-decoration", "text-decoration-line", "text-decoration-style",
        "text-decoration-color", "text-decoration-thickness",
        "text-underline-offset",
        "text-transform", "text-indent",
        "text-wrap", "text-wrap-style",
        "letter-spacing", "word-spacing",
        "white-space", "overflow-wrap", "word-break", "hyphens",
        "direction", "writing-mode", "text-orientation",
        "color",
        "background", "background-color", "background-image",
        "background-position", "background-position-x", "background-position-y",
        "background-size", "background-repeat", "background-attachment",
        "background-origin", "background-clip",
        "box-shadow",
        "filter", "backdrop-filter",
        "opacity", "mix-blend-mode", "isolation",
        "cursor", "pointer-events", "user-select",
        "resize",
        "appearance",
        "transition", "transition-property", "transition-duration",
        "transition-timing-function", "transition-delay",
        "animation", "animation-name", "animation-duration",
        "animation-timing-function", "animation-delay",
        "animation-fill-mode", "animation-iteration-count",
        "animation-direction", "animation-play-state",
        "will-change",
        "transform", "transform-origin", "transform-box",
        "translate", "rotate", "scale",
        "container", "container-name", "container-type",
        "scroll-behavior",
        "scroll-snap-type", "scroll-snap-align", "scroll-snap-stop",
        "scroll-margin", "scroll-margin-block", "scroll-margin-inline",
        "scroll-padding", "scroll-padding-block", "scroll-padding-inline"
      ],
      { "unspecified": "bottom" }
    ]
  }
}
	{
	"printWidth": 80,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "none",
	"bracketSpacing": true,
	"htmlWhitespaceSensitivity": "ignore",
	"proseWrap": "preserve",
	"plugins": ["@prettier/plugin-php"]
	}
Option	Value	Description
`printWidth`	`80`	Maximum line length of 80 characters.
`tabWidth`	`2`	Indentation of 2 spaces.
`useTabs`	`false`	Spaces are used instead of tabs.
`semi`	`true`	Semicolons are required at the end of statements.
`singleQuote`	`true`	Single quotes for strings.
`trailingComma`	`"none"`	No trailing commas.
`bracketSpacing`	`true`	Spaces inside object braces `{ foo: bar }`.
`endOfLine`	`"lf"`	Unix-style line endings (LF).
`htmlWhitespaceSensitivity`	`"ignore"`	Whitespace in HTML is ignored during formatting.
`jsxBracketSameLine`	`false`	The closing `>` of a JSX component is placed on a new line.
`proseWrap`	`"preserve"`	Prose text (Markdown) is not reformatted.
	{
	"printWidth": 80,
	"tabWidth": 2,
	"useTabs": false,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "none",
	"bracketSpacing": true,
	"endOfLine": "lf",
	"htmlWhitespaceSensitivity": "ignore",
	"jsxBracketSameLine": false,
	"proseWrap": "preserve"
	}
	{
	"plugins": ["stylelint-order"],
	"rules": {
	"selector-max-id": 0,
	"selector-max-compound-selectors": 3,
	"selector-no-qualifying-type": [
	true,
	{ "ignore": ["attribute", "class"] }
	],
	"selector-max-universal": 2,
	"selector-max-specificity": "0,3,0",
	"selector-class-pattern": [
	"^[a-z]([a-z0-9-]+)?(__[a-z0-9]([a-z0-9-]+)?)?(--[a-z0-9]([a-z0-9-]+)?)?$",
	{
	"message": "Classes must follow the BEM kebab-case convention: .block, .block__element, .block--modifier"
	}
	],
	"declaration-no-important": true,
	"declaration-block-no-duplicate-properties": [
	true,
	{ "ignore": ["consecutive-duplicates-with-different-values"] }
	],
	"block-no-empty": true,
	"declaration-block-no-shorthand-property-overrides": true,
	"unit-no-unknown": true,
	"property-no-unknown": true,
	"selector-pseudo-class-no-unknown": true,
	"selector-pseudo-element-no-unknown": true,
	"function-no-unknown": null,
	"color-function-notation": "modern",
	"alpha-value-notation": "percentage",
	"color-no-invalid-hex": true,
	"color-named": "never",
	"length-zero-no-unit": true,
	"font-family-name-quotes": "always-where-recommended",
	"font-family-no-duplicate-names": true,
	"custom-property-pattern": [
	"^(step--?\\d+\|space-(3xs\|2xs\|xs\|s\|m\|l\|xl\|2xl\|3xl)(-(3xs\|2xs\|xs\|s\|m\|l\|xl\|2xl\|3xl))?\|grid-[a-z-]+\|[a-z][a-z0-9](-[a-z0-9]+))$",
	{
	"message": "Custom properties must be kebab-case, or follow Utopia naming: --step-, --space-, --grid-*"
	}
	],
	"no-duplicate-selectors": true,
	"order/properties-order": [
	[
	"position",
	"inset",
	"inset-block", "inset-block-start", "inset-block-end",
	"inset-inline", "inset-inline-start", "inset-inline-end",
	"top", "right", "bottom", "left",
	"z-index",
	"display",
	"flex", "flex-direction", "flex-wrap", "flex-flow",
	"flex-grow", "flex-shrink", "flex-basis",
	"justify-content", "justify-items", "justify-self",
	"align-content", "align-items", "align-self",
	"gap", "row-gap", "column-gap",
	"grid",
	"grid-template", "grid-template-rows", "grid-template-columns", "grid-template-areas",
	"grid-auto-rows", "grid-auto-columns", "grid-auto-flow",
	"grid-area", "grid-row", "grid-column",
	"grid-row-start", "grid-row-end", "grid-column-start", "grid-column-end",
	"float", "clear",
	"inline-size", "min-inline-size", "max-inline-size",
	"block-size", "min-block-size", "max-block-size",
	"width", "min-width", "max-width",
	"height", "min-height", "max-height",
	"contain-intrinsic-inline-size", "contain-intrinsic-block-size",
	"contain-intrinsic-size",
	"aspect-ratio",
	"margin",
	"margin-block", "margin-block-start", "margin-block-end",
	"margin-inline", "margin-inline-start", "margin-inline-end",
	"margin-top", "margin-right", "margin-bottom", "margin-left",
	"padding",
	"padding-block", "padding-block-start", "padding-block-end",
	"padding-inline", "padding-inline-start", "padding-inline-end",
	"padding-top", "padding-right", "padding-bottom", "padding-left",
	"overflow", "overflow-x", "overflow-y",
	"overflow-block", "overflow-inline",
	"overscroll-behavior", "overscroll-behavior-x", "overscroll-behavior-y",
	"overscroll-behavior-block", "overscroll-behavior-inline",
	"box-sizing",
	"visibility", "clip", "clip-path",
	"border",
	"border-block", "border-block-start", "border-block-end",
	"border-inline", "border-inline-start", "border-inline-end",
	"border-width",
	"border-block-width", "border-block-start-width", "border-block-end-width",
	"border-inline-width", "border-inline-start-width", "border-inline-end-width",
	"border-top-width", "border-right-width", "border-bottom-width", "border-left-width",
	"border-style",
	"border-block-style", "border-block-start-style", "border-block-end-style",
	"border-inline-style", "border-inline-start-style", "border-inline-end-style",
	"border-top-style", "border-right-style", "border-bottom-style", "border-left-style",
	"border-color",
	"border-block-color", "border-block-start-color", "border-block-end-color",
	"border-inline-color", "border-inline-start-color", "border-inline-end-color",
	"border-top-color", "border-right-color", "border-bottom-color", "border-left-color",
	"border-top", "border-right", "border-bottom", "border-left",
	"border-radius",
	"border-start-start-radius", "border-start-end-radius",
	"border-end-start-radius", "border-end-end-radius",
	"border-top-left-radius", "border-top-right-radius",
	"border-bottom-left-radius", "border-bottom-right-radius",
	"outline", "outline-width", "outline-style", "outline-color", "outline-offset",
	"font", "font-family", "font-size", "font-weight", "font-style",
	"font-variant", "font-optical-sizing", "font-kerning",
	"font-feature-settings", "font-variation-settings",
	"line-height",
	"text-align", "text-align-last",
	"text-decoration", "text-decoration-line", "text-decoration-style",
	"text-decoration-color", "text-decoration-thickness",
	"text-underline-offset",
	"text-transform", "text-indent",
	"text-wrap", "text-wrap-style",
	"letter-spacing", "word-spacing",
	"white-space", "overflow-wrap", "word-break", "hyphens",
	"direction", "writing-mode", "text-orientation",
	"color",
	"background", "background-color", "background-image",
	"background-position", "background-position-x", "background-position-y",
	"background-size", "background-repeat", "background-attachment",
	"background-origin", "background-clip",
	"box-shadow",
	"filter", "backdrop-filter",
	"opacity", "mix-blend-mode", "isolation",
	"cursor", "pointer-events", "user-select",
	"resize",
	"appearance",
	"transition", "transition-property", "transition-duration",
	"transition-timing-function", "transition-delay",
	"animation", "animation-name", "animation-duration",
	"animation-timing-function", "animation-delay",
	"animation-fill-mode", "animation-iteration-count",
	"animation-direction", "animation-play-state",
	"will-change",
	"transform", "transform-origin", "transform-box",
	"translate", "rotate", "scale",
	"container", "container-name", "container-type",
	"scroll-behavior",
	"scroll-snap-type", "scroll-snap-align", "scroll-snap-stop",
	"scroll-margin", "scroll-margin-block", "scroll-margin-inline",
	"scroll-padding", "scroll-padding-block", "scroll-padding-inline"
	],
	{ "unspecified": "bottom" }
	]
	}
	}