@spectrum-css/vars - npm Package Compare versions

Comparing version 8.0.5 to 9.0.0

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+<a name="9.0.0"></a>
+# 9.0.0
+🗓 2023-04-03 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/vars@8.0.5...@spectrum-css/vars@9.0.0)
+
+* fix(tokens)!: rgb transform to split out rgb values from css attributes (#1590) ([b714db4](https://github.com/adobe/spectrum-css/commit/b714db4)), closes [#1590](https://github.com/adobe/spectrum-css/issues/1590)
+
+
+### 🛑 BREAKING CHANGES
+
+* transforms color tokens to split out their `rgb` values
+
+Co-authored-by: castastrophe <[e-mail]>
+
+
+
+
+
 <a name="8.0.5"></a>
@@ -8,0 +25,0 @@ ## 8.0.5

gulpfile.js

@@ -13,22 +13,9 @@ /*
 
+const path = require('path');
+
 const gulp = require('gulp');
-const logger = require('gulplog');
-const fs = require('fs');
 const concat = require('gulp-concat');
 const replace = require('gulp-replace');
-const del = require('del');
-const path = require('path');
+const insert = require('gulp-insert');
 
-function clean() {
-  return del('dist/*');
-}
-
-function prepareBuild(cb) {
-  var dir = 'dist';
-  if (!fs.existsSync(dir)){
-    fs.mkdirSync(dir);
-  }
-  cb();
-}
-
 function copyGlobals() {
@@ -45,3 +32,3 @@ return gulp.src([
 function copySources() {
-  let classMap = {
+  const classMap = {
     'spectrum-darkest.css': '.spectrum--darkest',
@@ -59,3 +46,3 @@ 'spectrum-dark.css': '.spectrum--dark',
     ])
-    .pipe(replace(':root', function (match){
+    .pipe(replace(':root', function () {
       return classMap[path.basename(this.file.path)];
@@ -66,4 +53,2 @@ }))
 
-const insert = require('gulp-insert');
-
 function concatGlobalsFinal() {
@@ -76,3 +61,3 @@ return gulp.src([
   ])
-    .pipe(replace(/{/, function(match) {
+    .pipe(replace(/{/, function () {
       if (this.file.path.match('Aliases.css')) {
@@ -94,3 +79,3 @@ return `{\n  /* ${path.basename(this.file.path)} */`;
   ])
-    .pipe(replace(/:root {/, function(match) {
+    .pipe(replace(/:root {/, function() {
       return `  /* ${path.basename(this.file.path)} */`;
@@ -106,13 +91,11 @@ }))
 function processColorAliases() {
-  var colorStops = [
-    'darkest',
-    'dark',
-    'light',
-    'lightest'
-  ];
-
   return gulp.src([
     'css/globals/spectrum-colorAliases.css'
   ])
-    .pipe(replace(/:root/, colorStops.map(stop => `.spectrum--${stop}`).join(',\n')))
+    .pipe(replace(/:root/, [
+      'darkest',
+      'dark',
+      'light',
+      'lightest'
+    ].map(stop => `.spectrum--${stop}`).join(',\n')))
     .pipe(gulp.dest('dist/globals/'));
@@ -122,11 +105,9 @@ }
 function processDimensionAliases() {
-  var scales = [
-    'medium',
-    'large'
-  ];
-
   return gulp.src([
     'css/globals/spectrum-dimensionAliases.css'
   ])
-    .pipe(replace(/:root/, scales.map(scale => `.spectrum--${scale}`).join(',\n')))
+    .pipe(replace(/:root/, [
+      'medium',
+      'large'
+    ].map(scale => `.spectrum--${scale}`).join(',\n')))
     .pipe(gulp.dest('dist/globals/'));
@@ -149,5 +130,3 @@ }
 
-let build = gulp.series(
-  clean,
-  prepareBuild,
+const build = gulp.series(
   gulp.parallel(
@@ -165,9 +144,5 @@ copyMetadata,
 
-exports.update = gulp.series(
-  require('./tasks/updateDNA').updateDNA,
-  build
-);
+exports.update = require('./tasks/updateDNA').updateDNA;
 
-exports.clean = clean;
 exports.default = build;
 exports.build = exports.buildLite = exports.buildHeavy = exports.buildMedium = build;

package.json

 {
   "name": "@spectrum-css/vars",
-  "version": "8.0.5",
+  "version": "9.0.0",
   "description": "The Spectrum CSS vars package",
@@ -18,13 +18,17 @@ "license": "Apache-2.0",
   "scripts": {
-    "build": "gulp build",
-    "update": "gulp update"
+    "build": "yarn clean && gulp build",
+    "clean": "rimraf dist/*",
+    "copy:metadata": "cp json/spectrum-metadata.json dist/",
+    "dna:clean": "rimraf css/* js/*",
+    "dna:update": "yarn dna:clean && gulp update && yarn build"
   },
   "devDependencies": {
-    "del": "^5.0.0",
+    "@adobe/spectrum-tokens-deprecated": "^11.8.0",
     "gulp": "^4.0.0",
     "gulp-concat": "^2.6.1",
+    "gulp-insert": "^0.5.0",
     "gulp-replace": "^1.0.0",
-    "gulplog": "^1.0.0",
     "postcss": "^7.0.36",
     "replace-ext": "^1.0.0",
+    "rimraf": "^4.4.1",
     "through2": "^3.0.1"
@@ -35,3 +39,3 @@ },
   },
-  "gitHead": "8261ab7501ea20471fc587e84ae5d4c78427cd2f"
+  "gitHead": "e699f377481e0ab323697cb0210f328ce46b3efd"
 }

tasks/updateDNA.js

@@ -14,48 +14,6 @@ /*
 const path = require('path');
-const fsp = require('fs').promises;
+
 const gulp = require('gulp');
-const ext = require('replace-ext');
-const logger = require('gulplog');
 const through = require('through2');
 
-const del = require('del');
-
-// Base variables we can just map directly
-let flatVars = [
-  'colorGlobals',
-  'fontGlobals',
-  'dimensionGlobals',
-  'animationGlobals',
-  'staticAliases'
-];
-
-let dropTokens = {
-  'name': true,
-  'description': true,
-  'status:': true,
-  'varBaseName': true
-};
-
-function stripReference(value) {
-  return value.replace(/(colorStopData|colorTokens|scaleData|dimensionTokens|colorAliases|dimensionAliases)\./g, '');
-}
-
-function getJSVariableReference(value) {
-  let reference = stripReference(value);
-  let parts = reference.split('.');
-  let finalReference = parts.shift() + parts.map(JSON.stringify).map(value => `[${value}]`).join('');
-  return finalReference;
-}
-
-function getExport(key, value) {
-  if (value[0] === '$') {
-    let reference = getJSVariableReference(value.substr(1));
-    return `exports[${JSON.stringify(key)}] = ${reference};
-`;
-  } else {
-    return `exports[${JSON.stringify(key)}] = ${JSON.stringify(value)};
-`;
-  }
-}
-
 function getCSSVariableReference(value) {
@@ -94,3 +52,3 @@ if (value[0] === '$') {
   if (value[0] === '$') {
-    let reference = getCSSVariableReference(value);
+    const reference = getCSSVariableReference(value);
     return `  ${key}: var(${reference});
@@ -143,17 +101,10 @@ `;
 
-function isDimensionalValue(key, value) {
-  return (
-    key.match(/weight|transform|height|width|radius|size|gap|offset/) ||
-    value.match(/[\d.]+(em|px|pt|deg)/) ||
-    value.match(/\$scale|\$dimension\$font\$animation/)
-  );
-}
+const dropTokens = {
+  'name': true,
+  'description': true,
+  'status:': true,
+  'varBaseName': true
+};
 
 function calculateOverrides(objects, processValue) {
-  let commonKeys = {
-    name: true,
-    description: true,
-    varBaseName: true
-  };
-
   let identical = {};
@@ -260,57 +211,4 @@ let overrides = {};
 
-      let generateCSSIndexFile = (files, folder) => {
-        let contents = `${files.map(module => `@import ${JSON.stringify(module)};`).join('\n')}`;
-        pushFile(contents, 'index.css', folder);
-      };
-
-      let generateJSIndexFile = (files, folder) => {
-        let contents = `${files.map(module => `exports[${JSON.stringify(module.replace(/.*?\/(.*?)/, '$1'))}] = require("./${module}.js");`).join('\n')}`;
-        pushFile(contents, 'index.js', folder);
-      };
-
-      let generateJSFile = (sections, fileName, folder) => {
-        let folderParts = folder.split('/');
-        let folderCount = folderParts.length;
-        let basePath = folderCount > 1 ? '../'.repeat(folderCount - 1) : './';
-        let contents = '';
-
-        // We have issues with switch, so only allow self refs for base vars
-        if (folderCount === 1) {
-          contents += `const ${fileName.replace(/-.*/, '')} = exports;
-`;
-        }
-
-        let dependencies = {};
-
-        sections.forEach(section => {
-          for (let key in section) {
-            if (dropTokens[key]) {
-              continue;
-            }
-
-            let value = section[key];
-            contents += getExport(key, value);
-
-            if (value[0] === '$') {
-              let dependency = stripReference(value.substr(1)).split('.').shift();
-              if (dependency != fileName) {
-                dependencies[dependency] = true;
-              }
-            }
-          }
-        });
-
-        let requires = '';
-        for (let dependency in dependencies) {
-          requires += `const ${dependency} = require('${basePath}${dependency}.js');
-`;
-        }
-
-        pushFile(requires + contents, `${fileName}.js`, folder);
-        dnaModules.push(path.join(folderParts.slice(1).join('/'), fileName));
-      };
-
       let generateFiles = (sections, fileName, folder = '') => {
         generateCSSFile(sections, fileName, `css/${folder}`);
-      // generateJSFile(sections, fileName, `js/${folder}`);
       };
@@ -323,3 +221,2 @@
       };
-      let dnaModules = [];
 
@@ -341,4 +238,9 @@ // Get the list of stops and scales
       // Globals
-      flatVars.forEach(key => {
-        // generateJSFile([dnaData[key]], key, 'js/globals');
+      [
+        'colorGlobals',
+        'fontGlobals',
+        'dimensionGlobals',
+        'animationGlobals',
+        'staticAliases'
+      ].forEach(key => {
         generateCSSFile([dnaData[key]], key, 'css/globals');
@@ -393,3 +295,2 @@ });
         if (dimensionVariables[fullName] && dimensionVariables[fullName].cssVariableName !== cssVariableName) {
-          // logger.debug(`Found override for ${fullName} (${dimensionVariables[fullName].cssVariableName} vs ${cssVariableName})`);
           componentDimensionOverrides[dimensionVariables[fullName].name][fullName] = dimensionVariables[fullName].value;
@@ -479,7 +380,2 @@ componentDimensionOverrides[scaleName][fullName] = value;
         cssFilesGenerated[componentName] = true;
-
-      // generateJSFile([
-      //   jsElementVariables[componentName]
-      // ], componentName, 'js/components');
-      // generateJSIndexFile(dnaModules, 'js/');
       }
@@ -490,3 +386,3 @@
       // Determine alias overrides
-      let [colorAliases, colorAliasesOverrides] = calculateOverrides(populateObject(dnaData.colorStopData, stops, 'colorAliases'), getCSSVariableReference);
+      let [colorAliases,] = calculateOverrides(populateObject(dnaData.colorStopData, stops, 'colorAliases'), getCSSVariableReference);
 
@@ -510,3 +406,3 @@ // Remove aliases with the same values from colorstops
       // Determine semantic overrides
-      let [colorSemantics, colorSemanticsOverrides] = calculateOverrides(populateObject(dnaData.colorStopData, stops, 'colorSemantics'), getCSSVariableReference);
+      let [colorSemantics,] = calculateOverrides(populateObject(dnaData.colorStopData, stops, 'colorSemantics'), getCSSVariableReference);
 
@@ -544,3 +440,3 @@ // Remove semantics with the same values from colorstops
       // Determine dimension alias overrides
-      let [dimensionAliases, dimensionAliasOverrides] = calculateOverrides(populateObject(dnaData.scaleData, scales, 'dimensionAliases'), getCSSVariableReference);
+      let [dimensionAliases,] = calculateOverrides(populateObject(dnaData.scaleData, scales, 'dimensionAliases'), getCSSVariableReference);
 
@@ -606,11 +502,3 @@ // Remove aliases with the same values from scales
 
-function clean() {
-  return del([
-    'css/*',
-    'js/*'
-  ]);
-}
-
 exports.updateDNA = gulp.series(
-  clean,
   generateDNAFiles,
@@ -617,0 +505,0 @@ gulp.parallel(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

34481728

decreased by-0.01%

Dev dependency count

9

increased by12.5%

Lines of code

331544

decreased by-0.03%

No dependency changes