W3C Syntax refactor to allow value & type token names/groups

.changeset/neat-zoos-reflect.md

@@ -0,0 +1,5 @@
+---
+'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.

__integration__/__snapshots__/customFormats.test.snap.js

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

__integration__/w3c-forward-compat.test.js

@@ -58,14 +58,14 @@ describe('integration', () => {
           type: 'value',
           matcher: (token) => token.$type === 'color',
           transformer: (token) => {
-            return Color(token.$value).toRgbString();
+            return Color(sd.options.usesW3C ? token.$value : token.value).toRgbString();
           },
         },
         'custom/add/px': {
           type: 'value',
           matcher: (token) => token.$type === 'dimension',
           transformer: (token) => {
-            return `${token.$value}px`;
+            return `${sd.options.usesW3C ? token.$value : token.value}px`;
           },
         },
       },

__tests__/StyleDictionary.test.js

@@ -326,4 +326,17 @@ describe('StyleDictionary class + extend method', () => {
     expect(sd.tokens.dimensions.nested.deep.lg.$type).to.equal('dimension');
     expect(sd.tokens.dimensions.nope.$type).to.equal('spacing');
   });
+
+  it('should detect usage of W3C draft spec tokens', async () => {
+    const sd = new StyleDictionary({
+      tokens: {
+        datalist: {
+          key: { color: { $value: '#222' } },
+          value: { color: { $value: '#000' } },
+        },
+      },
+    });
+    await sd.hasInitialized;
+    expect(sd.options.usesW3C).to.be.true;
+  });
 });

__tests__/buildFile.test.js

