chore: rename from W3C to Dtcg

.changeset/cuddly-cheetahs-drum.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': minor
+---
+
+Rename `typeW3CDelegate` utility function to `typeDtcgDelegate`, as using "W3C" is highly discouraged when the standard isn't a W3C standard yet.

.changeset/grumpy-peaches-flow.md

@@ -2,4 +2,4 @@
 'style-dictionary': patch
 ---
 
-Fix small issue in type w3c delegate utility type tracking.
+Fix small issue in type DTCG delegate utility type tracking.

.changeset/neat-zoos-reflect.md

@@ -2,4 +2,4 @@
 'style-dictionary': minor
 ---
 
-Support the use of "value"/"type"/"description" as token names or token group names, at the sacrifice of now no longer being able to combine non-W3C and W3C syntax within the same token dictionary.
+Support the use of "value"/"type"/"description" as token names or token group names, at the sacrifice of now no longer being able to combine non-DTCG and DTCG syntax within the same token dictionary.

.changeset/ninety-geckos-build.md

@@ -2,4 +2,4 @@
 'style-dictionary': patch
 ---
 
-Expose typeW3CDelegate utility. Don't take "value" into account anymore to determine that it's a design token, use $value.
+Expose `typeDtcgDelegate` utility. Don't take `value` into account anymore to determine that it's a design token, use `$value`.

.changeset/rich-pianos-walk.md

@@ -2,4 +2,4 @@
 'style-dictionary': minor
 ---
 
-Support W3C Draft specification for Design Tokens, by adding support for $value, $type and $description properties.
+Support Design Token Community Group Draft specification for Design Tokens, by adding support for $value, $type and $description properties.

CHANGELOG.md

@@ -22,14 +22,14 @@
 
 ### Patch Changes
 
-- 0c1a36f: Fix small issue in type w3c delegate utility type tracking.
-- 0c1a36f: Expose typeW3CDelegate utility. Don't take "value" into account anymore to determine that it's a design token, use $value.
+- 0c1a36f: Fix small issue in type DTCG delegate utility type tracking.
+- 0c1a36f: Expose `typeDtcgDelegate` utility. Don't take `value` into account anymore to determine that it's a design token, use `$value`.
 
 ## 4.0.0-prerelease.9
 
 ### Minor Changes
 
-- 294fd0e: Support W3C Draft specification for Design Tokens, by adding support for $value, $type and $description properties.
+- 294fd0e: Support Design Token Community Group Draft specification for Design Tokens, by adding support for $value, $type and $description properties.
 
 ### Patch Changes
 

__integration__/__snapshots__/customFormats.test.snap.js

@@ -963,7 +963,7 @@ snapshots["inline custom with new args should match snapshot"] =
   "options": {
     "otherOption": "Test",
     "showFileHeader": true,
-    "usesW3C": false
+    "usesDtcg": false
   }
 }`;
 /* end snapshot inline custom with new args should match snapshot */
@@ -1895,7 +1895,7 @@ snapshots["register custom format with new args should match snapshot"] =
   "options": {
     "otherOption": "Test",
     "showFileHeader": true,
-    "usesW3C": false
+    "usesDtcg": false
   }
 }`;
 /* end snapshot register custom format with new args should match snapshot */

__integration__/w3c-forward-compat.test.js

