Remove css compilation from rollup (js) configuration.

Author: MichaelBrauner

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
-.idea
+.idea
+yarn.lock

README.md

@@ -84,6 +84,14 @@ new Choosy(document.getElementById("cars_limited_2"), {
 
 Since Choosy is an open-source project you are very welcome to contribute by sending a PR.
 
+## Compiling
+To apply the latest changes and compile it to a ready-to-go package into the `dist` folder you can use the following commands:
+
+```shell
+postcss ./src/style/choosy.css -o ./dist/choosy.min.css
+rollup -c 
+```
+
 ## Testing
 
 Choosy uses [Cypress](https://www.cypress.io/) for testing.  

dist/choosy.min.css

@@ -1 +1,212 @@
-button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.choosy-widget{align-items:center;border-color:#e5e7eb;border-radius:0;border-width:1px;display:flex;line-height:1.25rem;padding-left:.5rem;position:relative}.choosy-widget.disabled{background-color:#f3f4f6;cursor:not-allowed}.choosy-widget.disabled input{cursor:not-allowed}.choosy-input{background-color:transparent;border:0;border-radius:0;box-shadow:none!important;display:inline-block;height:1.5rem;max-width:100%;outline:none;padding:0!important;vertical-align:baseline}.choosy-list{align-items:center;display:flex;flex-wrap:wrap;min-height:2.25rem;padding:.25rem 0}.choosy-item{align-items:center;background-color:#4b5563;border-radius:.25rem;box-sizing:border-box;display:inline-flex;font-size:.875rem;height:1.5rem;line-height:1.25rem;margin-bottom:.125rem;margin-right:.25rem;margin-top:.125rem}.choosy-item-text-span{color:#f0f1f1;line-height:1.625;margin-left:.5rem;max-width:20rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.choosy-remove-button{align-items:center;-webkit-appearance:button;background-color:transparent;background-image:none;border:none;box-shadow:none;color:#6b7280;cursor:pointer;display:flex;height:1.5rem;justify-content:center;line-height:inherit;padding:0;text-transform:none;width:1.5rem}.choosy-remove-button:focus{outline:none}.choosy-remove-button:hover{color:#f4f5f7}.choosy-remove-button-svg{height:1.5rem;width:1.5rem}.choosy-result-list-container{background-color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);margin-left:-.5rem;margin-top:2px;position:absolute;top:100%;width:100%;z-index:30}.choosy-result-list{list-style:none;margin:0;overflow:auto;padding:0}.choosy-result-item{color:#4b5563;cursor:pointer;padding:.5rem 2.25rem .5rem .75rem;position:relative}.choosy-result-item.active{background-color:#4b5563;color:#fff}
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    /* 1 */
+    font-size: 100%;
+    /* 1 */
+    line-height: 1.15;
+    /* 1 */
+    margin: 0;
+    /* 2 */
+}
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+1. Remove the inheritance of text transform in Firefox.
+*/
+button,
+select {
+    /* 1 */
+    text-transform: none;
+}
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+    -webkit-appearance: button;
+}
+/**
+Remove the inner border and padding in Firefox.
+*/
+::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+/**
+Restore the focus styles unset by the previous rule.
+*/
+:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+:-moz-ui-invalid {
+    box-shadow: none;
+}
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+legend {
+    padding: 0;
+}
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress {
+    vertical-align: baseline;
+}
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+    height: auto;
+}
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type='search'] {
+    -webkit-appearance: textfield;
+    /* 1 */
+    outline-offset: -2px;
+    /* 2 */
+}
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    /* 1 */
+    font: inherit;
+    /* 2 */
+}
+.choosy-widget {
+    line-height: 1.25rem;
+    display: flex;
+    align-items: center;
+    padding-left: 0.5rem;
+    position: relative;
+    border-color: #e5e7eb;
+    border-width: 1px;
+    border-radius: 0;
+}
+.choosy-widget.disabled {
+        background-color: #f3f4f6;
+        cursor: not-allowed;
+    }
+.choosy-widget.disabled input {
+            cursor: not-allowed;
+        }
+.choosy-input {
+    background-color: transparent;
+    display: inline-block;
+    vertical-align: baseline;
+    border: 0;
+    border-radius: 0;
+    max-width: 100%;
+    outline: none;
+    box-shadow: none !important;
+    height: 1.5rem;
+    padding: 0 !important;
+}
+.choosy-list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.25rem 0;
+    min-height: 2.25rem;
+}
+.choosy-item {
+    background-color: #4b5563;
+    height: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border-radius: 0.25rem;
+    box-sizing: border-box;
+    margin-right: 0.25rem;
+    margin-top: 0.125rem;
+    margin-bottom: 0.125rem;
+}
+.choosy-item-text-span {
+    margin-left: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #f0f1f1;
+    line-height: 1.625;
+    max-width: 20rem;
+}
+.choosy-remove-button {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    line-height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+    background-image: none;
+    color: #6b7280;
+    box-shadow: none;
+    -webkit-appearance: button;
+    text-transform: none;
+    border: none;
+    cursor: pointer;
+}
+.choosy-remove-button:focus {
+    outline: none;
+}
+.choosy-remove-button:hover {
+    color: #f4f5f7;
+}
+.choosy-remove-button-svg {
+    height: 1.5rem;
+    width: 1.5rem;
+}
+.choosy-result-list-container {
+    position: absolute;
+    background-color: white;
+    top: 100%;
+    margin-top: 2px;
+    margin-left: -0.5rem;
+    width: 100%;
+    z-index: 30;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
+}
+.choosy-result-list {
+    overflow: auto;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.choosy-result-item {
+    cursor: pointer;
+    position: relative;
+    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+    color: #4b5563;
+}
+.choosy-result-item.active {
+    color: white;
+    background-color: rgba(75, 85, 99, 1);
+}

dist/choosy.min.js

@@ -23,11 +23,11 @@
     "cypress-plugin-tab": "^1.0.5",
     "http-server": "^14.1.1",
     "postcss": "^8.2.10",
+    "postcss-cli": "^10.1.0",
     "postcss-import": "^15.0.0",
     "postcss-nested": "^5.0.5",
     "rollup": "^2.45.2",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-uglify": "^6.0.4",
     "start-server-and-test": "^1.14.0",
     "tslib": "^2.4.1",

dist/global.choosy.min.js

@@ -0,0 +1,14 @@
+// import nested from "postcss-nested";
+// import postcss_import from "postcss-import";
+// import cssnano from "cssnano";
+// import * as path from "path";
+
+module.exports = {
+    plugins: [
+        require('postcss-nested'),
+        require('postcss-import'),
+        // require('cssnano')
+    ],
+    // from: './src/style/choosy.css',
+    // to: path.resolve('dist/choosy.min.css')
+}

package.json

@@ -1,18 +1,11 @@
 import babel from 'rollup-plugin-babel';
 import {uglify} from "rollup-plugin-uglify";
-import postcss from 'rollup-plugin-postcss';
-import nested from 'postcss-nested';
-import postcss_import from 'postcss-import'
-import cssnano from 'cssnano';
 import multiInput from 'rollup-plugin-multi-input';
 import typescript from '@rollup/plugin-typescript';
 
-const path = require('path');
-
 export default {
     input: [
         {'choosy.min': 'src/choosy.ts'},
-        {'global.choosy.min': 'src/globalChoosy.ts'}
     ],
     onwarn(warning, rollupWarn) {
         if (warning.code !== 'CIRCULAR_DEPENDENCY') {
@@ -26,24 +19,12 @@ export default {
         sourcemap: 'inline',
     },
     plugins: [
-        typescript(),
         uglify(),
         multiInput(),
 
         babel({
             exclude: 'node_modules/**',
         }),
-
-        postcss({
-            plugins: [
-                nested(),
-                postcss_import(),
-                cssnano(),
-            ],
-            extensions: ['.css'],
-            minimize: true,
-            extract: path.resolve('dist/choosy.min.css')
-        }),
-
+        typescript()
     ],
 };