@@ -39,23 +39,25 @@ describe('buildFile', () => {
   });
 
   it('should error if format doesnt exist or isnt a function', () => {
-    expect(buildFile.bind(null, { destination: '__tests__output/test.txt' }, {}, {})).to.throw(
+    expect(buildFile.bind(null, { destination: '__tests__output/test.txt' }, {}, {}, {})).to.throw(
       'Please enter a valid file format',
     );
     expect(
-      buildFile.bind(null, { destination: '__tests__output/test.txt', format: {} }, {}, {}),
+      buildFile.bind(null, { destination: '__tests__output/test.txt', format: {} }, {}, {}, {}),
     ).to.throw('Please enter a valid file format');
     expect(
-      buildFile.bind(null, { destination: '__tests__/__output/test.txt', format: [] }, {}, {}),
+      buildFile.bind(null, { destination: '__tests__/__output/test.txt', format: [] }, {}, {}, {}),
     ).to.throw('Please enter a valid file format');
   });
 
   it('should error if destination doesnt exist or isnt a string', () => {
-    expect(buildFile.bind(null, { format }, {}, {})).to.throw('Please enter a valid destination');
-    expect(buildFile.bind(null, { format, destination: [] }, {}, {})).to.throw(
+    expect(buildFile.bind(null, { format }, {}, {}, {})).to.throw(
       'Please enter a valid destination',
     );
-    expect(buildFile.bind(null, { format, destination: {} }, {}, {})).to.throw(
+    expect(buildFile.bind(null, { format, destination: [] }, {}, {}, {})).to.throw(
+      'Please enter a valid destination',
+    );
+    expect(buildFile.bind(null, { format, destination: {} }, {}, {}, {})).to.throw(
       'Please enter a valid destination',
     );
   });
@@ -81,7 +83,7 @@ describe('buildFile', () => {
 
     it('should generate warning messages for output name collisions', () => {
       GroupMessages.clear(PROPERTY_NAME_COLLISION_WARNINGS);
-      buildFile({ destination, format }, {}, dictionary);
+      buildFile({ destination, format }, {}, dictionary, {});
 
       const collisions = dictionary.allTokens
         .map(
@@ -107,7 +109,7 @@ describe('buildFile', () => {
 
     it('should not warn users if the format is a nested format', () => {
       const consoleStub = stubMethod(console, 'log');
-      buildFile({ destination, format: nestedFormat }, {}, dictionary);
+      buildFile({ destination, format: nestedFormat }, {}, dictionary, {});
       expect(consoleStub.calledWith(chalk.bold.green(`✔︎ ${destination}`))).to.be.true;
     });
   });
@@ -137,6 +139,7 @@ describe('buildFile', () => {
       },
       {},
       dictionary,
+      {},
     );
     expect(fileExists('__tests__/__output/test.emptyTokens')).to.be.false;
   });
@@ -151,6 +154,7 @@ describe('buildFile', () => {
         buildPath: '__tests__/__output/',
       },
       {},
+      {},
     );
     expect(fileExists('__tests__/__output/test.txt')).to.be.true;
   });

__tests__/buildFiles.test.js

@@ -104,17 +104,17 @@ describe('buildFiles', () => {
   });
 
   it('should work without buildPath', () => {
-    buildFiles(dictionary, platform);
+    buildFiles(dictionary, platform, {});
     expect(fileExists('__tests__/__output/test.json')).to.be.true;
   });
 
   it('should work with buildPath', () => {
-    buildFiles(dictionary, platformWithBuildPath);
+    buildFiles(dictionary, platformWithBuildPath, {});
     expect(fileExists('__tests__/__output/test.json')).to.be.true;
   });
 
   it('should work with a filter', () => {
-    buildFiles(dictionary, platformWithFilter);
+    buildFiles(dictionary, platformWithFilter, {});
     expect(fileExists('__tests__/__output/test.json')).to.be.true;
     const output = JSON.parse(fs.readFileSync(resolve('__tests__/__output/test.json')));
     expect(output).to.have.property('bingo');

__tests__/cleanDir.test.js

@@ -34,6 +34,7 @@ describe('cleanDir', () => {
       { destination: 'test.txt', format },
       { buildPath: '__tests__/__output/extradir1/extradir2/' },
       {},
+      {},
     );
     cleanFile(
       { destination: 'test.txt', format },

__tests__/cleanDirs.test.js

@@ -55,15 +55,15 @@ describe('cleanDirs', () => {
   });
 
   it('should delete without buildPath', () => {
-    buildFiles(dictionary, platform);
+    buildFiles(dictionary, platform, {});
     cleanFiles(platform);
     cleanDirs(platform);
     expect(dirExists('__tests__/__output/extradir1/extradir2')).to.be.false;
     expect(dirExists('__tests__/__output/extradir1')).to.be.false;
   });
 
   it('should delete with buildPath', () => {
-    buildFiles(dictionary, platformWithBuildPath);
+    buildFiles(dictionary, platformWithBuildPath, {});
     cleanFiles(platformWithBuildPath);
     cleanDirs(platformWithBuildPath);
     expect(dirExists('__tests__/__output/extradir1/extradir2')).to.be.false;

__tests__/cleanFile.test.js

@@ -29,7 +29,7 @@ describe('cleanFile', () => {
   });
 
   it('should delete a file properly', () => {
-    buildFile({ destination: 'test.txt', format }, { buildPath: '__tests__/__output/' }, {});
+    buildFile({ destination: 'test.txt', format }, { buildPath: '__tests__/__output/' }, {}, {});
     cleanFile({ destination: 'test.txt', format }, { buildPath: '__tests__/__output/' }, {});
     expect(fileExists('__tests__/__output/test.txt')).to.be.false;
   });

__tests__/cleanFiles.test.js

@@ -54,13 +54,13 @@ describe('cleanFiles', () => {
   });
 
   it('should delete without buildPath', () => {
-    buildFiles(dictionary, platform);
+    buildFiles(dictionary, platform, {});
     cleanFiles(platform);
     expect(fileExists('__tests__/__output/test.json')).to.be.false;
   });
 
   it('should delete with buildPath', () => {
-    buildFiles(dictionary, platformWithBuildPath);
+    buildFiles(dictionary, platformWithBuildPath, {});
     cleanFiles(platformWithBuildPath);
     expect(fileExists('__tests__/t__/__output/test.json')).to.be.false;
   });