From 0768265c6a36624beb758756dd68edbce70c8550 Mon Sep 17 00:00:00 2001 From: Julio Ortega Date: Mon, 14 Aug 2023 16:24:37 -0600 Subject: [PATCH 1/3] build: concat dialtone-vue styles --- docs/.vuepress/theme/client.js | 1 - gulpfile.js | 99 ++++------------------------------ package-lock.json | 13 ++--- package.json | 1 + 4 files changed, 17 insertions(+), 97 deletions(-) diff --git a/docs/.vuepress/theme/client.js b/docs/.vuepress/theme/client.js index ab704f5e95b..038a4b8d8a6 100644 --- a/docs/.vuepress/theme/client.js +++ b/docs/.vuepress/theme/client.js @@ -6,7 +6,6 @@ import NotFound from './layouts/NotFound.vue'; import './assets/css/dialtone.css'; import './assets/less/dialtone-docs.less'; import './assets/less/dialtone-syntax.less'; -import '@/../node_modules/@dialpad/dialtone-vue/dist/style.css'; import { onBeforeMount, provide, ref } from 'vue'; export default defineClientConfig({ diff --git a/gulpfile.js b/gulpfile.js index e44c76da72a..76bab2d4443 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -65,8 +65,8 @@ const postCSSResponsify = settings.styles ? require('@dialpad/postcss-responsive-variations')({ breakpoints, classes }) : null; const postCSSDialtoneGenerator = settings.styles ? require('./postcss/dialtone-generators') : null; -const sourcemaps = require('gulp-sourcemaps'); -const autoprefixer = require('autoprefixer'); +const sourcemaps = settings.styles ? require('gulp-sourcemaps') : null; +const autoprefixer = settings.styles ? require('autoprefixer') : null; // @@ SVGS const path = settings.svgs ? require('path') : null; @@ -115,6 +115,7 @@ const paths = { styles: { inputLib: './lib/build/less/dialtone.less', outputLib: './lib/dist/css/', + dialtoneVue: './node_modules/@dialpad/dialtone-vue/dist/style.css', }, svgs: { sysInput: './lib/build/svg/system/**/*.svg', @@ -214,7 +215,9 @@ const libStyles = function (done) { .pipe(less()) // compile less to css .pipe(replace('../../fonts/', '../fonts/')) .pipe(postCSS([postCSSDialtoneGenerator, postCSSResponsify])) + .pipe(src(paths.styles.dialtoneVue)) .pipe(postCSS([autoprefixer()])) + .pipe(concat('dialtone.css')) .pipe(dest(paths.styles.outputLib)) .pipe(postCSS([postCSSNano])) .pipe(rename({ suffix: '.min' })) @@ -230,12 +233,13 @@ const libStylesDev = function (done) { .pipe(sourcemaps.init()) .pipe(less()) // compile less to css .pipe(postCSS([postCSSDialtoneGenerator, postCSSResponsify])) + .pipe(src(paths.styles.dialtoneVue)) + .pipe(postCSS([autoprefixer()])) + .pipe(concat('dialtone.css')) .pipe(sourcemaps.mapSources(function (sourcePath) { return '../../build/less/' + sourcePath; })) .pipe(sourcemaps.write()) - .pipe(postCSS([autoprefixer()])) - .pipe(concat('dialtone.css')) // concat the css into a single file .pipe(dest(paths.styles.outputLib)); }; @@ -422,89 +426,6 @@ const buildSpotIllustrationSVGs = function (done) { .pipe(dest(paths.spot.outputVue)); }; -// ================================================================================ -// @@ FAVICONS -// ================================================================================ -// -- Build Favicon Task -// const generateFavicons = (type, input, output) => { -// // Make sure this feature is activated before running -// if (!settings.favicons) return done(); -// -// if (type === 'dp') { -// var favInput = paths.favicons.dpInput + input; -// var favOutput = paths.favicons.dpOutput + output; -// } -// else if (type === 'uc') { -// var favInput = paths.favicons.ucInput + input; -// var favOutput = output; -// } -// else if (type === 'docs') { -// var favInput = paths.favicons.docsInput + input; -// var favOutput = output; -// } -// -// return src(favInput) -// .pipe(favicon({ -// appName: 'Dialpad', -// appShortName: null, -// appDescription: null, -// developerName: 'Dialpad', -// developerURL: 'https://dialpad.com/', -// background: null, -// theme_color: "#fff", -// url: 'https://dialpad.com/', -// display: 'standalone', -// orientation: 'portrait', -// scope: '/', -// start_url: '/', -// version: null, -// logging: false, -// html: '/', -// pipeHTML: false, -// replace: true, -// pixel_art: true, -// icons: { -// appleStartup: false, -// firefox: false, -// yandex: false -// } -// })) -// .pipe(dest(favOutput)); -// }; - -// // -- ALL THE FAVICONS TO CREATE -// // -------------------------------------------------------------------------------- -// // DIALPAD -// // -------------------------------------------------------------------------------- -// const faviconDp = () => { return generateFavicons('dp', paths.favicons.dp, 'default/'); } -// const faviconDpNotify = () => { return generateFavicons('dp', paths.favicons.dpNotify, 'default-notify/'); } -// -// // DIALPAD BETA -// // -------------------------------------------------------------------------------- -// const faviconDpBeta = () => { return generateFavicons('dp', paths.favicons.dpBeta, 'beta/'); } -// const faviconDpBetaNotify = () => { return generateFavicons('dp', paths.favicons.dpBetaNotify, 'beta/'); } -// -// // DIALPAD CSR -// // -------------------------------------------------------------------------------- -// const faviconDpCsr = () => { return generateFavicons('dp', paths.favicons.dpCsr, 'csr/'); } -// -// // DIALPAD STAGING -// // -------------------------------------------------------------------------------- -// const faviconDpStaging = () => { return generateFavicons('dp', paths.favicons.dpStaging, 'staging/'); } -// const faviconDpStagingNotify = () => { -// return generateFavicons('dp', paths.favicons.dpStagingNotify, 'staging-notify/'); -// } -// -// // UBERCONFERENCE -// // -------------------------------------------------------------------------------- -// const faviconUberConference = () => { return generateFavicons('uc', paths.favicons.uc, paths.favicons.ucOutput); } -// -// // DIALTONE -// // -------------------------------------------------------------------------------- -// const faviconDialtone = () => { -// return generateFavicons('docs', paths.favicons.docsIcon, paths.favicons.docsOutput); -// } - // ================================================================================ // @@ FONTS // ================================================================================ @@ -688,9 +609,7 @@ exports.docsite = series( exports.clean, webfonts, exports.svg, - parallel( - libStyles, - ), + libStyles, buildDocs, copyNoJekyll, ); diff --git a/package-lock.json b/package-lock.json index 9458c13726c..d5c2431ea9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,6 +63,7 @@ "gulp-svgmin": "^4.1.0", "husky": "^8.0.3", "jest": "^29.5.0", + "less": "^4.2.0", "lesshint": "^6.3.7", "lint-staged": "^13.2.3", "markdownlint": "^0.29.0", @@ -19879,9 +19880,9 @@ } }, "node_modules/less": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz", - "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz", + "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==", "dev": true, "dependencies": { "copy-anything": "^2.0.1", @@ -53503,9 +53504,9 @@ } }, "less": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz", - "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz", + "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==", "dev": true, "requires": { "copy-anything": "^2.0.1", diff --git a/package.json b/package.json index b39aba36daa..dd91498fd9a 100644 --- a/package.json +++ b/package.json @@ -126,6 +126,7 @@ "gulp-svgmin": "^4.1.0", "husky": "^8.0.3", "jest": "^29.5.0", + "less": "^4.2.0", "lesshint": "^6.3.7", "lint-staged": "^13.2.3", "markdownlint": "^0.29.0", From 1c55f4c56e6cbcfd129d386e9d04e726023aa7b9 Mon Sep 17 00:00:00 2001 From: Julio Ortega Date: Mon, 14 Aug 2023 16:25:25 -0600 Subject: [PATCH 2/3] chore: add blog post --- docs/about/whats-new/posts/2023-8-14.md | 34 +++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/about/whats-new/posts/2023-8-14.md diff --git a/docs/about/whats-new/posts/2023-8-14.md b/docs/about/whats-new/posts/2023-8-14.md new file mode 100644 index 00000000000..fa6b07c4927 --- /dev/null +++ b/docs/about/whats-new/posts/2023-8-14.md @@ -0,0 +1,34 @@ +--- +heading: Dialtone Vue CSS bundled in Dialtone +author: Tico Ortega +posted: '2023-8-14' +--- + + + + +Hey everyone, I'd like communicate some recent updates to Dialtone's infrastructure. +There is one small breaking change that consumers of Dialtone Vue will need to make after this update. + +The Dialtone developers will make this update in Dialpad, but if you maintain an app separate from Dialpad you'll have to make this update yourself. + +## Breaking change + +Dialtone Vue's CSS file is now bundled into Dialtone's CSS file, so you no longer need to import Dialtone Vue's CSS file into your code, please remove any of the following lines: + +```js +import '@dialpad/dialtone-vue/css'; +``` + +or within another css file: + +```css +@import 'node_modules/@dialpad/dialtone-vue/dist/style.css'; +``` + + + + From 56ea1d66231328403bfba721e6a4d64c95a3058d Mon Sep 17 00:00:00 2001 From: Julio Ortega Date: Mon, 14 Aug 2023 16:30:53 -0600 Subject: [PATCH 3/3] chore: update README --- README.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 97953f097f1..cd24b8e9a45 100644 --- a/README.md +++ b/README.md @@ -10,13 +10,9 @@ To add Dialtone into your project, you can install it via NPM: npm install @dialpad/dialtone ``` -Once installed, add the following line in your Less file: +Once installed, add the following line in your CSS/LESS file: ``` -@import "node_modules/@dialpad/dialtone/lib/build/less/dialtone.less"; -``` -If you only need access to Dialtone's variables and customizations to build a file and don't need the whole library exported, use this line instead in your Less file: -``` -@import (reference) "node_modules/@dialpad/dialtone/lib/build/less/dialtone.less"; +@import "node_modules/@dialpad/dialtone/lib/dist/css/dialtone.css"; ``` ## Building Dialtone locally @@ -35,4 +31,4 @@ Requesting a feature or reporting a bug? Please do so at the below links: - [Report Bug](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10878&pid=12428) -Please also feel free to contact us via the [#dialtone slack channel](https://dialpad.slack.com/messages/dialtone/) with any questions +Please also feel free to contact us via the [#dialtone Slack channel](https://dialpad.slack.com/messages/dialtone/) with any questions