smelte - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "smelte",
   "description": "UI framework for Svelte using Tailwind CSS",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "scripts": {
@@ -6,0 +6,0 @@ "dev": "sapper dev -p 7777",

README.md

@@ -13,5 +13,5 @@ # Smelte
 ### Installation
-Clone the project's sapper template, install the dependencies and write some pretty code!
+Clone the project's template, install the dependencies and write some pretty code!
 ```
-npx degit matyunya/smelte-template my-svelte-project
+npx degit matyunya/smelte-sapper-template my-svelte-project
 cd my-svelte-project
@@ -25,9 +25,87 @@ yarn && yarn dev
 ```
-npx degit matyunya/smelte-template#no-sapper my-svelte-project
+npx degit matyunya/smelte-template my-svelte-project
 ```
 
-### Issues
+### Adding to existing project
+Basically you need to add Tailwind to your project and import Smelte's configuration.
 
-Smelte is still in very early stage, so please feel free to submit any feedback.
+First add the dependencies:
+```
+yarn add smelte tailwindcss rollup-plugin-postcss svelte-preprocess @fullhuman/postcss-purgecss postcss-import tailwindcss-elevation
+```
 
+Add following to `postcss.config.js` in your project's root directory
+```
+const production = !process.env.ROLLUP_WATCH;
+const purgecss = require("@fullhuman/postcss-purgecss");
+
+module.exports = {
+  plugins: [
+    require("postcss-import")(),
+    require("tailwindcss")("./tailwind.config.js"),
+    require("autoprefixer"),
+    production &&
+      purgecss({
+        content: ["./**/*.html", "./**/*.svelte"],
+        defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
+        whitelistPatterns: [
+          // for JS ripple
+          /ripple/
+        ]
+      })
+  ]
+};
+  
+```
+
+Then to `tailwind.config.js`
+```
+// Extend your config here.
+const config = require("smelte/tailwind.config.js");
+
+module.exports = config;
+```
+
+Add postcss to your Rollup config:
+```
+import postcss from "rollup-plugin-postcss";
+import autoPreprocess from "svelte-preprocess";
+
+...
+
+plugins: [
+  svelte({
+    preprocess: autoPreprocess({
+      postcss: true
+    }),
+    // enable run-time checks when not in production
+    dev: !production,
+    // we'll extract any component CSS out into
+    // a separate file — better for performance
+    css: css => {
+      css.write("public/bundle.css");
+    }
+  }),
+  postcss({
+    extract: "public/utils.css"
+  }),
+```
+
+Add exported css file to `public/index.html`:
+```
+<link rel='stylesheet' href='/utils.css'>
+```
+
+Create `smelte.css` in `src` folder with this line:
+```
+@import 'smelte/src/tailwind';
+```
+
+And import it in your `src/main.js`:
+```
+import './tailwind.css';
+```
+
+That's it! The process is quite tedious at the moment. Please send feedback if you know how to make it better.
+
 ### Components
@@ -76,3 +154,2 @@ - [x] Text field
 - [ ] Document API
-- [ ] IE 11 support
-- [ ] CDN version
+- [ ] IE 11 support

No alert changes

Improved metrics

Lines of code

2310

increased by1.67%

Number of lines in readme file

152

increased by100%

Worsened metrics

Total package byte prevSize

675935

decreased by-7.1%

No dependency changes