fix(css): removed css modules and use with regular scss to increase customizability

Author: Utzel-Butzel

.npmignore

@@ -1 +1,24 @@
-src/assets
+node_modules
+tests
+.docz
+.github
+.storybook
+.vscode
+config
+assets
+examples
+lib
+scripts
+*.stories.js
+*-story.js
+*.snap
+*-test.js
+*.tgz
+*.md                                           
+.cfignore                                                         
+.editorconfig                                                     
+.eslintrc                                                         
+.prettierignore                                                   
+.watchmanconfig
+storybook-static
+jest-test-results.json 

package.json

@@ -3,14 +3,14 @@
   "version": "1.5.0",
   "description": "WFP UI Kit Next",
   "license": "Apache-2",
-  "main": "dist/index.js",
+  "main": "dist/bundle.js",
   "main:scss": "source/globals/styles.scss",
-  "module": "es/index.js",
+  "module": "src/index.js",
   "sideEffects": false,
   "scripts": {
     "build:legacy": "node scripts/build.js && yarn build:css && yarn build:cssmin",
     "build:storybook": "rm -r -f docs && build-storybook -s ./src/assets -o docs",
-    "build": "webpack --mode production",
+    "build": "webpack --mode development",
     "ci-check": "yarn prettier:diff && yarn lint && yarn test --runInBand && yarn test-ssr",
     "build:cssmin": "node-sass ./src/globals/scss/styles.scss ./assets/css/styles.min.css --output-style compressed && postcss ./assets/css/styles.min.css --no-map -u autoprefixer -rs",
     "build:css": "node-sass ./src/globals/scss -o ./assets/css --output-style compressed --source-map true && postcss ./assets/css/styles.css -d ./assets/css/ --use autoprefixer",
@@ -42,13 +42,6 @@
     "ui-kit",
     "components"
   ],
-  "files": [
-    "lib/**/*",
-    "es/**/*",
-    "umd/**/*",
-    "source/**/*",
-    "assets/**/*"
-  ],
   "eslintConfig": {
     "parser": "babel-eslint",
     "extends": [

src/components/TextInput/TextInput.js

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import settings from '../../globals/js/settings';
 import FormItem from '../FormItem';
 import Input from '../Input/Input';
-import styles from './text-input.module.scss';
 
 const { prefix } = settings;
 
@@ -34,7 +33,6 @@ const TextInput = (props) => {
     [`${prefix}--text--light`]: light,
     [`${prefix}--text--helpertext`]: helperText,
     [`${prefix}--text--nolabel`]: hideLabel,
-    [styles.text]: true,
   });
 
   const newProps = {

…ponents/TextInput/text-input.module.scss src/components/TextInput/_text-input.scsssrc/components/TextInput/text-input.module.scss renamed to src/components/TextInput/_text-input.scss src/components/TextInput/text-input.module.scss renamed to src/components/TextInput/_text-input.scss

@@ -12,7 +12,7 @@
 @import '../Form/form';
 
 @include exports('text-input') {
-  .text input {
+  .#{$prefix}--text input {
     @include typescale('zeta');
     @include font-family;
     @include input-base;

src/globals/scss/styles.scss

@@ -63,53 +63,28 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import '../../components/InfoBar/info-bar';
 @import '../../components/Input/input';
 @import '../../components/Checkbox/checkbox.scss';
-/*
-@import '../../components/combo-box/combo-box';
-*/
 @import '../../components/RadioButton/radio-button';
 @import '../../components/Toggle/toggle.scss';
 @import '../../components/Search/search.scss';
 @import '../../components/Select/select.scss';
 @import '../../components/ReactDropzone/react-dropzone.scss';
 @import '../../components/ReactSelect/react-select.scss';
-//@import '../../components/TextInput/text-input.scss';
+@import '../../components/TextInput/text-input.scss';
 @import '../../components/TextArea/text-area.scss';
 @import '../../components/NumberInput/number-input.scss';
 @import '../../components/Form/form.scss';
 @import '../../components/FormGroup/form-group.scss';
 @import '../../components/FormHint/form-hint.scss';
-
 //@import '../../components/Link/link';
-/*
-/*@import '../../components/list-box/list-box';
-@import '../../components/list/list';
-@import '../../components/data-table/data-table';
-@import '../../components/data-table-v2/data-table-v2';
-@import '../../components/structured-list/structured-list';
-@import '../../components/code-snippet/code-snippet';
-@import '../../components/overflow-menu/overflow-menu';
-@import '../../components/card/card';
-*/
 @import '../../components/Card/card';
 @import '../../components/ContentSwitcher/content-switcher';
-/*
-@import '../../components/date-picker/date-picker';
-@import '../../components/detail-page-header/detail-page-header';
-@import '../../components/dropdown/dropdown';
-*/
 @import '../../components/List/list';
 @import '../../components/Loading/loading';
 @import '../../components/Modal/modal';
 @import '../../components/Module/module';
 @import '../../components/Notification/notification';
 @import '../../components/User/user';
 @import '../../components/Value/value';
-/*
-@import '../../components/multi-select/multi-select';
-@import '../../components/notification/inline-notification';
-@import '../../components/notification/toast-notification';
-*/
-
 @import '../../components/InlineLoading/inline-loading';
 @import '../../components/StepNavigation/step-navigation';
 @import '../../components/StepNavigationItem/step-navigation-item';
@@ -118,15 +93,8 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import '../../components/Tooltip/tooltip';
 @import '../../components/Tabs/tabs';
 @import '../../components/Tag/tag';
-/*@import '../../components/unified-header/unified-header';
-@import '../../components/interior-left-nav/interior-left-nav';
-*/
-@import '../../components/Pagination/pagination';
-/*
-@import '../../components/accordion/accordion';
-@import '../../components/progress-indicator/progress-indicator';
-*/
 
+@import '../../components/Pagination/pagination';
 @import '../../components/ReadMore/read-more';
 @import '../../components/Story/story';
 @import '../../components/Breadcrumb/breadcrumb.scss';

src/vendorOnly.js

@@ -15,7 +15,6 @@ const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
 const reRelativePath = /^\.+/;
 const reFileName = /([^\/]+)(?=\.\w+$)/g;
 
-
 function getLocalIdent(loaderContext, localIdentName, localName, options) {
   if (!options.context) {
     // eslint-disable-next-line no-param-reassign
@@ -50,9 +49,11 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
   return name;
 }
 
-module.exports = {
+module.exports = ['source-map'].map((devtool) => ({
   entry: './src/index.js',
+  mode: 'development',
   output: {
+    library: '@wfp/ui',
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js',
   },
@@ -97,35 +98,10 @@ module.exports = {
           },
           require.resolve('sass-loader'),
         ],
-      }
-      /*{
-        test: /\.scssa$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: '/public/path/to/',
-            },
-          },
-          {
-            loader: require.resolve('css-loader'),
-            options: {
-              importLoaders: 1,
-              modules: {
-                mode: 'local',
-                localIdentName: 'wfp--[name]__[local]',
-                // localIdentName: '[sha1:hash:hex:4]',
-                context: path.resolve(__dirname, 'src'),
-                hashPrefix: 'my-custom-hash',
-              },
-            },
-          },
-          require.resolve('sass-loader'),
-        ],
-      },*/
+      },
     ],
   },
   optimization: {
     // minimizer: [new UglifyJsPlugin()],
   },
-};
+}));