@lucca/stylelint-config-prisme 19.2.0

package/LFDeprecatedProperties.mjs

@@ -0,0 +1,30 @@
+// WARNING!
+// Always check for variables with regular expressions. A string will match all the value, not part of it.
+
+export default [
+	{
+		objectPattern: /--commons-boxShadow-X*(S|M|L)/,
+		versionDeprecated: '17.3.0',
+		versionDeleted: '19.1.0',
+	},
+	{
+		objectPattern: /--palettes-(grey|primary|secondary|lucca)-[0-9]{2,3}/,
+		versionDeprecated: '17.3.0',
+		versionDeleted: '20.1.0',
+	},
+	{
+		objectPattern: /--spacings-X*(S|M|L)/,
+		versionDeprecated: '17.4.0',
+		versionDeleted: '19.1.0',
+	},
+	{
+		objectPattern: /--colors-(black|white)-color/,
+		versionDeprecated: '18.2.0',
+		versionDeleted: '20.1.0',
+	},
+	{
+		objectPattern: /--commons-navSide-compact-width/,
+		versionDeprecated: '18.3.0',
+		versionDeleted: '20.1.0',
+	},
+];

package/LFDeprecatedSelectors.mjs

@@ -0,0 +1,67 @@
+export default [
+	{
+		// Any combination of .button and .mod-icon with any non-whitespace character between
+		objectPattern: /(\.button|\.mod-icon)[\S]*(\.button|\.mod-icon)/,
+		versionDeprecated: '17.2.0',
+		versionDeleted: '19.1.0',
+	},
+	{
+		objectPattern: ['.u-comma', '.u-unit'],
+		versionDeprecated: '17.3.0',
+		versionDeleted: '19.1.0',
+	},
+	{
+		objectPattern: /\.palette-(grey|primary|secondary|lucca)/,
+		versionDeprecated: '17.3.0',
+		versionDeleted: '20.1.0',
+	},
+	{
+		objectPattern: /\.u-(padding|margin|gap)X*(S|M|L)/,
+		versionDeprecated: '17.4.0',
+		versionDeleted: '19.1.0',
+	},
+	{
+		objectPattern: /\.u-elevate*/,
+		versionDeprecated: '19.1.0',
+		versionDeleted: '19.1.0',
+	},
+	{
+		objectPattern: [
+			'.user-info',
+			'.user-tile-title',
+			'.user-tile-label',
+			'.user-tile-footnote',
+			'.columnSticky',
+			'.table-head-row-cell-sortableButton',
+			'.indexTable-head-row-cell-sortableButton',
+			'.table-head-row-cell.mod-sortable',
+			'.table-head-row-cell.sortedAscending',
+			'.table-head-row-cell.sortedDescending',
+			'.u-textLeft',
+			'.u-textCenter',
+			'.u-textRight',
+		],
+		versionDeprecated: '18.1.0',
+		versionDeleted: '20.1.0',
+	},
+	{
+		objectPattern: /\.user-info.+/,
+		versionDeprecated: '18.1.0',
+		versionDeleted: '20.1.0',
+	},
+	{
+		objectPattern: /\.user-tile.+/,
+		versionDeprecated: '18.1.0',
+		versionDeleted: '20.1.0',
+	},
+	{
+		objectPattern: ['.picture', '.indexTable-body-row-cell-action'],
+		versionDeprecated: '18.1.0',
+		versionDeleted: '20.1.0',
+	},
+	{
+		objectPattern: ['.comment-content-textContainer', '.dialog-form', '.dialog-formOptional', '.mod-withMenuCompact'],
+		versionDeprecated: '18.3.0',
+		versionDeleted: '20.1.0',
+	},
+];

package/LFVersions.mjs

