From 9619f3096495b170efbb5c86b0d500b4ce3784e8 Mon Sep 17 00:00:00 2001 From: Alfie Jones <32960904+AlfieJones@users.noreply.github.com> Date: Mon, 28 Mar 2022 11:48:24 +0100 Subject: [PATCH 1/3] added scss variable to optimise css --- src/base.scss | 30 +++++++++++++++++------------- src/utils.scss | 24 +++++++++++++++++++----- src/variables.scss | 9 +++++++++ 3 files changed, 45 insertions(+), 18 deletions(-) diff --git a/src/base.scss b/src/base.scss index 12f25ed..657737c 100644 --- a/src/base.scss +++ b/src/base.scss @@ -4,20 +4,24 @@ border:none; background: none; cursor: pointer; - input[type="checkbox"] { - display: none; - } - .theme-toggle-sr { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; + @if $htmlElements > 1 { + input[type="checkbox"] { + display: none; + } } + @if $htmlElements > 0 { + .theme-toggle-sr { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + } } @media (prefers-reduced-motion: reduce) { diff --git a/src/utils.scss b/src/utils.scss index 0ff2027..02656a6 100644 --- a/src/utils.scss +++ b/src/utils.scss @@ -28,10 +28,24 @@ } @mixin toggledSelector($name) { - #{$toggledClass}:not(label).theme-toggle, - .theme-toggle input[type="checkbox"]:checked ~ { - .theme-toggle__#{$name} { - @content; + @if $htmlElements == 0 or $htmlElements == 1 { + #{$toggledClass}.theme-toggle { + .theme-toggle__#{$name} { + @content; + } + } + } @else if $htmlElements == 2 { + .theme-toggle input[type="checkbox"]:checked ~ { + .theme-toggle__#{$name} { + @content; + } } - } + } @else { + #{$toggledClass}:not(label).theme-toggle, + .theme-toggle input[type="checkbox"]:checked ~ { + .theme-toggle__#{$name} { + @content; + } + } + } } diff --git a/src/variables.scss b/src/variables.scss index 3472814..5517917 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -8,3 +8,12 @@ $reverseClass: ".theme-toggle--reversed"; $forceMotionClass: ".theme-toggle--force-motion"; // Total duration of each animation $duration: 500ms; + + + +// Which HTML elements to support +// 0 -> button +// 1 -> div +// 2 -> checkbox input +// 3 -> all of the above +$htmlElements: 0 !default; From 28267ecc2a75ae619115f6abfaa5cf4fce514987 Mon Sep 17 00:00:00 2001 From: Alfie Jones <32960904+AlfieJones@users.noreply.github.com> Date: Mon, 28 Mar 2022 12:58:55 +0100 Subject: [PATCH 2/3] updated grunt to support new variables --- Gruntfile.js | 115 +++++++++++++++++++++++++++++----------- src/variables.scss | 2 +- src/variants/react.scss | 1 + 3 files changed, 85 insertions(+), 33 deletions(-) create mode 100644 src/variants/react.scss diff --git a/Gruntfile.js b/Gruntfile.js index bf64a51..add79cc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -13,12 +13,13 @@ module.exports = function (grunt) { clean: { build: ['css'], + react: ['css/react', 'css/temp/react'] }, // -- Sass Config -------------------------------------------------------- sass: { - dist: { + build: { files: [{ expand: true, flatten: true, @@ -26,34 +27,55 @@ module.exports = function (grunt) { dest: './css/', ext: '.css' }], + }, + react: { + files: [{ + expand: true, + flatten: true, + src: ['css/temp/react/toggles/*.scss'], + dest: './css/react', + ext: '.css' + }], } }, - // -- Concat Config -------------------------------------------------------- concat: { - bundle: { - src: ['src/toggles/*.scss', 'src/base.scss'], - dest: 'css/temp/toggles/bundle.scss', + react: { + files: [{ + 'css/temp/react/toggles/bundle.scss': ['src/variants/react.scss', 'src/toggles/*.scss', 'src/base.scss'], + }], }, + build: { + files: [{ + 'css/temp/toggles/bundle.scss': ['src/toggles/*.scss', 'src/base.scss'], + }], + } }, // -- PostCSS Config -------------------------------------------------------- postcss: { - dist: { + build: { options: { processors: [ require('autoprefixer')() ] }, src: './css/*.css' + }, + react: { + options: { + processors: [ + require('autoprefixer')() + ] + }, + src: './css/react/*.css' } - }, css_purge: { - dist: { + build: { options: {}, files: [{ @@ -64,6 +86,17 @@ module.exports = function (grunt) { ext: '.min.css', }] }, + react: { + options: {}, + + files: [{ + expand: true, + cwd: "css/react/", + src: '*.css', + dest:"css/react/", + ext: '.min.css', + }] + }, }, cssmin: { @@ -71,22 +104,34 @@ module.exports = function (grunt) { sourceMap: false, }, target: { - files: [{ - expand: true, - cwd: "css/", - src: '*.css', - dest:"css/", - ext: '.min.css', - }] + files: [{ + expand: true, + cwd: "css/react/", + src: '*.css', + dest:"css/react/", + ext: '.min.css', + }, + { + expand: true, + cwd: "css/", + src: '*.css', + dest:"css/", + ext: '.min.css', + }] } }, copy: { - main: { + build: { files: [ - {expand: true, flatten: true, src: ['src/variables.scss', 'src/utils.scss'], dest: 'css/temp'}, + {expand: true, flatten: true, src: ['src/variables.scss', 'src/utils.scss', 'src/variants/react.scss'], dest: 'css/temp'}, ], }, + react: { + files: [ + {expand: true, flatten: true, src: ['src/variables.scss', 'src/utils.scss', 'src/variants/react.scss'], dest: 'css/temp/react'}, + ], + }, }, // -- Watch/Observe Config ------------------------------------------------- @@ -104,11 +149,15 @@ module.exports = function (grunt) { }; files.forEach((name) => { - config.concat[name] = { - src: [`src/toggles/${name}.scss`, `src/base.scss`], + config.concat.react.files.push({ + src: [ 'src/variants/react.scss', `src/toggles/${name}.scss`, `src/base.scss`], + dest: `css/temp/react/toggles/${name}.scss`, + }); + config.concat.build.files.push({ + src: [`src/toggles/${name}.scss`, 'src/base.scss'], dest: `css/temp/toggles/${name}.scss`, - }; - }) + }); + }); grunt.initConfig(config); @@ -124,22 +173,24 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-postcss'); - grunt.registerTask('default', ['clean', 'build']); + grunt.registerTask('default', ['build', 'react']); grunt.registerTask('build', [ - 'copy', - 'concat', - 'sass', - 'postcss', + 'clean:build', + 'copy:build', + 'concat:build', + 'sass:build', + 'postcss:build', 'cssmin', ]); - // Makes the `watch` task run a build first. - grunt.renameTask('watch', 'observe'); - grunt.registerTask('watch', ['default', 'observe']); - - grunt.registerTask('release', [ - 'default', + grunt.registerTask('react', [ + 'clean:react', + 'copy:react', + 'concat:react', + 'sass:react', + 'postcss:react', + 'cssmin', ]); }; \ No newline at end of file diff --git a/src/variables.scss b/src/variables.scss index 5517917..75d39b0 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -16,4 +16,4 @@ $duration: 500ms; // 1 -> div // 2 -> checkbox input // 3 -> all of the above -$htmlElements: 0 !default; +$htmlElements: 3 !default; diff --git a/src/variants/react.scss b/src/variants/react.scss new file mode 100644 index 0000000..112f001 --- /dev/null +++ b/src/variants/react.scss @@ -0,0 +1 @@ +$htmlElements: 0; From 83a11b34697b61d5aa16389246c3fdc091b08c17 Mon Sep 17 00:00:00 2001 From: Alfie Jones <32960904+AlfieJones@users.noreply.github.com> Date: Mon, 28 Mar 2022 19:01:29 +0100 Subject: [PATCH 3/3] v4.0.0 --- packages/react/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 1c01867..e102b90 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@theme-toggles/react", - "version": "3.9.0", + "version": "4.0.0", "license": "MIT", "repository": "https://github.com/AlfieJones/theme-toggles", "peerDependencies": { @@ -19,7 +19,7 @@ "clean-build": "rimraf css && rimraf dist", "build-react": "svgr --typescript --no-svgo --no-prettier --icon --expand-props none --template templates/button.js --out-dir src/toggles -- ./svgs/default", "types": "tsc --emitDeclarationOnly --outDir dist", - "build": "yarn clean-build && node scripts/copy.js && yarn clean-react && yarn build-react && node ./scripts/build.js && yarn types", + "build": "yarn clean-build && node scripts/copy.js && yarn clean-react && yarn build-react && node ./scripts/esbuild.js && yarn types", "dev": "microbundle watch --jsxFragment React.Fragment --jsx React.createElement --jsxImportSource react --tsconfig ./configs/base.json" }, "funding": {