@mapbox/assembly 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/assembly",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A CSS framework",
   "main": "index.js",
   "files": [
@@ -52,19 +52,19 @@
     "concat-with-sourcemaps": "^1.1.0",
     "cp-file": "^6.0.0",
     "csso": "^4.2.0",
-    "globby": "^8.0.1",
+    "globby": "^10.0.0",
     "indent-string": "^3.1.0",
     "mkdirp": "^0.5.1",
-    "optimize-js": "^1.0.2",
+    "optimize-js": "^1.0.3",
     "p-queue": "^2.4.2",
     "pify": "^3.0.0",
     "postcss": "^8.2.8",
     "postcss-custom-media": "^8.0.0",
-    "postcss-custom-properties": "^7.0.0",
+    "postcss-custom-properties": "^12.1.8",
     "postcss-reporter": "^7.0.0",
     "strip-indent": "^2.0.0",
-    "svgo": "^1.0.5",
-    "svgstore": "^2.0.3",
+    "svgo": "^2.8.0",
+    "svgstore": "^3.0.1",
     "uglify-js": "^3.4.3"
   },
   "devDependencies": {
@@ -86,13 +86,13 @@
     "eslint-plugin-react": "^7.23.2",
     "execall": "^1.0.0",
     "gzip-size": "^5.0.0",
-    "highlight.js": "^9.8.0",
+    "highlight.js": "^11.5.1",
     "husky": "^0.14.3",
     "jest": "^26.6.3",
     "lint-staged": "7.2.0",
     "lodash": "^4.17.21",
     "mime": "^2.3.1",
-    "nodemon": "^1.17.5",
+    "nodemon": "^2.0.18",
     "npm-run-all": "^4.1.3",
     "postcss-discard-comments": "^4.0.0",
     "prettier": "1.13.7",
@@ -101,11 +101,11 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
-    "react-lowlight": "^2.0.0",
-    "remark": "^9.0.0",
-    "remark-react": "^4.0.3",
-    "stylelint": "^9.3.0",
-    "tap-spec": "^5.0.0",
+    "react-lowlight": "^3.0.0",
+    "remark": "^14.0.2",
+    "remark-react": "^9.0.1",
+    "stylelint": "^14.9.1",
+    "tap-spec": "^2.2.2",
     "tape": "^4.9.1",
     "xml2js": "^0.4.19"
   },

package/scripts/build-css.js

@@ -10,7 +10,7 @@ const postcss = require('postcss');
 const csso = require('csso');
 const reporter = require('postcss-reporter');
 const autoprefixer = require('autoprefixer');
-const initPostcssCustomProperties = require('postcss-custom-properties');
+const postcssCustomProperties = require('postcss-custom-properties');
 const postcssCustomMedia = require('postcss-custom-media');
 const defaultVariables = require('../src/variables');
 const defaultMediaQueries = require('../src/media-queries');