@@ -0,0 +1,46 @@
+import * as os from 'node:os';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from '@angular/compiler-cli';
+
+let LFVersions = null;
+
+const CACHE_FILE_PATH = join(os.tmpdir(), 'stylelint-LFVersions.json');
+
+try {
+	const cacheFile = readFileSync(CACHE_FILE_PATH, 'utf8');
+	const cache = JSON.parse(cacheFile);
+	// If cache is older than 1 hour, don't use it
+	if (cache.createdAt && Date.now() - cache.createdAt < 1000 * 60 * 60) {
+		LFVersions = cache.LFVersions;
+	}
+	console.log(`Using cached data in ${CACHE_FILE_PATH}…`);
+} catch (e) {
+	// Whatever, no cache file means we'll fetch anyways
+}
+
+if (LFVersions === null) {
+	LFVersions = {};
+	console.log(`Fetching from Github to ${CACHE_FILE_PATH}…`);
+	const githubMilestones = await fetch('https://api.github.com/repos/LuccaSA/lucca-front/milestones?state=all&sort=due_on&direction=desc');
+
+	if (githubMilestones.ok) {
+		const milestones = await githubMilestones.json();
+
+		for (const milestone of milestones) {
+			let version = milestone.title;
+
+			if (version) {
+				const date = new Date(milestone.due_on);
+				// If version doesn't have patch version, add it as .0
+				if (version.split('.').length === 2) {
+					version += '.0';
+				}
+				LFVersions[version] = date.toLocaleDateString();
+			}
+		}
+	}
+
+	writeFileSync(CACHE_FILE_PATH, JSON.stringify({ LFVersions, createdAt: Date.now() }), 'utf8');
+}
+
+export default LFVersions;

package/README.md

