Remove sass (#308)

* ONL-4421: fix: Remove unused build task

* ONL-4421: fix: Fixed stylelint not working when running storybook.

* ONL-4421: fix: Final cleanup of ec-* leftovers.

* ONL-4421: fix: Renamed ec-z-level-all.css to z-index.css so it matches the file in scss folder.

* ONL-4421: chore: Removed SASS.

* ONL-4421: chore: Release v1.0.0

.storybook/backgrounds.js

@@ -1,7 +1,7 @@
-export const LIGHT_THEME = { name: 'light', value: '#fff' };
-export const DARK_THEME = { name: 'dark', value: 'rgb(46,54,56)' };
-export const LIGHT_BLUE_THEME = { name: 'light blue ebury', value: 'rgb(0,190,240)' };
-export const DARK_BLUE_THEME = { name: 'dark blue ebury', value: 'rgb(0,80,102)' };
+export const LIGHT_THEME = { name: 'light', value: 'hsl(192.5, 10%, 100%)' }; // --ec-theme-gray-color-level-8
+export const DARK_THEME = { name: 'dark', value: 'hsl(192.5, 10%, 20%)' }; // --ec-theme-gray-color-level-2
+export const LIGHT_BLUE_THEME = { name: 'light blue', value: 'hsl(192.5, 100%, 47%)' }; // --ec-theme-key-color-level-4
+export const DARK_BLUE_THEME = { name: 'dark blue', value: 'hsl(192.5, 100%, 20%)' }; // --ec-theme-key-color-level-2
 
 export function getAllBackgrounds(defaultName) {
   return [

.storybook/config.js

@@ -17,21 +17,7 @@ import hotpinkTheme from '!!raw-loader!../src/styles/themes/hotpink.css';
 /* eslint-enable */
 
 import '../src/styles/themes/blue.css';
-// TODO: once the SASS is gone, import just the main.css from styles folder.
-// import '../src/scss/settings/_index.scss';
-import '../src/styles/settings/index.css';
-// import '../src/scss/tools/_index.scss';
-import '../src/styles/tools/index.css';
-// import '../src/scss/generic/_index.scss';
-import '../src/styles/generic/index.css';
-// import '../src/scss/elements/_index.scss';
-import '../src/styles/elements/index.css';
-// import '../src/scss/objects/_index.scss';
-// import '../src/styles/objects/index.css';
-import '../src/scss/components/_index.scss';
-import '../src/styles/components/index.css';
-import '../src/scss/utilities/_index.scss';
-import '../src/styles/utilities/index.css';
+import '../src/styles/main.css';
 
 const supportsCssVariables = !!(window.CSS && window.CSS.supports('color', 'var(--test)'));
 

.storybook/webpack.config.js

@@ -1,39 +1,25 @@
 /* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable global-require */
 const path = require('path');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
 
 module.exports = async ({ config }) => {
-  config.module.rules.push({
-    test: /\.scss$/,
-    sideEffects: true,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'sass-loader',
-        options: {
-          implementation: require('sass'),
-        },
-      },
-    ],
-    include: path.resolve(__dirname, '../'),
-  });
-  config.module.rules.push({
-    sideEffects: true,
-    test: /\.sass$/,
-    use: ['style-loader', 'css-loader', 'sass-loader'],
-    include: path.resolve(__dirname, '../'),
-  });
   config.resolve.alias = {
     ...config.resolve.alias,
     '@': path.resolve(__dirname, '..', 'src'),
   };
+
   config.module.rules.push({
     test: /\.story\.jsx?$/,
     loaders: [require.resolve('@storybook/source-loader')],
     enforce: 'pre',
   });
 
+  config.plugins.push(new StyleLintPlugin({
+    files: ['**/*.{vue,htm,html,css}'],
+    emitError: true,
+    emitWarning: true,
+  }));
+
   const babelRule = config.module.rules[0];
   babelRule.exclude = /node_modules\/(?!(css-tree)\/).*/;
 

.stylelintignore

@@ -1 +1,5 @@
 # .gitignore syntax (uses node-ignore behind the scenes)
+coverage
+node_modules
+dist
+.out

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.0.0 - Initial release
+
+## BREAKING CHANGES
+
+* removed SASS from the project
+
 # 0.1.98 - Minor changes in tailwind.config.js
 
 ## Added
@@ -8,7 +14,7 @@
 
 * Updated the `inset` key within the `theme` object map in order to extend the range of possible values in properties like `top`, `bottom`, `right` or `left`. Until now we used those defined in `spacing` (and their corresponding in negative), from now on we will use those defined in `width`, which already includes `spacing` and adds values in percentages. In this way, we can use utility classes like `tw-left-1/2`.
 
-# 0.1.86 - 0.1.XX - Goodbye SASS, welcome PostCSS and TailwindCSS
+# 0.1.86 - 0.1.131 - Goodbye SASS, welcome PostCSS and TailwindCSS
 
 We've started a process of replacing SASS with PostCSS to be able to create custom themes using CSS variables.
 In addition, we added TailwindCSS to replace utility classes with their generated ones.

README.md

@@ -80,7 +80,7 @@ By now you should be up and running. You can check the existing components or cr
 
 ### CSS
 
-For chameleon components, we use ITCSS architecture with BEM naming, TailwindCSS for Utilities, SASS as a preprocessor (deprecated - will be removed in the future) and PostCSS as a postprocessor.
+For chameleon components, we use ITCSS architecture with BEM naming, TailwindCSS for Utilities, and PostCSS as a postprocessor.
 Please don't add any CSS styles without following the rules below.
 
 #### Vue
@@ -179,7 +179,7 @@ To run visual regression tests:
 make cypress-integration
 ```
 
-You can also just run `make cypress-install` and then `make cypress-run` as many times as you want. 
+You can also just run `make cypress-install` and then `make cypress-run` as many times as you want.
 It will skip the installation part before each run.
 
 To run tests only for specific story, you can use `storyIdFilter`. The ID of the story can be found in the URL of the storybook, e.g.
@@ -231,12 +231,6 @@ To build your Storybook:
 npm run build-storybook
 ```
 
-To build your app (Vue CLI):
-
-```sh
-npm run build
-```
-
 ## References
 
 ### Vue.js
@@ -257,8 +251,6 @@ npm run build
 
 ### CSS
 
-[SCSS](https://sass-lang.com/documentation/syntax)
-
 [PostCSS](https://postcss.org/)
 
 [TailwindCSS](https://tailwindcss.com/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "0.1.131",
+  "version": "1.0.0",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
@@ -14,7 +14,6 @@
     "node": "12.x"
   },
   "scripts": {
-    "build": "vue-cli-service build",
     "icons": "webpack --config ./src/icons/webpack.config.js -p",
     "lint": "npm run lint:js && npm run lint:style",
     "lint:js": "vue-cli-service lint -- ./",
@@ -78,14 +77,13 @@
     "postcss-mixins": "6.2.3",
     "postcss-nested": "4.2.3",
     "postcss-preset-env": "6.7.0",
-    "sass": "1.26.10",
-    "sass-loader": "9.0.2",
     "snapshot-diff": "0.8.1",
     "storybook-vue-router": "1.0.7",
     "stylelint": "13.6.1",
     "stylelint-config-standard": "20.0.0",
     "stylelint-config-standard-scss": "1.1.0",
     "stylelint-scss": "3.18.0",
+    "stylelint-webpack-plugin": "2.1.0",
     "svg-sprite-loader": "5.0.0",
     "svgo": "1.3.2",
     "svgo-loader": "2.2.1",
@@ -101,12 +99,12 @@
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
-    "*.{vue,htm,html,css,scss}": [
-      "vue-cli-service lint:style",
+    "*.{vue,htm,html,css}": [
+      "npm run lint:style",
       "git add"
     ],
     "*.{vue,js}": [
-      "vue-cli-service lint",
+      "npm run lint",
       "git add"
     ]
   }

src/components/ec-menu/ec-menu.vue

@@ -74,9 +74,11 @@ export default {
       @apply tw-inline-block;
       @apply tw-min-w-0;
 
+      /* stylelint-disable selector-max-class */
       + .ec-menu__item {
         @apply tw-ml-16;
       }
+      /* stylelint-enable */
     }
   }
 }