From 6de8884886913df833cace3fed54f3053497f559 Mon Sep 17 00:00:00 2001 From: Mucahit Tutuncu Date: Tue, 6 Oct 2020 18:05:36 +0300 Subject: [PATCH] fix: Export `main.css` instead of inline styles --- README.md | 15 +++++---------- package-lock.json | 2 +- package.json | 2 +- rollup.config.js | 6 +++++- src/button/_button.scss | 3 --- src/dropdown/_dropdown.scss | 4 +--- src/dropdown/list/_dropdown-list.scss | 3 --- src/dropdown/list/item/_dropdown-list-item.scss | 1 - src/form/field/_form-field.scss | 2 -- .../message-row/_form-field-message-row.scss | 2 -- src/form/input/_input.scss | 3 --- src/form/input/checkbox/_checkbox.scss | 4 +--- src/form/input/file/_file-input.scss | 3 --- src/form/input/radio/_radio.scss | 4 +--- src/index.ts | 3 +++ src/select/typeahead/_typeahead-select.scss | 3 --- src/tag/_tag.scss | 2 -- 17 files changed, 18 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 5963d723..3f0f2073 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,10 @@ Hipo's React based UI Toolkit / [Demo](https://react-ui-toolkit.now.sh/) After installing the `@hipo/react-ui-toolkit` package you can start with simple example ```javascript -import FormField from "@hipo/react-ui-toolkit/dist/Input"; -import Input from "@hipo/react-ui-toolkit/dist/Input"; +import {FormField, Input} from "@hipo/react-ui-toolkit/dist/Input"; -// or you can directly import the index -// import {FormField, Input} from "@hipo/react-ui-toolkit" +// This is required to gather the initial styles of the components +import "@hipo/react-ui-toolkit/dist/main.css"; function LoginForm() { return ( @@ -23,6 +22,8 @@ function LoginForm() { + + ); } @@ -53,9 +54,3 @@ Or you can run `npm run storybook` to see the components live. Storybook has own ESLint and Prettier will handle the linting task. You can set a watcher for `npm run prettier:fix` command in your IDE otherwise you need to run prettier manually or right before the production build it'll automatically runs. The ruleset can be found in [@hipo/eslint-config-base](https://github.com/Hipo/eslint-config-hipo-base), [@hipo/eslint-config-react](https://github.com/Hipo/eslint-config-hipo-base) - -### TODO - -- [ ] Add tests -- [ ] Add source info of components to Storybook -- [x] Components should have basic CSS styles diff --git a/package-lock.json b/package-lock.json index 524b0327..5a279460 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@hipo/react-ui-toolkit", - "version": "0.2.6", + "version": "0.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3c95b083..4ea35f92 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hipo/react-ui-toolkit", - "version": "0.2.7", + "version": "0.3.0", "description": "React based UI toolkit.", "main": "dist/index.js", "scripts": { diff --git a/rollup.config.js b/rollup.config.js index 7d6e47a7..cc099b40 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -5,6 +5,8 @@ import postcss from "rollup-plugin-postcss"; import stylelint from "rollup-plugin-stylelint"; import reactSvg from "rollup-plugin-react-svg"; +const path = require("path"); + export default [ { external: ["react", "classnames"], @@ -39,7 +41,9 @@ export default [ stylelint({ ignoreFiles: ["**/*.ts", "**/*.js"] }), - postcss(), + postcss({ + extract: path.resolve("dist/main.css") + }), typescript({ rollupCommonJSResolveHack: true, exclude: "**/__tests__/**", diff --git a/src/button/_button.scss b/src/button/_button.scss index df1e769b..86785853 100644 --- a/src/button/_button.scss +++ b/src/button/_button.scss @@ -1,6 +1,3 @@ -@import "../ui/reference/_measurement.scss"; -@import "../ui/reference/_colors.scss"; - .button { display: block; diff --git a/src/dropdown/_dropdown.scss b/src/dropdown/_dropdown.scss index 1cff4fca..e0c33391 100644 --- a/src/dropdown/_dropdown.scss +++ b/src/dropdown/_dropdown.scss @@ -1,6 +1,4 @@ -@import "../ui/reference/_colors.scss"; -@import "../ui/reference/_measurement.scss"; -@import "../ui/reference/util/_truncate.scss"; +@import "../ui/reference/util/truncate"; $dropdown-header-horizontal-padding: 8px; diff --git a/src/dropdown/list/_dropdown-list.scss b/src/dropdown/list/_dropdown-list.scss index 30d05a97..c9ad01d7 100644 --- a/src/dropdown/list/_dropdown-list.scss +++ b/src/dropdown/list/_dropdown-list.scss @@ -1,6 +1,3 @@ -@import "../../ui/reference/_colors.scss"; -@import "../../ui/reference/_measurement.scss"; - .dropdown-list { position: absolute; z-index: 1; diff --git a/src/dropdown/list/item/_dropdown-list-item.scss b/src/dropdown/list/item/_dropdown-list-item.scss index 93b39f0b..a6129894 100644 --- a/src/dropdown/list/item/_dropdown-list-item.scss +++ b/src/dropdown/list/item/_dropdown-list-item.scss @@ -1,5 +1,4 @@ @import "../../../ui/reference/util/truncate"; -@import "../../../ui/reference/colors"; @import "../../../ui/reference/animation"; .dropdown-list-item { diff --git a/src/form/field/_form-field.scss b/src/form/field/_form-field.scss index 135da207..bad6d6f8 100644 --- a/src/form/field/_form-field.scss +++ b/src/form/field/_form-field.scss @@ -1,5 +1,3 @@ -@import "../../ui/reference/colors"; - .form-field { margin-bottom: 25px; diff --git a/src/form/field/message-row/_form-field-message-row.scss b/src/form/field/message-row/_form-field-message-row.scss index 5f0574c0..8437999f 100644 --- a/src/form/field/message-row/_form-field-message-row.scss +++ b/src/form/field/message-row/_form-field-message-row.scss @@ -1,5 +1,3 @@ -@import "../../../ui/reference/_colors.scss"; - .form-field-message-row { margin: 8px 0; diff --git a/src/form/input/_input.scss b/src/form/input/_input.scss index 6fc43442..e8fcb48d 100644 --- a/src/form/input/_input.scss +++ b/src/form/input/_input.scss @@ -1,6 +1,3 @@ -@import "../../ui/reference/_colors.scss"; -@import "../../ui/reference/_measurement.scss"; - .input-container { display: flex; align-items: center; diff --git a/src/form/input/checkbox/_checkbox.scss b/src/form/input/checkbox/_checkbox.scss index 9c7afbcc..605f6e66 100644 --- a/src/form/input/checkbox/_checkbox.scss +++ b/src/form/input/checkbox/_checkbox.scss @@ -1,6 +1,4 @@ -@import "../../../ui/reference/_colors.scss"; -@import "../../../ui/reference/_measurement.scss"; -@import "../../../ui/reference/_animation.scss"; +@import "../../../ui/reference/animation"; .checkbox-input-label { position: relative; diff --git a/src/form/input/file/_file-input.scss b/src/form/input/file/_file-input.scss index 913e3999..66ffe46f 100644 --- a/src/form/input/file/_file-input.scss +++ b/src/form/input/file/_file-input.scss @@ -1,6 +1,3 @@ -@import "../../../ui/reference/colors"; -@import "../../../ui/reference/measurement"; - .file-input { position: absolute; z-index: -1; diff --git a/src/form/input/radio/_radio.scss b/src/form/input/radio/_radio.scss index a5c55d67..d3e1b5f9 100644 --- a/src/form/input/radio/_radio.scss +++ b/src/form/input/radio/_radio.scss @@ -1,6 +1,4 @@ -@import "../../../ui/reference/_colors.scss"; -@import "../../../ui/reference/_measurement.scss"; -@import "../../../ui/reference/_animation.scss"; +@import "../../../ui/reference/animation"; .radio-input-label { position: relative; diff --git a/src/index.ts b/src/index.ts index 5ebf3ff1..412ef160 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,6 @@ +import "./ui/reference/_colors.scss"; +import "./ui/reference/_measurement.scss"; + import FormField, {FormFieldProps} from "./form/field/FormField"; import Input, {InputProps} from "./form/input/Input"; import FileInput, {FileInputProps} from "./form/input/file/FileInput"; diff --git a/src/select/typeahead/_typeahead-select.scss b/src/select/typeahead/_typeahead-select.scss index 7ab777c8..201149b9 100644 --- a/src/select/typeahead/_typeahead-select.scss +++ b/src/select/typeahead/_typeahead-select.scss @@ -1,6 +1,3 @@ -@import "../../ui/reference/colors"; -@import "../../ui/reference/measurement"; - .typeahead-select-container { .typeahead-select-dropdown .dropdown-header-button { height: auto; diff --git a/src/tag/_tag.scss b/src/tag/_tag.scss index 811af8f0..d12d0419 100644 --- a/src/tag/_tag.scss +++ b/src/tag/_tag.scss @@ -1,5 +1,3 @@ -@import "../ui/reference/colors"; -@import "../ui/reference/measurement"; @import "../ui/reference/animation"; @import "../ui/reference/util/truncate";