css lint, css init, build process

.gitignore

@@ -10,3 +10,8 @@ tmp/
 /dist/
 /_site/
 /.cache/
+
+/_gh_pages/
+/site/docs/**/dist/
+/site/static/**/dist/
+/resources/

build/banner.js

@@ -0,0 +1,14 @@
+'use strict'
+
+const pkg = require('../package.json')
+const year = new Date().getFullYear()
+
+function getBanner(pluginFilename) {
+  return `/*!
+  * Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
+  * Copyright 2018-${year} ${pkg.author}
+  * Licensed under MIT (https://github.com/twbs/tabler/blob/master/LICENSE)
+  */`
+}
+
+module.exports = getBanner

build/postcss.config.js

@@ -0,0 +1,16 @@
+'use strict';
+
+module.exports = ctx => ({
+  map: ctx.file.dirname.includes('examples') ?
+    false :
+    {
+      inline: false,
+      annotation: true,
+      sourcesContent: true
+    },
+  plugins: {
+    autoprefixer: {
+      cascade: false
+    }
+  }
+});

build/rollup.config.js

@@ -0,0 +1,55 @@
+'use strict'
+
+const path = require('path')
+const babel = require('rollup-plugin-babel')
+const resolve = require('rollup-plugin-node-resolve')
+const banner = require('./banner.js')
+
+const BUNDLE = process.env.BUNDLE === 'true'
+const ESM = process.env.ESM === 'true'
+
+let fileDest = `tabler${ESM ? '.esm' : ''}`
+const external = ['popper.js']
+const plugins = [
+  babel({
+    // Only transpile our source code
+    exclude: 'node_modules/**',
+    // Include only required helpers
+    externalHelpersWhitelist: [
+      'defineProperties',
+      'createClass',
+      'inheritsLoose',
+      'defineProperty',
+      'objectSpread'
+    ]
+  })
+]
+const globals = {
+  'popper.js': 'Popper'
+}
+
+if (BUNDLE) {
+  fileDest += '.bundle'
+  // Remove last entry in external array to bundle Popper
+  external.pop()
+  delete globals['popper.js']
+  plugins.push(resolve())
+}
+
+const rollupConfig = {
+  input: path.resolve(__dirname, `../js/tabler.js`),
+  output: {
+    banner,
+    file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
+    format: ESM ? 'esm' : 'umd',
+    globals
+  },
+  external,
+  plugins
+}
+
+if (!ESM) {
+  rollupConfig.output.name = 'tabler'
+}
+
+module.exports = rollupConfig

package.json

@@ -8,8 +8,23 @@
     "linkinator": "linkinator _gh_pages --recurse --skip \"^(?!http://localhost)\"",
     "lint": "npm-run-all --parallel js-lint css-lint",
     "docs-serve": "hugo server --port 9001 --disableFastRender",
-    "css-main": "npm-run-all css-lint css-compile-main css-prefix-main css-minify-main css-copy",
+    "css": "npm-run-all css-compile css-prefix css-minify css-copy",
+    "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css && npm run css-copy",
+    "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
+    "css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/tabler.min.css dist/css/tabler.css",
+    "css-copy": "cross-env-shell shx mkdir -p site/static/docs/$npm_package_version_short/dist/ && cross-env-shell shx cp -r dist/css/ site/static/docs/$npm_package_version_short/dist/",
+    "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
+    "css-main": "npm-run-all css-lint css-compile css-prefix css-minify css-copy",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache js/src build/",
+    "js-compile": "npm-run-all --parallel js-compile-* --sequential js-copy",
+    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
+    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
+    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
+    "js-copy": "cross-env-shell shx mkdir -p site/static/docs/$npm_package_version_short/dist/ && cross-env-shell shx cp -r dist/js/ site/static/docs/$npm_package_version_short/dist/",
+    "js-minify": "npm-run-all js-minify-standalone* js-minify-bundle",
+    "js-minify-standalone": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
+    "js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
+    "js-minify-bundle": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.bundle.js.map,includeSources,url=tabler.bundle.min.js.map\" --output dist/js/tabler.bundle.min.js dist/js/tabler.bundle.js",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
     "watch-js": "nodemon --watch js/src/ --ext js --exec \"npm run js-compile\""
@@ -45,6 +60,19 @@
     "eslint": "5.16.0",
     "eslint-config-xo": "0.26.0",
     "eslint-plugin-import": "2.16.0",
-    "eslint-plugin-unicorn": "8.0.2"
+    "eslint-plugin-unicorn": "8.0.2",
+    "stylelint": "9.10.1",
+    "stylelint-config-twbs-bootstrap": "0.3.0",
+    "node-sass": "4.11.0",
+    "shx": "0.3.2",
+    "postcss-cli": "6.1.2",
+    "clean-css-cli": "4.3.0",
+    "rollup": "1.9.3",
+    "rollup-plugin-babel": "4.3.2",
+    "rollup-plugin-node-resolve": "4.2.2",
+    "terser": "3.17.0"
+  },
+  "dependencies": {
+    "cross-env": "^5.2.0"
   }
 }

scss/tabler.scss

@@ -5,8 +5,6 @@
 
 @import "../node_modules/bootstrap/scss/bootstrap";
 
-@import "debug";
-
 @import "layout/webfonts";
 
 @import "layout/core";

scss/ui/_colors.scss

@@ -5,12 +5,12 @@ COLORS VARIATIONS
  */
 @if $generate-color-hues {
   @each $color, $value in $colors {
-    @include bg-variant(".bg-#{$color}-lightest", mix($value, #ffffff, 10%));
-    @include bg-variant(".bg-#{$color}-lighter", mix($value, #ffffff, 30%));
-    @include bg-variant(".bg-#{$color}-light", mix($value, #ffffff, 70%));
-    @include bg-variant(".bg-#{$color}-dark", mix($value, #000000, 80%));
-    @include bg-variant(".bg-#{$color}-darker", mix($value, #000000, 40%));
-    @include bg-variant(".bg-#{$color}-darkest", mix($value, #000000, 20%));
+    .bg-#{$color}-lightest { background: mix($value, #ffffff, 10%) };
+    .bg-#{$color}-lighter { background: mix($value, #ffffff, 30%) };
+    .bg-#{$color}-light { background: mix($value, #ffffff, 70%) };
+    .bg-#{$color}-dark {background: mix($value, #000000, 80%) };
+    .bg-#{$color}-darker { background: mix($value, #000000, 40%) };
+    .bg-#{$color}-darkest { background: mix($value, #000000, 20%) };
 
     .bg-#{$color}-lt {
       color: $value !important;
@@ -38,7 +38,9 @@ SOCIAL COLORS
 
 @if $generate-colors {
   @each $color, $value in $colors {
-    @include bg-variant(".bg-#{$color}", $value);
+    .bg-#{$color} {
+      background: $value;
+    }
 
     .text-#{$color} {
       color: $value !important;