@@ -0,0 +1,118 @@
+# lucca-front / Stylelint config
+
+This package is a shareable stylelint configuration.
+
+[Stylelint](https://stylelint.io/) checks for common mistakes in CSS and CSS-like files, and allows to define rules for tools and developers.
+
+[Prettier should be used](https://stylelint.io/#how-itll-help-you) to handle coding style-guides when possible.
+
+- This configuration lints your code with default CSS & SCSS rules, and adapts some of them for Lucca Front specifics
+- It will trigger warnings for deprecated LF features and errors for deleted LF features.
+
+## Install
+
+```
+npm i --save-dev stylelint @lucca/stylelint-config-prisme
+```
+
+## Avoid conflicts
+
+Remove any pre-existing [configuration](https://stylelint.io/user-guide/configure) (file or statements in package.json).
+
+## Configure
+
+### For your local project
+
+Use this package in a _stylelint.config.js_ file in your repository:
+
+```js
+module.exports = {
+  extends: ['@lucca/stylelint-config-prisme'],
+  rules: {},
+};
+```
+
+### For your CI
+
+Add the relevant script to lint the code in Jenkins.
+
+```json
+"stylelint": "stylelint \"./**/*.scss\"",
+```
+
+You can be more specific and restrict the path of scss files being linted: `"stylelint": "stylelint \"./SOME_PATH/**/*.scss\""`,
+
+### Breaking the rules
+
+#### Overrides
+
+You can [apply specific rules with overrides](https://stylelint.io/user-guide/configure/#overrides) as needed.
+
+Rules can be disabled while incrementally fixing your code. Set them to `null`. The following example will ignore the `no-descending-specificity` rule in all SCSS files within `*some-path* :
+
+```js
+module.exports = {
+ extends: ['@lucca/stylelint-config-prisme'],
+ overrides: [
+  {
+   files: ['some-path/**/*.scss'],
+   rules: {
+    'no-descending-specificity': null,
+   }
+  },
+ ],
+ rules: {};
+};
+```
+
+#### Ignoring code inline
+
+If needed, each rule can be ignored with [stylelint-(dis|en)able](https://stylelint.io/user-guide/ignore-code).
+
+Please explain why with a comment if you're doing so. Use `styleling-disable[-*] -- Comment` and enable stylelint back as soon as possible: `styleling-enable`.
+
+## Testing locally
+
+1. From the root of this package, run `npm pack`. This will generate a _.tgz_ file.
+2. From the root of the project you want to lint, run `npm i PATH_TO_LUCCA_FRONT_REPOSITORY/packages/stylelint-config/lucca-front-stylelint-config-0.0.0.tgz`.
+
+The configuration from your local repository should be applied right away. _If in doubt, restart your editor._
+
+## Configuring your editor
+
+### VS Code
+
+⚠️ A [VSCode extension bug](https://github.com/stylelint/vscode-stylelint/issues/490#issuecomment-1966934533) might prevent you from using stylelint 16+. See below for a fix through VS-code settings.
+
+Those settings in _.vscode/settings.json_ should be fine, but you can also follow instructions on the [extension page](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint):
+:
+
+```json
+  "[scss]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "stylelint.vscode-stylelint",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": "explicit"
+    }
+  },
+  "stylelint.reportInvalidScopeDisables": true,
+  "stylelint.reportNeedlessDisables": true,
+  "stylelint.snippet": ["css", "scss"],
+  "stylelint.validate": ["css", "scss"],
+```
+
+Please note **the VSCode extension does not take overrides into account**.
+
+#### bug: double slash comments appended to the nearest property
+
+A [hackfix](https://github.com/stylelint/vscode-stylelint/issues/490#issuecomment-2156218548) is available.
+
+Add the following line in _.vscode/settings.json_ if the issue arises:
+
+```json
+  "stylelint.customSyntax": "postcss-scss"
+```
+
+### JetStorm
+
+You might need to rename _stylelint.config.js_ to _stylelint.config.cjs_ (_CommonJS_) and [adapt the code in consequence](https://stylelint.io/user-guide/configure).

package/currentLFVersion.mjs

@@ -0,0 +1,20 @@
+// We are keeping this hardcoded in LF for local stylelint usage
+import { readFile } from 'node:fs/promises';
+
+let version = null;
+
+try {
+	const LFFolder = import.meta.resolve('@lucca-front/scss');
+
+	if (LFFolder) {
+		const packageJson = await readFile(new URL('../package.json', LFFolder), {
+			encoding: 'utf-8',
+		});
+		version = JSON.parse(packageJson).version;
+		if (version === '0.0.0') {
+			version = null;
+		}
+	}
+} catch (e) {}
+
+export default version;

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@lucca/stylelint-config-prisme",
+  "version": "19.2.0",
+  "description": "Lucca Front stylelint configuration",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LuccaSA/lucca-front.git"
+  },
+  "main": "stylelint.config.mjs",
+  "keywords": [
+    "stylelint",
+    "stylelint-config",
+    "lucca",
+    "scss",
+    "css"
+  ],
+  "private": false,
+  "author": "The product design team <design@lucca.fr>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/LuccaSA/lucca-front/issues"
+  },
+  "homepage": "https://github.com/LuccaSA/lucca-front#readme",
+  "peerDependencies": {
+    "stylelint": "^16.14.1",
+    "stylelint-config-prettier-scss": "^1.0.0",
+    "stylelint-config-standard-scss": "^14.0.0"
+  }
+}

package/stylelint.config.mjs

@@ -0,0 +1,154 @@
+/** @type {import('stylelint').Config} */
+
+import LFDeprecatedProperties from './LFDeprecatedProperties.mjs';
+import LFDeprecatedSelectors from './LFDeprecatedSelectors.mjs';
+import { getDisallowedObjects, getDisallowedData } from './stylelintForLF.mjs';
+
+export default {
+	extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'],
+	overrides: [
+		{
+			// Allow common component files to be empty.
+			files: ['**/vars.scss'],
+			rules: {
+				'custom-property-empty-line-before': null,
+			},
+		},
+	],
+	rules: {
+		// SCSS specific
+		// ============================================================================================
+		'scss/at-function-pattern': [
+			'^(([a-z][a-zA-Z0-9]*)((-(([a-z0-9]+[a-zA-Z0-9]*)|([A-Z]+))+)*)|[A-Z]+)$',
+			{
+				message: (functionName) => `Expected "${functionName}" to match pattern foo(-bar(Baz)*)*`,
+			},
+		],
+		'scss/at-mixin-pattern': [
+			'^(([a-z][a-zA-Z0-9]*)((-(([a-z0-9]+[a-zA-Z0-9]*)|([A-Z]+))+)*)|[A-Z]+)$',
+			{
+				message: `Expected @mixin name to match pattern foo(-bar(Baz)*)*`,
+			},
+		],
+		'scss/at-rule-conditional-no-parentheses': null,
+		'scss/comment-no-empty': null,
+		'scss/dollar-variable-empty-line-before': [
+			'always',
+			{
+				except: ['first-nested'],
+				ignore: ['after-comment', 'after-dollar-variable'],
+			},
+		],
+		'scss/dollar-variable-pattern': [
+			'^([a-z][a-zA-Z0-9]*)((-(([a-z0-9]+[a-zA-Z0-9]*)|([A-Z]+))+)*)$',
+			{
+				message: (variable) => `Expected "${variable}" to match pattern $foo(-bar(Baz)*)*`,
+			},
+		],
+		'scss/percent-placeholder-pattern': [
+			'^([a-z][a-zA-Z0-9]*)((-(([a-z0-9]+[a-zA-Z0-9]*)|([A-Z]+))+)*)$',
+			{
+				message: (placeholder) => `Expected "${placeholder}" to match pattern %foo(-bar(Baz)*)*`,
+			},
+		],
+
+		// Generic rules
+		// ============================================================================================
+		'alpha-value-notation': [
+			'number',
+			{
+				severity: 'warning',
+			},
+		],
+		'at-rule-empty-line-before': [
+			'always',
+			{
+				except: ['first-nested'],
+				ignore: ['after-comment', 'blockless-after-same-name-blockless'],
+				ignoreAtRules: ['else'],
+			},
+		],
+		'block-no-empty': null,
+		'color-hex-length': null,
+		'custom-property-empty-line-before': [
+			'always',
+			{
+				severity: 'warning',
+				except: ['after-comment', 'after-custom-property', 'first-nested'],
+			},
+		],
+		'custom-property-no-missing-var-function': true,
+		'custom-property-pattern': [
+			'^([a-z][a-zA-Z0-9]*)((-(([a-z0-9]+[a-zA-Z0-9]*)|([A-Z]+))+)*)$',
+			{
+				message: (customProperty) => `Expected "${customProperty}" to match pattern --foo(-bar(Baz)*)*`,
+			},
+		],
+		'declaration-block-no-redundant-longhand-properties': null,
+		'declaration-empty-line-before': [
+			'always',
+			{
+				severity: 'warning',
+				except: ['after-comment', 'after-declaration', 'first-nested'],
+			},
+		],
+		'declaration-property-value-disallowed-list': [
+			{ '/.*/': getDisallowedObjects(LFDeprecatedProperties) },
+			{
+				url: 'https://prisme.lucca.io/94310e217/p/40c515-cycle-de-vie-des-composants/b/95175f',
+				message: (property, value) => getDisallowedData(LFDeprecatedProperties, value).message,
+				severity: (property, value) => getDisallowedData(LFDeprecatedProperties, value).severity,
+			},
+		],
+		'keyframes-name-pattern': [
+			'^([a-z][a-zA-Z0-9]*)((-(([a-z0-9]+[a-zA-Z0-9]*)|([A-Z]+))+)*)$',
+			{
+				message: (keyframeName) => `Expected "${keyframeName}" to match pattern foo(-bar(Baz)*)*`,
+			},
+		],
+		'number-max-precision': 5,
+		'property-disallowed-list': [
+			getDisallowedObjects(LFDeprecatedProperties),
+			{
+				url: 'https://prisme.lucca.io/94310e217/p/40c515-cycle-de-vie-des-composants/b/95175f',
+				message: (property) => getDisallowedData(LFDeprecatedProperties, property).message,
+				severity: (property) => getDisallowedData(LFDeprecatedProperties, property).severity,
+			},
+		],
+		'property-no-unknown': [
+			true,
+			{
+				ignoreProperties: ['scrollbar-3dlight-color'],
+			},
+		],
+		'selector-class-pattern': [
+			'^([a-z][a-zA-Z0-9]*)(((-|_)(([a-z0-9]+[a-zA-Z0-9]*)|([A-Z]+))+)*)$',
+			{
+				message: (selectorClass) => `Expected "${selectorClass}" to match pattern .foo(-bar(Baz)*)*`,
+			},
+		],
+		'selector-disallowed-list': [
+			getDisallowedObjects(LFDeprecatedSelectors),
+			{
+				splitList: true,
+				reportDisables: true,
+				url: 'https://prisme.lucca.io/94310e217/p/40c515-cycle-de-vie-des-composants/b/95175f',
+				message: (selector) => getDisallowedData(LFDeprecatedSelectors, selector).message,
+				severity: (selector) => getDisallowedData(LFDeprecatedSelectors, selector).severity,
+			},
+		],
+		'selector-id-pattern': [
+			'^([a-z][a-zA-Z0-9]*)(((-|_)(([a-z0-9]+[a-zA-Z0-9]*)|([A-Z]+))+)*)$',
+			{
+				message: (selectorId) => `Expected "${selectorId}" to match pattern #foo(-bar(Baz)*)*`,
+			},
+		],
+		'selector-pseudo-element-no-unknown': [
+			true,
+			{
+				ignorePseudoElements: ['ng-deep'],
+			},
+		],
+		'value-keyword-case': null,
+	},
+};

