Skip to content

Commit

Permalink
Remove even more duplicate css code
Browse files Browse the repository at this point in the history
  • Loading branch information
@simonwep
simonwep committed Aug 12, 2019
1 parent b93892c commit bb407e7
Show file tree
Hide file tree
Showing 11 changed files with 44 additions and 96 deletions.
2 changes: 1 addition & 1 deletion dist/pickr.es5.min.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pickr.min.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/themes/classic.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/themes/monolith.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/themes/nano.min.css
View file

Large diffs are not rendered by default.

9 changes: 4 additions & 5 deletions scripts/build.js
View file
Expand Up @@ -6,7 +6,6 @@ const bundles = require('./bundles');
const util = require('util');
const webpack = util.promisify(require('webpack'));
const path = require('path');
const fs = require('fs');

(async () => {
const banner = new webpack.BannerPlugin({
Expand All @@ -17,9 +16,9 @@ const fs = require('fs');
await webpack({
mode: 'production',
entry: {
'classic.min.css': path.resolve('./src/scss/themes/classic.scss'),
'nano.min.css': path.resolve('./src/scss/themes/nano.scss'),
'monolith.min.css': path.resolve('./src/scss/themes/monolith.scss')
'classic': path.resolve('./src/scss/themes/classic.scss'),
'monolith': path.resolve('./src/scss/themes/monolith.scss'),
'nano': path.resolve('./src/scss/themes/nano.scss')
},

output: {
Expand All @@ -44,7 +43,7 @@ const fs = require('fs');
new FixStyleOnlyEntriesPlugin(),
new OptimizeCSSAssetsPlugin(),
new MiniCssExtractPlugin({
filename: '[name]'
filename: '[name].min.css'
})
]
}).catch(console.error);
Expand Down
30 changes: 30 additions & 0 deletions src/scss/base.scss
View file
Expand Up @@ -224,4 +224,34 @@
}
}
}

.pcr-selection {

.pcr-picker {
position: absolute;
height: 18px;
width: 18px;
border: 2px solid #fff;
border-radius: 100%;
user-select: none;
}

.pcr-color-palette,
.pcr-color-chooser,
.pcr-color-opacity {
position: relative;
user-select: none;
display: flex;
flex-direction: column;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;

&:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
}
}
}

This comment has been minimized.

Sign in to view

Copy link
@bjarnef

bjarnef Aug 12, 2019

@simonwep I guess you also can use autoprefixer in webpack, so you don't need to write the vendor prefixes in Sass.
https://stackoverflow.com/a/38015078

This comment has been minimized.

Sign in to view

Copy link
@simonwep

simonwep Aug 13, 2019

Author Owner

Yes, but that would bload it even more. css-grab is just especially new so I manually added these. I guess if you're using autoprefixer it'd also add the missing one in this files. Moreover I don't use new properties which are that new, only grid maybe. I think that would be overkill?!

This comment has been minimized.

Sign in to view

Copy link
@simonwep

simonwep Aug 13, 2019

Author Owner

Okay, just tested it and it seems like there are a few porps which are not covered like user-select and the file-size won't really get bigger so I'll add it :)

This comment has been minimized.

Sign in to view

Copy link
@bjarnef

bjarnef Aug 13, 2019 •
edited

Yes, it was just so you didn't need to add the vendor prefix for cursor: grab in Sass, but could let autoprefixer handle this.

From this issue it seems autoprefixer also should be able to add the vendor prefixes for user-select.
postcss/autoprefixer#609

As I remember autoprefixer also allow to configurate which vendor prefixes should be added, but I haven't used it with Webpack, only Gulp.
27 changes: 0 additions & 27 deletions src/scss/themes/classic.scss
View file
Expand Up @@ -12,15 +12,6 @@
justify-content: space-between;
flex-grow: 1;

.pcr-picker {
position: absolute;
height: 18px;
width: 18px;
border: 2px solid #fff;
border-radius: 100%;
user-select: none;
}

.pcr-color-preview {
@include transparency-background;
position: relative;
Expand Down Expand Up @@ -50,24 +41,6 @@
}
}

.pcr-color-palette,
.pcr-color-chooser,
.pcr-color-opacity {
position: relative;
user-select: none;
display: flex;
flex-direction: column;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;

&:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
}

.pcr-color-palette {
width: 100%;
height: 8em;
Expand Down
27 changes: 0 additions & 27 deletions src/scss/themes/monolith.scss
View file
Expand Up @@ -13,15 +13,6 @@
justify-content: space-between;
flex-grow: 1;

.pcr-picker {
position: absolute;
height: 18px;
width: 18px;
border: 2px solid #fff;
border-radius: 100%;
user-select: none;
}

.pcr-color-preview {
@include transparency-background;
position: relative;
Expand Down Expand Up @@ -52,24 +43,6 @@
}
}

.pcr-color-palette,
.pcr-color-chooser,
.pcr-color-opacity {
position: relative;
user-select: none;
display: flex;
flex-direction: column;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;

&:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
}

.pcr-color-palette {
width: 100%;
height: 8em;
Expand Down
27 changes: 0 additions & 27 deletions src/scss/themes/nano.scss
View file
Expand Up @@ -28,15 +28,6 @@ $spacing: 0.6em;
width: 100%;
align-self: flex-start;

.pcr-picker {
position: absolute;
height: 18px;
width: 18px;
border: 2px solid #fff;
border-radius: 100%;
user-select: none;
}

.pcr-color-preview {
grid-area: 2 / 1 / 4 / 1;
height: 100%;
Expand All @@ -61,24 +52,6 @@ $spacing: 0.6em;
}
}

.pcr-color-palette,
.pcr-color-chooser,
.pcr-color-opacity {
position: relative;
user-select: none;
display: flex;
flex-direction: column;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;

&:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
}

.pcr-color-palette {
grid-area: 1 / 1 / 2 / 3;
width: 100%;
Expand Down
10 changes: 5 additions & 5 deletions st/script.js
View file
Expand Up @@ -100,7 +100,7 @@ const themes = [
];

const buttons = [];
let pickrInstance = null;
let pickr = null;

for (const [theme, config] of themes) {
const button = document.createElement('button');
Expand All @@ -112,8 +112,8 @@ for (const [theme, config] of themes) {
pickrContainer.appendChild(el);

// Delete previous instance
if (pickrInstance) {
pickrInstance.destroyAndRemove();
if (pickr) {
pickr.destroyAndRemove();
}

// Apply active class
Expand All @@ -122,9 +122,9 @@ for (const [theme, config] of themes) {
}

// Create fresh instance
pickrInstance = new Pickr(Object.assign({
pickr = new Pickr(Object.assign({
el, theme,
default: '#42445A'
default: '#42445a'
}, config));
});

Expand Down

0 comments on commit bb407e7

Please sign in to comment.