@@ -29,7 +29,7 @@ describe('integration', () => {
    * - $type special property & inherits from ancestors
    * - $description special property
    */
-  describe('W3C DTCG draft spec forward compatibility', async () => {
+  describe('DTCG draft spec forward compatibility', async () => {
     const sd = new StyleDictionary({
       tokens: {
         colors: {
@@ -58,14 +58,14 @@ describe('integration', () => {
           type: 'value',
           matcher: (token) => token.$type === 'color',
           transformer: (token) => {
-            return Color(sd.options.usesW3C ? token.$value : token.value).toRgbString();
+            return Color(sd.options.usesDtcg ? token.$value : token.value).toRgbString();
           },
         },
         'custom/add/px': {
           type: 'value',
           matcher: (token) => token.$type === 'dimension',
           transformer: (token) => {
-            return `${sd.options.usesW3C ? token.$value : token.value}px`;
+            return `${sd.options.usesDtcg ? token.$value : token.value}px`;
           },
         },
       },

__tests__/StyleDictionary.test.js

@@ -327,7 +327,7 @@ describe('StyleDictionary class + extend method', () => {
     expect(sd.tokens.dimensions.nope.$type).to.equal('spacing');
   });
 
-  it('should detect usage of W3C draft spec tokens', async () => {
+  it('should detect usage of DTCG draft spec tokens', async () => {
     const sd = new StyleDictionary({
       tokens: {
         datalist: {
@@ -337,6 +337,6 @@ describe('StyleDictionary class + extend method', () => {
       },
     });
     await sd.hasInitialized;
-    expect(sd.options.usesW3C).to.be.true;
+    expect(sd.options.usesDtcg).to.be.true;
   });
 });

__tests__/common/formatHelpers/__snapshots__/createPropertyFormatter.test.snap.js

@@ -34,21 +34,21 @@ snapshots["common formatHelpers createPropertyFormatter commentStyle allows over
 $color-green: #00FF00;`;
 /* end snapshot common formatHelpers createPropertyFormatter commentStyle allows overriding formatting commentStyle 2 */
 
-snapshots["common formatHelpers createPropertyFormatter commentStyle supports W3C spec $description property for comments 1"] = 
+snapshots["common formatHelpers createPropertyFormatter commentStyle supports DTCG spec $description property for comments 1"] = 
 `  --color-red: #FF0000; /* Foo bar qux red */`;
-/* end snapshot common formatHelpers createPropertyFormatter commentStyle supports W3C spec $description property for comments 1 */
+/* end snapshot common formatHelpers createPropertyFormatter commentStyle supports DTCG spec $description property for comments 1 */
 
-snapshots["common formatHelpers createPropertyFormatter commentStyle supports W3C spec $description property for comments 2"] = 
+snapshots["common formatHelpers createPropertyFormatter commentStyle supports DTCG spec $description property for comments 2"] = 
 `  --color-green: #00FF00; /* Foo bar qux green */`;
-/* end snapshot common formatHelpers createPropertyFormatter commentStyle supports W3C spec $description property for comments 2 */
+/* end snapshot common formatHelpers createPropertyFormatter commentStyle supports DTCG spec $description property for comments 2 */
 
-snapshots["common formatHelpers createPropertyFormatter commentStyle supports W3C spec $description property for comments 3"] = 
+snapshots["common formatHelpers createPropertyFormatter commentStyle supports DTCG spec $description property for comments 3"] = 
 `  /**
    * Foo
    * bar
    * qux
    * blue
    */
   --color-blue: #0000FF;`;
-/* end snapshot common formatHelpers createPropertyFormatter commentStyle supports W3C spec $description property for comments 3 */
+/* end snapshot common formatHelpers createPropertyFormatter commentStyle supports DTCG spec $description property for comments 3 */
 

__tests__/common/formatHelpers/createPropertyFormatter.test.js

@@ -359,7 +359,7 @@ describe('common', () => {
           await expect(sassRed).to.matchSnapshot(2);
         });
 
-        it('supports W3C spec $description property for comments', async () => {
+        it('supports DTCG spec $description property for comments', async () => {
           const descriptionDictionary = {
             color: {
               red: {

__tests__/exportPlatform.test.js

@@ -209,7 +209,7 @@ describe('exportPlatform', () => {
     expect(dictionary.color.red.value.h).to.equal(20);
   });
 
-  it('should handle .value and non .value references per the W3C spec', async () => {
+  it('should handle .value and non .value references per the DTCG spec', async () => {
     const tokens = {
       colors: {
         red: { value: '#f00' },
@@ -437,7 +437,7 @@ describe('exportPlatform', () => {
     });
   });
 
-  describe('w3c forward compatibility', () => {
+  describe('DTCG forward compatibility', () => {
     it('should allow using $value instead of value', async () => {
       const sd = new StyleDictionary({
         tokens: {
@@ -469,7 +469,7 @@ describe('exportPlatform', () => {
               return token.$type === 'dimension';
             },
             transformer: (token) => {
-              return `${sd.options.usesW3C ? token.$value : token.value}px`;
+              return `${sd.options.usesDtcg ? token.$value : token.value}px`;
             },
           },
         },

__tests__/utils/combineJSON.test.js

@@ -18,30 +18,30 @@ import combineJSON from '../../lib/utils/combineJSON.js';
 
 describe('utils', () => {
   describe('combineJSON', () => {
-    it('should return an object with usesW3C & tokens prop', async () => {
+    it('should return an object with usesDtcg & tokens prop', async () => {
       const test = await combineJSON(['__tests__/__json_files/*.json']);
       expect(typeof test).to.equal('object');
-      const { tokens, usesW3C } = test;
+      const { tokens, usesDtcg } = test;
       expect(typeof tokens).to.equal('object');
-      expect(typeof usesW3C).to.equal('boolean');
+      expect(typeof usesDtcg).to.equal('boolean');
     });
 
     it('should handle wildcards', async () => {
       const test = await combineJSON(['__tests__/__json_files/*.json']);
       expect(typeof test).to.equal('object');
-      const { tokens, usesW3C } = test;
+      const { tokens, usesDtcg } = test;
       expect(typeof tokens).to.equal('object');
-      expect(typeof usesW3C).to.equal('boolean');
+      expect(typeof usesDtcg).to.equal('boolean');
     });
 
     it('should handle js modules that export objects', async () => {
       const absPath = join('__tests__', '__json_files', '*.js');
       const relativePath = '__tests__/__json_files/*.js';
       const test = await combineJSON([absPath, relativePath]);
       expect(typeof test).to.equal('object');
-      const { tokens, usesW3C } = test;
+      const { tokens, usesDtcg } = test;
       expect(typeof tokens).to.equal('object');
-      expect(typeof usesW3C).to.equal('boolean');
+      expect(typeof usesDtcg).to.equal('boolean');
     });
 
     it('should do a deep merge', async () => {

__tests__/utils/preprocess.test.js

@@ -11,10 +11,10 @@
  * and limitations under the License.
  */
 import { expect } from 'chai';
-import { typeW3CDelegate } from '../../lib/utils/preprocess.js';
+import { typeDtcgDelegate } from '../../lib/utils/preprocess.js';
 
 describe('utils', () => {
-  describe('typeW3CDelegate', () => {
+  describe('typeDtcgDelegate', () => {
     it('should correctly let tokens inherit the $type property while respecting local overrides', () => {
       const tokens = {
         dimension: {
@@ -52,7 +52,7 @@ describe('utils', () => {
         },
       };
 
-      expect(typeW3CDelegate(tokens)).to.eql({
+      expect(typeDtcgDelegate(tokens)).to.eql({
         dimension: {
           $type: 'dimension',
           scale: {

docs/using_reference_utils.md

@@ -51,7 +51,7 @@ const flat = flattenTokens(sd);
  */
 ```
 
-> You can pass a second argument `usesW3C`, if set to true, the flattenTokens utility will assume W3C syntax (`$value` props)
+> You can pass a second argument `usesDtcg`, if set to true, the flattenTokens utility will assume DTCG syntax (`$value` props)
 
 ### usesReference
 
@@ -102,7 +102,7 @@ resolveReferences('solid {spacing.2} {colors.black}', sd.tokens); // alternative
 ```
 
 > You can pass a third `options` argument where you can pass some configuration options for how references are resolved
-> Most notable option for public usage is `usesW3C`, if set to true, the resolveReferences utility will assume W3C syntax (`$value` props)
+> Most notable option for public usage is `usesDtcg`, if set to true, the resolveReferences utility will assume DTCG syntax (`$value` props)
 
 ### getReferences
 
@@ -143,7 +143,7 @@ getReferences(sd, 'solid {spacing.2} {colors.black}'); // alternative way, yet i
 ```
 
 > You can pass a third `options` argument where you can pass some configuration options for how references are resolved
-> Most notable option for public usage is `usesW3C`, if set to true, the resolveReferences utility will assume W3C syntax (`$value` props)
+> Most notable option for public usage is `usesDtcg`, if set to true, the resolveReferences utility will assume DTCG syntax (`$value` props)
 
 #### Complicated example
 
@@ -273,12 +273,12 @@ export const SemanticBgPrimary = ColorsBlack;
 export const Border = `solid ${Spacing2} ${SemanticBgPrimary}`;
 ```
 
-> Note that the above example does not support W3C syntax, but this could be quite easily added,
-> since you can query `sd.options.usesW3C` or inside a formatter functions `dictionary.options.usesW3C`
+> Note that the above example does not support DTCG syntax, but this could be quite easily added,
+> since you can query `sd.options.usesDtcg` or inside a formatter functions `dictionary.options.usesDtcg`
 
-### typeW3CDelegate
+### typeDtcgDelegate
 
-This function processes your ["W3C Design Token Community Group Draft spec"-compliant](https://design-tokens.github.io/community-group/format/) dictionary of tokens, and ensures that `$type` inheritance is applied.
+This function processes your ["Design Token Community Group Draft spec"-compliant](https://design-tokens.github.io/community-group/format/) dictionary of tokens, and ensures that `$type` inheritance is applied.
 
 We built this utility because it's cheaper to apply the inheritance once, rather than on every access of a token's "$type" property, checking the ancestor tree to find it.
 

lib/StyleDictionary.js

@@ -26,7 +26,7 @@ import resolveObject from './utils/resolveObject.js';
 import getName from './utils/references/getName.js';
 import GroupMessages from './utils/groupMessages.js';
 import flattenTokens from './utils/flattenTokens.js';
-import { detectW3CSyntax } from './utils/detectW3CSyntax.js';
+import { detectDtcgSyntax } from './utils/detectDtcgSyntax.js';
 import { preprocess } from './utils/preprocess.js';
 
 import transformObject from './transform/object.js';
@@ -178,11 +178,11 @@ export default class StyleDictionary extends Register {
     });
     this.options = options;
 
-    let { usesW3C } = this.options;
+    let { usesDtcg } = this.options;
 
-    // Try to detect W3C if not specified by user in options
-    if (this.tokens && usesW3C === undefined) {
-      usesW3C = detectW3CSyntax(this.tokens);
+    // Try to detect DTCG if not specified by user in options
+    if (Object.entries(this.tokens).length > 0 && usesDtcg === undefined) {
+      usesDtcg = detectDtcgSyntax(this.tokens);
     }
     // grab the inline tokens, ones either defined in the configuration object
     // or that already exist from extending another style dictionary instance
@@ -199,13 +199,13 @@ export default class StyleDictionary extends Register {
         undefined,
         false,
         this.parsers,
-        this.options.usesW3C,
+        this.options.usesDtcg,
       );
 
       includeTokens = result.tokens;
-      // If it wasn't known yet whether W3C is used, combineJSON util will have auto-detected it
-      if (usesW3C === undefined) {
-        usesW3C = result.usesW3C;
+      // If it wasn't known yet whether DTCG is used, combineJSON util will have auto-detected it
+      if (usesDtcg === undefined) {
+        usesDtcg = result.usesDtcg;
       }
     }
 
@@ -228,13 +228,13 @@ export default class StyleDictionary extends Register {
         },
         true,
         this.parsers,
-        this.options.usesW3C,
+        this.options.usesDtcg,
       );
 
       sourceTokens = result.tokens;
-      // If it wasn't known yet whether W3C is used, combineJSON util will have auto-detected it
-      if (usesW3C === undefined) {
-        usesW3C = result.usesW3C;
+      // If it wasn't known yet whether DTCG is used, combineJSON util will have auto-detected it
+      if (usesDtcg === undefined) {
+        usesDtcg = result.usesDtcg;
       }
 
       if (GroupMessages.count(PROPERTY_VALUE_COLLISIONS) > 0) {
@@ -252,7 +252,7 @@ export default class StyleDictionary extends Register {
     // Merge inline, include, and source tokens
     const unprocessedTokens = deepExtend([{}, inlineTokens, includeTokens, sourceTokens]);
     this.tokens = await preprocess(unprocessedTokens, this.preprocessors);
-    this.options = { ...this.options, usesW3C };
+    this.options = { ...this.options, usesDtcg };
     this.hasInitializedResolve(null);
 
     // For chaining
@@ -398,7 +398,7 @@ export default class StyleDictionary extends Register {
     // replacing that value in the string.
     const tokens = await this.exportPlatform(platform);
     this.allTokens = /** @type {TransformedToken[]} */ (
-      flattenTokens(tokens, this.options.usesW3C)
+      flattenTokens(tokens, this.options.usesDtcg)
     );
     // This is the dictionary object we pass to the file
     // building and action methods.

lib/buildFile.js

@@ -100,7 +100,7 @@ export default function buildFile(file, platform = {}, dictionary, options) {
       let collisions = nameCollisionObj[tokenName]
         .map((token) => {
           let tokenPathText = chalk.rgb(255, 69, 0)(token.path.join('.'));
-          let valueText = chalk.rgb(255, 140, 0)(options.usesW3C ? token.$value : token.value);
+          let valueText = chalk.rgb(255, 140, 0)(options.usesDtcg ? token.$value : token.value);
           return tokenPathText + '   ' + valueText;
         })
         .join('\n        ');

lib/common/actions.js

@@ -42,7 +42,7 @@ export default {
           const dir = `${imagesDir}${token.attributes.state}`;
           const path = `${dir}/${name}.png`;
           fs.mkdirSync(dir, { recursive: true });
-          fs.copyFileSync(options.usesW3C ? token.$value : token.value, path);
+          fs.copyFileSync(options.usesDtcg ? token.$value : token.value, path);
         }
       });
     },