@tokens-studio/sd-transforms - npm Package Compare versions

Comparing version 0.4.4 to 0.4.5

package.json

 {
   "name": "@tokens-studio/sd-transforms",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio",
@@ -12,22 +12,28 @@ "license": "MIT",
   "type": "module",
-  "main": "index.js",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "files": [
-    "index.cjs",
-    "index.js",
-    "index.d.ts",
-    "src/**/*"
+    "dist"
   ],
   "scripts": {
-    "build:postcss-calc": "rollup -c rollup-postcss-calc.config.mjs",
-    "build:cjs": "rollup index.js --file index.cjs --format cjs --plugin @rollup/plugin-commonjs --plugin rollup-plugin-cleanup --plugin @rollup/plugin-node-resolve",
-    "build:types": "tsc -p tsconfig.build.types.json",
+    "build": "rimraf dist && npm run esm-postcss-calc && run-p build:*",
+    "build:cjs": "rollup -c rollup/cjs.config.mjs",
+    "build:main": "tsc -p tsconfig.build.json",
+    "esm-postcss-calc": "rollup -c rollup/postcss-calc.config.mjs",
     "format": "npm run format:eslint && npm run format:prettier",
-    "format:eslint": "eslint --ext .js,.html . --fix",
-    "format:prettier": "prettier \"**/*.{js,md}\" \"package.json\" --write",
+    "format:eslint": "eslint --ext .ts,.html . --fix",
+    "format:prettier": "prettier \"**/*.{ts,md}\" \"package.json\" --write",
     "lint": "run-p lint:*",
-    "lint:eslint": "eslint --ext .js,.html .",
-    "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
-    "lint:types": "tsc",
-    "release": "npm run build:postcss-calc && run-p build:* && changeset publish",
+    "lint:eslint": "eslint --ext .ts,.html .",
+    "lint:prettier": "prettier \"**/*.ts\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
+    "lint:types": "tsc --noEmit",
     "prepare": "husky install",
+    "release": "npm run build && changeset publish",
     "test": "web-test-runner --coverage",
@@ -37,2 +43,3 @@ "test:view:coverage": "cd coverage/lcov-report && npx http-server -o -c-1",
   },
+  "types": "./dist/index.d.ts",
   "dependencies": {
@@ -47,6 +54,9 @@ "color2k": "^2.0.1",
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@open-wc/eslint-config": "^9.2.0",
-    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@web/test-runner": "^0.15.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "@web/dev-server-esbuild": "^0.3.3",
+    "@web/test-runner": "^0.15.1",
     "@web/test-runner-playwright": "^0.9.0",
@@ -61,5 +71,5 @@ "eslint": "^8.32.0",
     "prettier-package-json": "^2.8.0",
-    "rollup": "^3.10.0",
-    "rollup-plugin-cleanup": "^3.2.1",
-    "typescript": "^4.9.4"
+    "rimraf": "^4.1.3",
+    "rollup": "^3.18.0",
+    "typescript": "^4.9.5"
   },
@@ -71,6 +81,2 @@ "keywords": [
   ],
-  "exports": {
-    "import": "./index.js",
-    "require": "./index.cjs"
-  },
   "prettier": {
@@ -77,0 +83,0 @@ "printWidth": 100,

README.md

@@ -32,21 +32,10 @@ # Style Dictionary Transforms for Tokens Studio
 
-### Registering the transforms
+> Note: this library is available both in CJS and ESM
 
-When using Style Dictionary, you're probably required to use CommonJS format, as this is what Style Dictionary is written in:
-
-```cjs
+```js
 const { registerTransforms } = require('@tokens-studio/sd-transforms');
 
 // will register them on StyleDictionary object
-// that is installed as a dependency of sd-transforms,
-// in most cases this will be npm install deduped with
-// your own installation of StyleDictionary,
-// thus being the same object
-// Alternatively, pass your own SD object into this function as an argument
+// that is installed as a dependency of this package.
 registerTransforms();
-
-module.exports = {
-  source: ['**/*.tokens.json/'],
-  // your SD configuration
-};
 ```
@@ -64,27 +53,4 @@
   "platforms": {
-    "js": {
+    "css": {
       "transformGroup": "tokens-studio",
-      "buildPath": "build/js/",
-      "files": [
-        {
-          "destination": "variables.js",
-          "format": "javascript/es6"
-        }
-      ]
-    },
-    "css": {
-      "transforms": [
-        "ts/descriptionToComment",
-        "ts/resolveMath",
-        "ts/size/px",
-        "ts/size/letterspacing",
-        "ts/size/lineheight",
-        "ts/type/fontWeight",
-        "ts/color/hexrgba",
-        "ts/color/modifiers",
-        "ts/typography/css/shorthand",
-        "ts/shadow/shorthand",
-        "attribute/cti",
-        "name/cti/kebab"
-      ],
       "buildPath": "build/css/",
@@ -102,9 +68,7 @@ "files": [
 
-More fine-grained control:
+More fine-grained control is possible, every transformation is available as a raw JavaScript function
+for you to create your own Style-Dictionary transformer out of.
 
 ```js
-import module from 'module';
-import { transformDimension } from '@tokens-studio/sd-transforms';
-
-const require = module.createRequire(import.meta.url);
+const { transformDimension } = require('@tokens-studio/sd-transforms');
 const StyleDictionary = require('style-dictionary');
@@ -121,9 +85,60 @@
 
-### CommonJS
+### Full example
 
-If you use CommonJS, no problem, you can use this package as CommonJS,
-if your tooling supports [package entry points](https://nodejs.org/api/packages.html#package-entry-points) (a.k.a. exports map)!
+```sh
+node build-tokens.js
+```
 
+`build-tokens.js`:
+
 ```cjs
 const { registerTransforms } = require('@tokens-studio/sd-transforms');
+const StyleDictionary = require('style-dictionary');
+
+registerTransforms(StyleDictionary);
+
+const sd = StyleDictionary.extend({
+  source: ['**/*.tokens.json'],
+  platforms: {
+    js: {
+      transformGroup: 'tokens-studio',
+      buildPath: 'build/js/',
+      files: [
+        {
+          destination: 'variables.js',
+          format: 'javascript/es6',
+        },
+      ],
+    },
+    css: {
+      transforms: [
+        'ts/descriptionToComment',
+        'ts/resolveMath',
+        'ts/size/px',
+        'ts/size/letterspacing',
+        'ts/size/lineheight',
+        'ts/type/fontWeight',
+        'ts/color/hexrgba',
+        'ts/color/modifiers',
+        'ts/typography/css/shorthand',
+        'ts/shadow/shorthand',
+        'attribute/cti',
+        'name/cti/kebab',
+      ],
+      buildPath: 'build/css/',
+      files: [
+        {
+          destination: 'variables.css',
+          format: 'css/variables',
+        },
+      ],
+    },
+  },
+});
+
+sd.cleanAllPlatforms();
+sd.buildAllPlatforms();
 ```
+
+> Note: make sure to choose either the full transformGroup, **OR** its separate transforms, so you can adjust or add your own.
+> [Combining a transformGroup with a transforms array can give unexpected results](https://github.com/amzn/style-dictionary/issues/813).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

258085

increased by10.54%

Number of package files

50

increased by11.11%

Lines of code

8096

increased by3.68%

Number of lines in readme file

141

increased by11.9%

Worsened metrics

Dev dependency count

21

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes