feat(styles): add tokens get function

packages/components/package.json

@@ -64,7 +64,7 @@
     "eslint-plugin-react": "7.35.0",
     "rimraf": "6.0.1",
     "rollup-plugin-postcss": "4.0.2",
-    "sass": "1.77.8",
+    "sass": "1.78.0",
     "ts-jest": "29.2.4",
     "typescript": "5.5.4"
   },

packages/demo/package.json

@@ -65,7 +65,7 @@
     "karma-jasmine-html-reporter": "2.1.0",
     "raw-loader": "4.0.2",
     "rimraf": "6.0.1",
-    "sass": "1.77.8",
+    "sass": "1.78.0",
     "sockjs": "0.3.24",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",

packages/documentation/package.json

@@ -76,7 +76,7 @@
     "rehype-autolink-headings": "7.1.0",
     "rehype-slug": "6.0.0",
     "rimraf": "6.0.1",
-    "sass": "1.77.8",
+    "sass": "1.78.0",
     "storybook": "8.2.7",
     "typescript": "5.5.4"
   }

packages/documentation/vite.config.js

@@ -23,4 +23,11 @@ export default {
     ],
     exclude: ['@swisspost/design-system-styles'],
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['mixed-decls'],
+      },
+    },
+  },
 };

packages/internet-header/package.json

@@ -78,7 +78,7 @@
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-scss": "4.0.0",
     "rollup-plugin-visualizer": "5.12.0",
-    "sass": "1.77.8",
+    "sass": "1.78.0",
     "start-server-and-test": "2.0.5",
     "ts-jest": "29.2.4",
     "typescript": "5.5.4"

packages/nextjs-integration/package.json

@@ -24,7 +24,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
-    "sass": "1.77.8",
+    "sass": "1.78.0",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

packages/styles/gulpfile.js

@@ -120,6 +120,7 @@ gulp.task('sass', () => {
         outputStyle: 'compressed',
         includePaths: options.includePaths,
         quietDeps: true,
+        silenceDeprecations: ['mixed-decls'],
       }),
     )
     .pipe(gulpPostCss([autoprefixer()]))
@@ -140,6 +141,7 @@ gulp.task('build-components', () => {
         outputStyle: 'compressed',
         includePaths: options.includePaths,
         quietDeps: true,
+        silenceDeprecations: ['mixed-decls'],
       }),
     )
     .pipe(gulpPostCss([autoprefixer()]))
@@ -156,6 +158,7 @@ gulp.task('sass:dev', () => {
       gulpSass({
         includePaths: options.includePaths,
         quietDeps: true,
+        silenceDeprecations: ['mixed-decls'],
       }),
     )
     .pipe(gulpPostCss([autoprefixer()]))

packages/styles/package.json

@@ -23,8 +23,8 @@
     "unit": "gulp sass:tests",
     "clean": "rimraf out-tsc dist",
     "format": "prettier src/**/*.scss --write",
-    "lint": "stylelint src/**/*.scss",
-    "lint:fix": "stylelint src/**/*.scss --fix"
+    "lint": "stylelint src/**/*.scss !src/tokens/temp/**",
+    "lint:fix": "stylelint src/**/*.scss !src/tokens/temp/** --fix"
   },
   "peerDependencies": {
     "@angular/core": "^18.0.0",
@@ -62,11 +62,11 @@
     "postcss-scss": "4.0.9",
     "prettier": "3.3.3",
     "rimraf": "6.0.1",
-    "sass": "1.77.8",
-    "stylelint": "16.8.1",
+    "sass": "1.78.0",
+    "stylelint": "16.9.0",
     "stylelint-config-sass-guidelines": "11.1.0",
     "stylelint-prettier": "5.0.2",
-    "stylelint-scss": "6.4.1",
+    "stylelint-scss": "6.5.1",
     "typescript": "5.5.4"
   },
   "sass": {

packages/styles/src/functions/_index.scss

@@ -1,3 +1,4 @@
+@forward 'tokens';
 @forward 'contrast';
 @forward 'color';
 @forward 'list';

packages/styles/src/functions/_tokens.scss

@@ -0,0 +1,74 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:string';
+
+/**
+ * @function get($prefix, $key-name)
+ * Gets a token-key, normalizes and resolves it with the $default-map.
+ *
+ * @param {string} $prefix - The token map name.
+ * @param {string} $key-name - The token key name.
+ * @param {map} $map - The map to get the token key from.
+ *
+ * @returns {any} $value of $normalized-prefix[$normalized-key-name]
+ *
+ * @example
+ * @use '../tokens/components' as components;
+ * @use '../functions/tokens' as tokens;
+ *
+ * // set the default map to use or always use the third function parameter to specify a different map.
+ * tokens.$default-map: components.$post-body;
+ *
+ * // lets say you have two keys: 'post-selector-font-family' and 'post-selector-font-size' in the same map.
+ * // then use it like so:
+ *
+ * selector {
+ *   font-family: tokens.get('post-selector', 'font-family');
+ *   font-family: tokens.get('selector', 'font-family');
+ *
+ *   font-family: tokens.get('selector-font', 'family');
+ *   font-size: tokens.get('selector-font', 'size');
+ *
+ *   font-family: tokens.get('selector', 'font-family', $my-custom-map);  // use a different map than the default one
+ * }
+ */
+
+$_namespace: 'post';
+$default-map: null !default;
+
+@function get($prefix, $key-name, $map: $default-map) {
+  $key-name: normalize-key-name($prefix, $key-name);
+
+  @if not map.has-key($map, $key-name) {
+    @error 'No such key "#{$key-name}" in given map! Available keys are: #{meta.inspect(map.keys($map))}.';
+  }
+
+  @return map.get($map, $key-name);
+}
+
+@function normalize-key-name($original-prefix, $key-name) {
+  $namespaced-prefix: normalize-prefix($original-prefix);
+  $prefix: string.slice($namespaced-prefix, string.length('#{$_namespace}-') + 1);
+  $key-contains-namespace: string.index($key-name, '#{$_namespace}-') == 1;
+  $key-contains-prefix: string.index($key-name, '#{$prefix}-') == 1;
+
+  @if not $key-contains-namespace {
+    @if not $key-contains-prefix {
+      $key-name: '#{$namespaced-prefix}-#{$key-name}';
+    } @else {
+      $key-name: '#{$_namespace}-#{$key-name}';
+    }
+  }
+
+  @return $key-name;
+}
+
+@function normalize-prefix($prefix) {
+  $prefix-contains-namespace: string.index($prefix, '#{$_namespace}-') == 1;
+
+  @if not $prefix-contains-namespace {
+    $prefix: '#{$_namespace}-#{$prefix}';
+  }
+
+  @return $prefix;
+}