@@ -102,11 +102,13 @@ function buildCss(options) {
     ? Object.assign({}, defaultMediaQueries, options.mediaQueries)
     : defaultMediaQueries;
 
-  const customProperties = initPostcssCustomProperties({
+  const customProperties = postcssCustomProperties({
     preserve: false,
-    warnings: true
+    warnings: true,
+    importFrom: {
+      customProperties: variableDefinitions
+    }
   });
-  customProperties.setVariables(variableDefinitions);
 
   const postcssPlugins = [
     customProperties,

package/scripts/build-svg-loader.js

@@ -5,18 +5,19 @@ const _ = require('lodash');
 const fs = require('fs');
 const pify = require('pify');
 const path = require('path');
-const SVGO = require('svgo');
+const { optimize } = require('svgo');
 
 const svgDir = path.join(__dirname, '../src/svgs');
-const svgo = new SVGO({
+const options = {
   plugins: [
     {
-      removeAttrs: {
+      name: 'removeAttrs',
+      params: {
         attrs: 'path:(fill|color|style|width|height|overflow)'
       }
     }
   ]
-});
+};
 
 const baseJsTemplate = options => {
   return `
@@ -50,7 +51,7 @@ function processSvgFile(filename) {
 
   return pify(fs.readFile)(filename, 'utf8')
     .then(content => {
-      return svgo.optimize(content);
+      return optimize(content, options);
     })
     .then(optimizedContent => {
       spriteItems.push({

package/src/variables.json

@@ -1,115 +1,115 @@
 {
-  "gray-dark": "#1a2224",
-  "gray-deep": "#4D5255",
-  "gray": "#757D82",
-  "gray-light": "#C7CACC",
-  "gray-lighter": "#E4E6E7",
-  "gray-faint": "#F7F8F8",
-
-  "pink-dark": "#800C3C",
-  "pink-deep": "#BA1258",
-  "pink": "#FA428F",
-  "pink-light": "#FABDD6",
-  "pink-lighter": "#FCD4E4",
-  "pink-faint": "#FDEEF4",
-
-  "red-dark": "#741806",
-  "red-deep": "#B6290D",
-  "red": "#EB3814",
-  "red-light": "#F8C4B9",
-  "red-lighter": "#FED7CD",
-  "red-faint": "#FDEBE7",
-
-  "orange-dark": "#773503",
-  "orange-deep": "#AE4B04",
-  "orange": "#E46707",
-  "orange-light": "#FCC295",
-  "orange-lighter": "#FEDEC5",
-  "orange-faint": "#FFF3EB",
-
-  "yellow-dark": "#625204",
-  "yellow-deep": "#8E740B",
-  "yellow": "#F3E444",
-  "yellow-light": "#FAF29E",
-  "yellow-lighter": "#FBF7D0",
-  "yellow-faint": "#FDFBE7",
-
-  "green-dark": "#13582F",
-  "green-deep": "#1F7A43",
-  "green": "#2AA75C",
-  "green-light": "#AAE1C0",
-  "green-lighter": "#D3F0DE",
-  "green-faint": "#EAFBF1",
-
-  "blue-dark": "#072E64",
-  "blue-deep": "#0B428E",
-  "blue": "#0F71FA",
-  "blue-light": "#91B7EE",
-  "blue-lighter": "#C8DAF4",
-  "blue-faint": "#E8F1FC",
-
-  "purple-dark": "#512392",
-  "purple-deep": "#6E2FC6",
-  "purple": "#9669D5",
-  "purple-light": "#DBCEED",
-  "purple-lighter": "#E7E0F1",
-  "purple-faint": "#F3F1F6",
-
-  "darken5": "rgba(26, 34, 36, 0.05)",
-  "darken10": "rgba(26, 34, 36, 0.1)",
-  "darken25": "rgba(26, 34, 36, 0.25)",
-  "darken50": "rgba(26, 34, 36, 0.5)",
-  "darken75": "rgba(26, 34, 36, 0.75)",
-
-  "lighten5": "rgba(255, 255, 255, 0.05)",
-  "lighten10": "rgba(255, 255, 255, 0.1)",
-  "lighten25": "rgba(255, 255, 255, 0.25)",
-  "lighten50": "rgba(255, 255, 255, 0.5)",
-  "lighten75": "rgba(255, 255, 255, 0.75)",
-
-  "black": "#000",
-  "white": "#fff",
-  "transparent": "transparent",
-
-  "disabled10": "rgba(158, 163, 167, 0.1)",
-  "disabled25": "rgba(158, 163, 167, 0.25)",
-  "disabled75": "rgba(158, 163, 167, 0.75)",
-
-  "border-radius": "4px",
-  "border-radius-bold": "8px",
-  "border-radius-full": "9999px",
-
-  "transition": "0.125s",
-
-  "focus-shadow": "0 0 0 3px rgba(137, 199, 216, 0.65)",
-
-  "font-size-h1": "36px",
-  "font-size-h2": "30px",
-  "font-size-h3": "24px",
-  "font-size-h4": "20px",
-  "font-size-h5": "16px",
-
-  "line-height-h1": "45px",
-  "line-height-h2": "36px",
-  "line-height-h3": "30px",
-  "line-height-h4": "25px",
-  "line-height-h5": "20px",
-
-  "font-size-xl": "30px",
-  "font-size-l": "20px",
-  "font-size-m": "16px",
-  "font-size-ms": "14px",
-  "font-size-s": "12px",
-  "font-size-xs": "10px",
-
-  "line-height-xl": "45px",
-  "line-height-l": "30px",
-  "line-height-m": "24px",
-  "line-height-ms": "21px",
-  "line-height-s": "18px",
-  "line-height-xs": "15px",
-
-  "font-stack-base": "'Open Sans', sans-serif",
-  "font-stack-mono":
+  "--gray-dark": "#1a2224",
+  "--gray-deep": "#4D5255",
+  "--gray": "#757D82",
+  "--gray-light": "#C7CACC",
+  "--gray-lighter": "#E4E6E7",
+  "--gray-faint": "#F7F8F8",
+
+  "--pink-dark": "#800C3C",
+  "--pink-deep": "#BA1258",
+  "--pink": "#FA428F",
+  "--pink-light": "#FABDD6",
+  "--pink-lighter": "#FCD4E4",
+  "--pink-faint": "#FDEEF4",
+
+  "--red-dark": "#741806",
+  "--red-deep": "#B6290D",
+  "--red": "#EB3814",
+  "--red-light": "#F8C4B9",
+  "--red-lighter": "#FED7CD",
+  "--red-faint": "#FDEBE7",
+
+  "--orange-dark": "#773503",
+  "--orange-deep": "#AE4B04",
+  "--orange": "#E46707",
+  "--orange-light": "#FCC295",
+  "--orange-lighter": "#FEDEC5",
+  "--orange-faint": "#FFF3EB",
+
+  "--yellow-dark": "#625204",
+  "--yellow-deep": "#8E740B",
+  "--yellow": "#F3E444",
+  "--yellow-light": "#FAF29E",
+  "--yellow-lighter": "#FBF7D0",
+  "--yellow-faint": "#FDFBE7",
+
+  "--green-dark": "#13582F",
+  "--green-deep": "#1F7A43",
+  "--green": "#2AA75C",
+  "--green-light": "#AAE1C0",
+  "--green-lighter": "#D3F0DE",
+  "--green-faint": "#EAFBF1",
+
+  "--blue-dark": "#072E64",
+  "--blue-deep": "#0B428E",
+  "--blue": "#0F71FA",
+  "--blue-light": "#91B7EE",
+  "--blue-lighter": "#C8DAF4",
+  "--blue-faint": "#E8F1FC",
+
+  "--purple-dark": "#512392",
+  "--purple-deep": "#6E2FC6",
+  "--purple": "#9669D5",
+  "--purple-light": "#DBCEED",
+  "--purple-lighter": "#E7E0F1",
+  "--purple-faint": "#F3F1F6",
+
+  "--darken5": "rgba(26, 34, 36, 0.05)",
+  "--darken10": "rgba(26, 34, 36, 0.1)",
+  "--darken25": "rgba(26, 34, 36, 0.25)",
+  "--darken50": "rgba(26, 34, 36, 0.5)",
+  "--darken75": "rgba(26, 34, 36, 0.75)",
+
+  "--lighten5": "rgba(255, 255, 255, 0.05)",
+  "--lighten10": "rgba(255, 255, 255, 0.1)",
+  "--lighten25": "rgba(255, 255, 255, 0.25)",
+  "--lighten50": "rgba(255, 255, 255, 0.5)",
+  "--lighten75": "rgba(255, 255, 255, 0.75)",
+
+  "--black": "#000",
+  "--white": "#fff",
+  "--transparent": "transparent",
+
+  "--disabled10": "rgba(158, 163, 167, 0.1)",
+  "--disabled25": "rgba(158, 163, 167, 0.25)",
+  "--disabled75": "rgba(158, 163, 167, 0.75)",
+
+  "--border-radius": "4px",
+  "--border-radius-bold": "8px",
+  "--border-radius-full": "9999px",
+
+  "--transition": "0.125s",
+
+  "--focus-shadow": "0 0 0 3px rgba(137, 199, 216, 0.65)",
+
+  "--font-size-h1": "36px",
+  "--font-size-h2": "30px",
+  "--font-size-h3": "24px",
+  "--font-size-h4": "20px",
+  "--font-size-h5": "16px",
+
+  "--line-height-h1": "45px",
+  "--line-height-h2": "36px",
+  "--line-height-h3": "30px",
+  "--line-height-h4": "25px",
+  "--line-height-h5": "20px",
+
+  "--font-size-xl": "30px",
+  "--font-size-l": "20px",
+  "--font-size-m": "16px",
+  "--font-size-ms": "14px",
+  "--font-size-s": "12px",
+  "--font-size-xs": "10px",
+
+  "--line-height-xl": "45px",
+  "--line-height-l": "30px",
+  "--line-height-m": "24px",
+  "--line-height-ms": "21px",
+  "--line-height-s": "18px",
+  "--line-height-xs": "15px",
+
+  "--font-stack-base": "'Open Sans', sans-serif",
+  "--font-stack-mono":
     "'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace"
 }