Merge pull request #363 from TykTechnologies/TUI-46/css

[TT-12353, TUI-46] sass out, css in

.stylelintrc.js

@@ -1,26 +1,23 @@
 module.exports = {
-  extends: 'stylelint-config-standard-scss',
+  extends: 'stylelint-config-standard',
   plugins: [
     'stylelint-use-logical-spec',
     'stylelint-declaration-block-no-ignored-properties'
   ],
   ignoreFiles: [
-    'src/common/sass/fontawesome.scss',
-    'src/common/sass/tykon.scss'
+    'src/common/css/fontawesome.css',
+    'src/common/css/tykon.css'
   ],
   rules: {
+    'color-function-notation': ['modern', { ignore: ['with-var-inside'] }],
     'color-hex-length': null,
     'custom-property-empty-line-before': null,
     'declaration-block-no-redundant-longhand-properties': null,
+    'import-notation': 'string',
     'liberty/use-logical-spec': true,
     'no-descending-specificity': null,
     'plugin/declaration-block-no-ignored-properties': true,
     'property-no-vendor-prefix': [true, { ignoreProperties: ['full-screen', 'mask', 'mask-size', 'user-select'] }],
-    'scss/at-extend-no-missing-placeholder': null,
-    'scss/at-import-partial-extension': null,
-    'scss/dollar-variable-empty-line-before': null,
-    'scss/double-slash-comment-empty-line-before': null,
-    'scss/percent-placeholder-pattern': null,
     'selector-class-pattern': null,
     'selector-no-vendor-prefix': [true, { ignoreSelectors: [':-webkit-full-screen', ':-ms-input-placeholder'] }],
   }

README.md

@@ -6,14 +6,15 @@ https://nifty-johnson-6002dd.netlify.app/
 npm install --save @tyk-technologies/tyk-ui
 ```
 
->Note that this is a private package so you'll need to be added as a member to the tyk-technologies org and then run `npm adduser` which will ask you for your npm credentials
-
 **Loading tyk-ui into the project**
 
-*Loading SASS files*
+*Import the css before any other styles from your main js file*
+```javascript static
+import '@tyk-technologies/tyk-ui/src/index.css';
+```
+
+*Loading SASS files (only if your project uses SASS)*
 ```scss
-$font-path: "~@tyk-technologies/tyk-ui/lib/fonts/";
-$component-images-path: "~@tyk-technologies/tyk-ui/lib/images/";
 @import '~@tyk-technologies/tyk-ui/lib/sass/index';
 ```
 *NOTE*:
@@ -23,7 +24,7 @@ For projects that don't use SASS but just pure css we are also exposing the comp
 ```
 
 *Loading React components*
-```javascript
+```javascript static
 import {
   Button,
   Column,

cypress/support/component.js

@@ -22,7 +22,7 @@ import '@cypress/code-coverage/support';
 // require('./commands')
 
 import { mount } from 'cypress/react18';
-import '../../src/index.scss';
+import '../../src/index.css';
 
 Cypress.Commands.add('mount', mount);
 

docs/GettingStarted.md

@@ -29,12 +29,14 @@ import {
 *Note*: for the projects that don't have React this is not usable, and we can use just the styling.
 ```
 
+- *Import the css before any other styles from your main js file*
+```javascript static
+import '@tyk-technologies/tyk-ui/src/index.css';
+```
 
-- *Loading SASS files*
+- *Loading SASS files (only if your project uses SASS)*
 
 ```scss
-$font-path: "~@tyk-technologies/tyk-ui/lib/fonts/";
-$component-images-path: "~@tyk-technologies/tyk-ui/lib/images/";
 @import '~@tyk-technologies/tyk-ui/lib/sass/index';
 ```