stylup - npm Package Compare versions

Comparing version 0.0.0-alpha.2 to 0.0.0-alpha.3

index.js

@@ -106,13 +106,27 @@ var phtml = require('phtml');
 
-const postcssrc = require('postcss-load-config'); // Get rules definitions
+const postcssrc = require('postcss-load-config');
 
+const postcssNested = require('postcss-nested');
 
-var rules;
+const autoprefixer = require('autoprefixer'); // Get rules definitions
 
-if (fs__default['default'].existsSync(process.cwd() + '/' + 'stylup.config.js')) {
-  rules = require(process.cwd() + '/' + 'stylup.config.js').classes; // console.log(rules)
-} else {
-  rules = undefined;
-}
 
+function getConfig(path) {
+  var config;
+
+  if (fs__default['default'].existsSync(process.cwd() + '/' + path)) {
+    config = require(process.cwd() + '/' + path).classes;
+  }
+
+  return config;
+} // var rules;
+// if (fs.existsSync(process.cwd() + '/' + 'stylup.config.js')) {
+// 	rules = require(process.cwd() + '/' + 'stylup.config.js').classes
+// 	// console.log(rules)
+// }
+// else {
+// 	rules = undefined
+// }
+
+
 function putValuesIntoArray(value) {
@@ -153,3 +167,3 @@ return Array.isArray(value) ? value : [value];
     css
-  } = await postcss(plugins).process(src, {
+  } = await postcss([postcssNested(), autoprefixer(), ...plugins]).process(src, {
     from: undefined
@@ -231,2 +245,4 @@ });
           // }
+          let rules = getConfig('stylup.config.js');
+
           if (rules) {
@@ -233,0 +249,0 @@ for (let rule of rules) {

package.json

 {
   "name": "stylup",
-  "version": "0.0.0-alpha.2",
+  "version": "0.0.0-alpha.3",
   "description": "Write utility classes conveniently while optimising your CSS",
@@ -44,2 +44,3 @@ "author": "Gavin McFarland <[e-mail]>",
     "postcss-load-config": "^3.0.0",
+    "postcss-nested": "^5.0.3",
     "pre-commit": "^1.2.2",
@@ -46,0 +47,0 @@ "rollup": "^2.36.2",

README.md

@@ -9,3 +9,3 @@ # Stylup [<img src="https://phtml.io/logo.svg" alt="pHTML" width="90" height="90" align="right">][phtml]
 
-- Automatically processes style tags `<style>` and inline styles `style=""`.
+- Automatically processes PostCSS in style tags `<style>` and inline styles `style=""`.
 - Fully featured CSS can be used inside inline styles.
@@ -108,3 +108,3 @@ - Support for functional class names with dynamic arguments.
 ```js
-// phtml-utility-class.config.js
+// stylup.config.js
 module.exports = {
@@ -164,2 +164,24 @@ classes: [
 
+Or to use with Svelte
+
+```js
+const stylup = require('stylup');
+
+export default [{
+	// ...
+    plugins: [
+        svelte({
+            preprocess:
+                [{
+                    markup({ content, filename }) {
+                        content = content.replace(/(?<=\<[^>]*)=(\{[^{}]*\})/gmi, (match, p1) => {
+                            return `="${p1}"`
+                        })
+                        return stylup.process(content, { from: filename }).then(result => ({ code: result.html, map: null }));
+                    }
+                }]
+        }),
+        // ...
+```
+
 [cli-img]: https://img.shields.io/travis/limitlessloop/stylup.svg
@@ -166,0 +188,0 @@ [cli-url]: https://travis-ci.org/limitlessloop/stylup

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68037

increased by4.24%

Lines of code

524

increased by4.38%

Number of lines in readme file

204

increased by12.09%

Worsened metrics

Dev dependency count

16

increased by6.67%

No dependency changes