Skip to content

Commit

Permalink
Merge branch 'main' into react-v4
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlfieJones
AlfieJones authored Mar 28, 2022
2 parents 9409419 + 05777d3 commit 3bbd60a
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 56 deletions.
113 changes: 75 additions & 38 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,52 +13,70 @@ module.exports = function (grunt) {

clean: {
build: ['css'],
<<<<<<< Updated upstream
=======
react: ['css/react', 'css/temp/react'],
temp: ['css/temp']
>>>>>>> Stashed changes
},

// -- Sass Config --------------------------------------------------------

sass: {
dist: {
build: {
files: [{
expand: true,
flatten: true,
src: ['css/temp/toggles/*.scss'],
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: [{
Expand All @@ -69,29 +87,52 @@ module.exports = function (grunt) {
ext: '.min.css',
}]
},
react: {
options: {},

files: [{
expand: true,
cwd: "css/react/",
src: '*.css',
dest:"css/react/",
ext: '.min.css',
}]
},
},

cssmin: {
options: {
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 -------------------------------------------------
Expand All @@ -109,11 +150,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);
Expand All @@ -129,25 +174,18 @@ 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',
'clean:temp'
]);

<<<<<<< Updated upstream
// 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',
Expand All @@ -156,7 +194,6 @@ module.exports = function (grunt) {
'postcss:react',
'cssmin',
'clean:temp'
>>>>>>> Stashed changes
]);

};
30 changes: 17 additions & 13 deletions src/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
24 changes: 19 additions & 5 deletions src/utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
9 changes: 9 additions & 0 deletions src/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: 3 !default;
1 change: 1 addition & 0 deletions src/variants/react.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
$htmlElements: 0;

0 comments on commit 3bbd60a

Please sign in to comment.