@enhance/arc-plugin-styles - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

package.json

 {
   "name": "@enhance/arc-plugin-styles",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Plugin for generating enhance CSS utility classes",
@@ -16,3 +16,2 @@ "license": "Apache-2.0",
     "./get-styles": "./src/get-styles.js",
-    "./get-styles.mjs": "./src/get-styles.mjs",
     "./get-styles.js": "./src/get-styles.js"
@@ -29,3 +28,3 @@ },
     "lint": "eslint src test --fix",
-    "test": "npm run lint && tape test/**/*.js | tap-arc"
+    "test": "npm run lint && tape test/**/*.*js | tap-arc"
   },
@@ -50,3 +49,13 @@ "repository": {
   "eslintConfig": {
-    "extends": "@architect/eslint-config"
+    "extends": "@architect/eslint-config",
+    "overrides": [
+      {
+        "files": [
+          "*.mjs"
+        ],
+        "parserOptions": {
+          "sourceType": "module"
+        }
+      }
+    ]
   },
@@ -53,0 +62,0 @@ "keywords": [

README.md

@@ -33,27 +33,23 @@ # `@enhance/arc-plugin-styles`
 
-### Utility functions - `getStyles()`
+### Utility functions
 
-A utility function is provided to access your generated stylesheet.
+Utility functions are provided to access your generated stylesheet:
 
 ```js
-import getStyles from '@enhance/arc-plugin-styles/get-styles'
+import { getStyles } from '@enhance/arc-plugin-styles'
 
-const styles = getStyles()
-styles.link    // a <link rel="stylesheet"> tag
-styles.style   // a <style> tag for inline styles
-styles.path    // root-relative path to the .css file
+getStyles.linkTag()   // a <link rel="stylesheet"> tag
+getStyles.styleTag()  // a <style> tag for inline styles
+getStyles.path()      // root-relative path to the .css file
 ```
 
-Furthermore, individual methods can be imported:
+`getAll()` is also available to create an object with each result:
 
 ```js
-import {
-  getLinkTag,
-  getStyleTag,
-  getPath,
-} from '@enhance/arc-plugin-styles/get-styles'
+import { getStyles } from '@enhance/arc-plugin-styles'
 
-getLinkTag()   // a <link rel="stylesheet"> tag
-getStyleTag()  // a <style> tag for inline styles
-getPath()      // root-relative path to the .css file
+const styles = getStyles.all()
+styles.link    // a <link rel="stylesheet"> tag
+styles.style   // a <style> tag for inline styles
+styles.path    // root-relative path to the .css file
 ```
@@ -64,1 +60,11 @@
 /_styleguide
+
+## Development
+
+### Experimental releases
+
+Since this plugin is used in parent plugins (namely Enhance), it can be helpful to distribute a version via npm.
+
+1. in a feature branch, create a commit and copy the SHA
+1. set the `"version"` in package.json like `0.0.0-experimental-<SHA>`
+1. publish with the experimental tag: `npm publish --tag experimental`

src/get-styles.js

@@ -52,3 +52,4 @@ const { join } = require('node:path')
 
-module.exports = getStyles
+module.exports = getStyles // legacy
+// this is the main interface:
 module.exports.getStyles = getStyles
@@ -55,0 +56,0 @@ module.exports.getStyleTag = getStyleTag

src/index.js

 const createConfig = require('./_create-config')
 const generateAndSave = require('./_generate')
+const { getStyles, getLinkTag, getPath, getStyleTag } = require('./get-styles')
 const TEMP_DIR_NAME = 'tmp'
@@ -30,3 +31,2 @@
     }
-
   },
@@ -54,2 +54,16 @@ }
 
-module.exports = { hydrate, sandbox, set }
+// main Arc plugin interface
+module.exports = {
+  hydrate,
+  sandbox,
+  set,
+}
+
+// export interface for helpers
+exports = module.exports // shenanigans
+exports.getStyles = { // named export for ESM
+  all: getStyles,
+  linkTag: getLinkTag,
+  styleTag: getStyleTag,
+  path: getPath,
+}

No alert changes

Improved metrics

Number of lines in readme file

69

increased by9.52%

Worsened metrics

Total package byte prevSize

20529

decreased by-2.05%

Number of package files

9

decreased by-10%

Lines of code

206

decreased by-11.97%

No dependency changes