@transfermarkt/global-styles 1.4.0 → 1.5.0

package/README.md

@@ -1,4 +1,4 @@
-# Global Styles for Transfermarkt projects
+# Global Styles and Stylelint global preset for Transfermarkt projects
 
 ## Install
 
@@ -6,7 +6,33 @@
 npm i @transfermarkt/global-styles
 ```
 
-## Import
+## Use stylelint config
+
+To use the stylelint config you have to edit your package.json
+
+### package.json
+```
+"stylelint": {"extends": "./node_modules/@transfermarkt/global-styles/config/stylelint/index.js"}
+```
+
+### Configuration of `customSyntax`
+
+It may be necessary to configure the `customSyntax` option in your `stylelint` configuration. This is necessary if you use a syntax that is not supported by stylelint out of the box. For example, if you use the `postcss-scss` syntax, you need to add the following to your `stylelint` configuration:
+
+```
+"stylelint": {
+  "extends": "@transfermarkt/stylelint-config",
+  "customSyntax": "postcss-scss"
+}
+```
+
+For example a project with .scss files will need the custom syntax option with postcss-scss.
+
+**The default value is postcss-html.**
+
+---
+
+## Import styles
 
 To import the styles you have 2 options:
 
@@ -74,9 +100,11 @@ Maybe you have to specify the path with the node_modules folder
    #### Usage
    ```
    .class {
-     font-family: tm-font(primary);
+     font-family: tm-font('septenary');
    }
    ```
+   
+    **Warning:** Using tm-font with 'primary' is deprecated!
 
 5. ### zf-to-rem
    #### Description

package/config/stylelint/index.js

@@ -0,0 +1,50 @@
+module.exports = {
+  extends: ['stylelint-config-standard-scss'],
+  plugins: ['stylelint-order', 'stylelint-selector-bem-pattern', './tm-font-primary-deprecation.mjs'],
+  customSyntax: 'postcss-html',
+  rules: {
+    "transfermarkt/tm-font-primary-deprecation": [
+      true,
+      {
+        "severity": "warning"
+      }
+    ],
+    "property-disallowed-list": "float",
+    "declaration-no-important": [
+      true,
+      {
+        "severity": "warning"
+      }
+    ],
+    "at-rule-disallowed-list": [
+      ["media","import"],
+      {severity: (atRule) => {
+          return atRule.includes("import") ? "error" : "warning"
+        }}],
+    'unit-disallowed-list': ['px',
+      {
+        'ignoreProperties': {
+          'px': ['/^border/', 'top', 'bottom', 'left', 'right', "/^(min-|max-)?(width|height)$/"]
+        }
+      }
+    ],
+    'max-nesting-depth': 2,
+    'order/order': ['custom-properties', 'declarations'],
+    'order/properties-alphabetical-order': true,
+    'font-family-name-quotes': 'always-unless-keyword',
+    'no-descending-specificity': null,
+    'declaration-property-value-no-unknown': [
+      true,
+      {
+        ignoreProperties: {
+          'font-family': ['/tm-font.+/'],
+          '/.+/': ['/rem-calc.+/', '/tm-color.+/', '/map.+/'],
+        },
+      },
+    ],
+    'selector-pseudo-class-no-unknown': [
+      true,
+      { ignorePseudoClasses: 'global' },
+    ],
+  },
+};

package/config/stylelint/tm-font-primary-deprecation.mjs

@@ -0,0 +1,45 @@
+import stylelint from "stylelint";
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions}
+} = stylelint;
+
+const ruleName = "transfermarkt/tm-font-primary-deprecation";
+const messages = ruleMessages(ruleName, {
+  deprecated: "Using 'primary' with 'tm-font' is deprecated. Please use 'septenary' instead."
+});
+
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primaryOption, secondaryOptions, context) => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primaryOption,
+      possible: [true]
+    });
+
+    if (!validOptions) return;
+
+    root.walkDecls(decl => {
+      if (decl.prop === 'font-family') {
+        const css = decl.value;
+        const regex = /tm-font\((?:'|"|)primary(?:'|"|)\)/;
+
+        if (regex.test(css)) {
+          report({
+            result,
+            ruleName,
+            message: messages.deprecated,
+            node: decl,
+            word: "primary"
+          });
+        }
+      }
+    });
+  }
+}
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+
+export default createPlugin(ruleName, ruleFunction);

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@transfermarkt/global-styles",
-  "version": "1.4.0",
-  "description": "Shared styles of the Transfermarkt projects",
+  "version": "1.5.0",
+  "description": "Shared styles and Global configuration for stylelint rules of the Transfermarkt projects",
   "author": "Transfermarkt",
   "license": "MIT",
-  "main": "scss/index.scss",
+  "main": "config/stylelint/index.js",
   "style": "scss/index.scss",
   "scripts": {
     "lint": "stylelint 'scss/**/*.{css,scss}'",
@@ -12,13 +12,22 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "volta": {
-    "node": "20.15.0"
+    "node": "20.17.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "tag": "latest",
     "access": "public"
   },
+  "dependencies": {
+    "postcss": "8.4.45",
+    "postcss-html": "1.7.0",
+    "postcss-scss": "4.0.9",
+    "stylelint": "16.9.0",
+    "stylelint-config-standard-scss": "13.1.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-selector-bem-pattern": "4.0.1"
+  },
   "devDependencies": {
     "@transfermarkt/prettier-config": "^1.3.0",
     "@transfermarkt/semantic-release-config": "2.0.12",
@@ -30,7 +39,7 @@
     "sass-map-get-next-prev": "^1.0.0"
   },
   "stylelint": {
-    "extends": "@transfermarkt/stylelint-config",
+    "extends": "./config/stylelint/index.js",
     "customSyntax": "postcss-scss"
   },
   "prettier": "@transfermarkt/prettier-config",

package/scss/fonts/_index.scss

@@ -0,0 +1,35 @@
+@font-face {
+  font-display: swap;
+  font-family: 'SourceSansPro-VF';
+  font-style: normal;
+  font-weight: normal;
+  src: url('https://tmsi.akamaized.net/fonts/SourceSans3VF-Roman.woff2') format('woff2');
+}
+
+@font-face {
+  ascent-override: 160%;
+  font-family: 'Oswald-fallback';
+  size-adjust: 81.94%;
+  src: local('Arial');
+}
+
+@font-face {
+  ascent-override: 111%;
+  font-family: 'Source Sans Pro-fallback';
+  size-adjust: 93.75%;
+  src: local('Arial');
+}
+
+@font-face {
+  ascent-override: 110%;
+  font-family: 'OSL-fallback';
+  size-adjust: 73.1%;
+  src: local('Arial');
+}
+
+@font-face {
+  ascent-override: 110%;
+  font-family: 'OSB-fallback';
+  size-adjust: 62.7%;
+  src: local('Arial');
+}

package/scss/functions/_strip-unit.scss

@@ -1,7 +1,8 @@
 @use 'sass:math';
+@use 'sass:meta';
 
 @function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
+  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
     @return math.div($number, $number * 0 + 1);
   }
 

package/scss/functions/_tm-color.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:color';
 @use '../variables';
 
 @function tm-color($color-name, $opacity: 1) {

package/scss/functions/_tm-font.scss

@@ -2,6 +2,10 @@
 @use '../variables';
 
 @function tm-font($font-name) {
+  @if $font-name == 'primary' {
+    @warn "The 'primary' parameter in tm-font is deprecated and will be removed in future versions. Please use 'septenary' instead.";
+  }
+
   $font-value: map.get(variables.$tm-fonts, #{$font-name});
 
   @if not $font-value {

package/scss/functions/_zf-to-rem.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use 'strip-unit' as *;
+@use 'sass:meta';
 
 /// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel
 // value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size`
@@ -11,18 +12,18 @@
 // passed through as is.
 @function zf-to-rem($value, $base: null) {
   // Check if the value is a number
-  @if type-of($value) != 'number' {
-    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+  @if meta.type-of($value) != 'number' {
+    @warn meta.inspect($value) + ' was passed to rem-calc(), which is not a number.';
     @return $value;
   }
 
   // Transform em into rem if someone hands over 'em's
-  @if unit($value) == 'em' {
+  @if math.unit($value) == 'em' {
     $value: strip-unit($value) * 1rem;
   }
 
   // Calculate rem if units for $value is not rem or em
-  @if unit($value) != 'rem' {
+  @if math.unit($value) != 'rem' {
     $value: math.div(strip-unit($value), strip-unit($base)) * 1rem;
   }
 

package/scss/index.scss

@@ -1,3 +1,4 @@
+@forward 'fonts';
 @forward 'functions';
 @forward 'mixins';
 @forward 'variables';