package/stylelintForLF.mjs

@@ -0,0 +1,148 @@
+import LFVersions from './LFVersions.mjs';
+import currentLFVersion from './currentLFVersion.mjs';
+
+/**
+ * Get all blacklisted elements from all versions.
+ *
+ * @return {Array[Regex | String]}
+ */
+export function getDisallowedObjects(disallowedObjects) {
+	return disallowedObjects.reduce((output, object) => {
+		return output.concat(object.objectPattern);
+	}, []);
+}
+
+/**
+ * Get data related to object.
+ *
+ * @param {Array[Object{objectPattern, versionDeprecated, versionDeleted}]} disallowedObjects - List of disallowed objects
+ * @param {String} faultyPattern - Pattern provided by Stylelint, to check against list of custom patterns
+ * @return {{message: String, severity: String}}
+ */
+export function getDisallowedData(disallowedObjects, faultyPattern) {
+	let objectData = disallowedObjects.find((haystack) => {
+		// If the patterns are within an array, parse it.
+		if (Array.isArray(haystack.objectPattern)) {
+			return haystack.objectPattern.find((subHaystack) => {
+				return comparePatterns(faultyPattern, subHaystack);
+			});
+		}
+
+		return comparePatterns(faultyPattern, haystack.objectPattern);
+	});
+
+	objectData = setDates(objectData);
+	objectData.faultyPattern = faultyPattern;
+
+	return {
+		message: getMessage(objectData),
+		severity: getSeverity(objectData),
+	};
+}
+
+/**
+ * Set deprecation and deletion dates for an object.
+ *
+ * @param {Object} objectData - Object found in the list of disallowed objects
+ * @return {Object}           - objectData with dates.
+ */
+function setDates(objectData) {
+	return {
+		...objectData,
+		dateDeprecated: getDateForVersion(objectData.versionDeprecated),
+		dateDeleted: getDateForVersion(objectData.versionDeleted),
+	};
+}
+
+/**
+ * Is the parameter a valid date?
+ *
+ * @param {*} date - Value to analise
+ * @return boolean
+ */
+function isValidDate(date) {
+	return date instanceof Date && !isNaN(date);
+}
+
+/**
+ * Get date for the specified LF version.
+ *
+ * @param {string} version - semver formatted LF version
+ * @return {Date|undefined}
+ */
+function getDateForVersion(version) {
+	if (version && version in LFVersions) {
+		const date = new Date(LFVersions[version]);
+
+		if (isValidDate(date)) {
+			return date;
+		}
+	}
+}
+
+/**
+ * Compare the faulty pattern with disallowed patterns.
+ *
+ * @param {String} faultyPattern - faultyPattern returned by Stylelint
+ * @param {Array[RegExp | String] | RegExp | String} disallowedPattern - Custom pattern to match
+ * @return boolean
+ */
+function comparePatterns(faultyPattern, disallowedPattern) {
+	return typeof disallowedPattern === 'string' ? faultyPattern === disallowedPattern : disallowedPattern.test(faultyPattern);
+}
+
+/**
+ * Format message based on versions criticity.
+ *
+ * @param {Object} objectData
+ * @return {String}
+ */
+function getMessage(objectData) {
+	let pattern = `${objectData.faultyPattern}`;
+	let status = 'deprecated';
+	let messageDeprecated = '';
+	let messageDeleted = '';
+	let messageLFVersionWarning = '';
+
+	if (!currentLFVersion) {
+		messageLFVersionWarning = ' | LF version not found';
+	}
+
+	if (objectData.dateDeprecated) {
+		const daysAgo = Math.ceil((objectData.dateDeprecated.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
+		const daysAgoString = new Intl.RelativeTimeFormat().format(daysAgo, 'day');
+
+		messageDeprecated = ` | since ${objectData.dateDeprecated.toLocaleDateString()} (${daysAgoString}, LF ${objectData.versionDeprecated})`;
+	}
+
+	if (objectData.dateDeleted) {
+		const daysLeft = Math.ceil((objectData.dateDeleted.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
+		const dayString = new Intl.RelativeTimeFormat().format(daysLeft, 'day');
+
+		if (daysLeft <= 0) {
+			status = 'deleted';
+		}
+
+		messageDeleted = ` | until ${objectData.dateDeleted.toLocaleDateString()} (${dayString}, LF ${objectData.versionDeleted})`;
+	}
+
+	return `${status}${messageLFVersionWarning}${messageDeprecated}${messageDeleted} | ${pattern}`;
+}
+
+/**
+ * Get severity based on version used.
+ *
+ * @param {String} objectData
+ * @return {'warning'|'error'}
+ */
+function getSeverity(objectData) {
+	if (!currentLFVersion) {
+		return 'warning';
+	}
+
+	if (currentLFVersion < objectData.versionDeleted) {
+		return 'warning';
+	}
+
+	return 'error';
+}