Some enhancements:

- Added autoprefixer. - Added a PostCSS plugin to transform CSS variables to static references for maximum compatibility. This also appears to have reduced the size of the framework significantly.
2026-01-12 12:09:26 +00:00 · 2017-07-31 22:01:54 -05:00
parent 5f0e986500
commit c10c0b478c
5 changed files with 128 additions and 72 deletions
--- a/dist/shoelace.css
+++ b/dist/shoelace.css
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
    <p>
      Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any
      preprocessing at all. The minified version is only
-      <span data-minifiedSize>31.4KB</span> and much smaller when gzipped.
+      <span data-minifiedSize>18.8KB</span> and much smaller when gzipped.
    </p>
    <p>
      Just link to <code>shoelace.css</code> and add customizations to your stylesheet.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "shoelace-css",
-  "version": "1.0.0-beta4",
+  "version": "1.0.0-beta5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -50,71 +50,27 @@
      "dev": true
    },
    "autoprefixer": {
-      "version": "6.7.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz",
-      "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.2.tgz",
+      "integrity": "sha1-++rwfUj9h44Ggr98vurecorbKxg=",
      "dev": true,
      "requires": {
-        "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000708",
+        "browserslist": "2.2.2",
+        "caniuse-lite": "1.0.30000708",
        "normalize-range": "0.1.2",
        "num2fraction": "1.2.2",
-        "postcss": "5.2.17",
+        "postcss": "6.0.8",
        "postcss-value-parser": "3.3.0"
      },
      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-          "dev": true
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+        "browserslist": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.2.2.tgz",
+          "integrity": "sha512-MejxGMNIeIqzgaMKVYfFTWHinrwZOnWMXteN9VlHinTd13/0aDmXY9uyRqNsCTnVxqRmrjQFcXI7cy0q9K1IYg==",
          "dev": true,
          "requires": {
-            "ansi-styles": "2.2.1",
-            "escape-string-regexp": "1.0.5",
-            "has-ansi": "2.0.0",
-            "strip-ansi": "3.0.1",
-            "supports-color": "2.0.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-              "dev": true
-            }
-          }
-        },
-        "has-flag": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-          "dev": true
-        },
-        "postcss": {
-          "version": "5.2.17",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
-          "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
-          "dev": true,
-          "requires": {
-            "chalk": "1.1.3",
-            "js-base64": "2.1.9",
-            "source-map": "0.5.6",
-            "supports-color": "3.2.3"
-          }
-        },
-        "supports-color": {
-          "version": "3.2.3",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-          "dev": true,
-          "requires": {
-            "has-flag": "1.0.0"
+            "caniuse-lite": "1.0.30000708",
+            "electron-to-chromium": "1.3.16"
          }
        }
      }
@@ -173,6 +129,12 @@
      "integrity": "sha1-wuc2vTt/xfbBTkxt/mK5jtFeils=",
      "dev": true
    },
+    "caniuse-lite": {
+      "version": "1.0.30000708",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000708.tgz",
+      "integrity": "sha1-cdvziMV/N5sbtmyJqJDtwEwlCbY=",
+      "dev": true
+    },
    "chalk": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz",
@@ -351,6 +313,20 @@
          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
          "dev": true
        },
+        "autoprefixer": {
+          "version": "6.7.7",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz",
+          "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
+          "dev": true,
+          "requires": {
+            "browserslist": "1.7.7",
+            "caniuse-db": "1.0.30000708",
+            "normalize-range": "0.1.2",
+            "num2fraction": "1.2.2",
+            "postcss": "5.2.17",
+            "postcss-value-parser": "3.3.0"
+          }
+        },
        "chalk": {
          "version": "1.1.3",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -461,6 +437,12 @@
      "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
      "dev": true
    },
+    "extend": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-2.0.1.tgz",
+      "integrity": "sha1-HugBBonnOV/5RIJByYZSvHWagmA=",
+      "dev": true
+    },
    "fd-slicer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
@@ -1018,6 +1000,73 @@
        }
      }
    },
+    "postcss-css-variables": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.7.0.tgz",
+      "integrity": "sha1-SqWO6zyFmm8JCQE6sXvspWZSh/0=",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "1.0.5",
+        "extend": "2.0.1",
+        "postcss": "5.2.17"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "5.2.17",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
+          "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "js-base64": "2.1.9",
+            "source-map": "0.5.6",
+            "supports-color": "3.2.3"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "1.0.0"
+          }
+        }
+      }
+    },
    "postcss-discard-comments": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
    "url": "https://github.com/claviska/shoelace-css"
  },
  "devDependencies": {
+    "autoprefixer": "^7.1.2",
    "chalk": "^2.0.1",
    "commander": "^2.11.0",
    "cssnano": "^3.10.0",
@@ -17,7 +18,9 @@
    "dotenv": "^4.0.0",
    "fs": "0.0.1-security",
    "postcss": "^6.0.8",
+    "postcss-css-variables": "^0.7.0",
    "postcss-import": "^10.0.0",
    "s3": "^4.4.0"
-  }
+  },
+  "dependencies": {}
 }
--- a/shoelace.js
+++ b/shoelace.js
@@ -10,8 +10,10 @@ const Path = require('path');
 const Program = require('commander');
 const S3 = require('s3');
 const PostCSS = require('postcss');
-const CSSnano = require('cssnano');
+const Autoprefixer = require('autoprefixer');
 const AtImport = require('postcss-import');
+const CSSVariables = require('postcss-css-variables');
+const CSSnano = require('cssnano');

 let source = Path.join(__dirname, 'source/css');
 let dist = Path.join(__dirname, 'dist');
@@ -49,7 +51,9 @@ if(Program.build) {
        }
      };

-      PostCSS([AtImport, CSSnano({
+      PostCSS([Autoprefixer({
+        browsers: ["last 2 versions", "> 5%", "ie >= 11", "iOS >= 8"]
+      }), AtImport, CSSVariables, CSSnano({
        safe: true
      })]).process(css, {
        from: inFile