using global function of less preprocessor instead of a custom filter of white listed classes

This commit is contained in:
NikolaBorislavovHristov 2018-12-21 12:26:22 +02:00
parent 82c2001ec6
commit 44b641e1b0
5 changed files with 5 additions and 14 deletions

View file

@ -10,7 +10,7 @@ import styles from './styles';
//TODO move this in separate file
const ControlBarButton = React.forwardRef(({ active, icon, onClick }, ref) => (
<div ref={ref} className={classnames(styles['control-bar-button'], { [styles['active']]: active })} onClick={onClick}>
<div ref={ref} className={classnames(styles['control-bar-button'], { 'active': active })} onClick={onClick}>
<Icon className={styles['icon']} icon={icon} />
</div>
));

View file

@ -19,7 +19,7 @@
margin: 0 var(--seek-bar-thumb-size);
}
&:hover, &.active {
&:hover, &:global(.active) {
.label {
color: var(--color-surfacelighter);
}

View file

@ -14,7 +14,7 @@
margin: 0 calc(var(--volume-bar-thumb-size) / 2);
}
&:hover, &.active {
&:hover, &:global(.active) {
.slider {
--track-before-color: var(--color-primarylight);
--thumb-color: var(--color-surfacelighter);

View file

@ -38,7 +38,7 @@
overflow: visible;
}
&.active {
&:global(.active) {
background-color: var(--color-backgrounddarker);
.icon {
@ -59,7 +59,7 @@
height: var(--control-bar-button-height);
width: calc(var(--control-bar-button-height) * 5);
&:hover, &.active {
&:hover, &:global(.active) {
.control-bar-button {
.icon {
fill: var(--color-surfacelighter);

View file

@ -2,9 +2,6 @@ const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const cssUtils = require('css-loader/dist/utils');
const WHITE_LIST_CLASS_NAMES = ['active'];
module.exports = {
entry: './src/index.js',
@ -41,12 +38,6 @@ module.exports = {
options: {
modules: true,
localIdentName: '[local]_[hash:base64:5]',
getLocalIdent: (context, localIdentName, localName, options) => {
return WHITE_LIST_CLASS_NAMES.includes(localName) ?
localName
:
cssUtils.getLocalIdent(context, localIdentName, localName, options);
},
importLoaders: 2
}
},