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

Comparing version 1.0.0 to 2.0.0-RC.0

package.json

 {
   "name": "@enhance/arc-plugin-styles",
-  "version": "1.0.0",
+  "version": "2.0.0-RC.0",
   "description": "Plugin for generating enhance CSS utility classes",
   "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./get-styles": "./src/get-styles.mjs"
+  },
   "engines": {
@@ -14,3 +18,3 @@ "node": ">=14"
     "lint": "eslint src test --fix",
-    "test": "npm run lint && tape test/test.js | tap-arc"
+    "test": "npm run lint && tape test/**/*.js | tap-arc"
   },
@@ -32,12 +36,12 @@ "repository": {
   "dependencies": {
-    "@architect/functions": "^5.2.1",
-    "@enhance/styles": "^2.0.2",
-    "esm": "^3.2.25"
+    "@architect/functions": "^5.2.3",
+    "@architect/inventory": "^3.3.2",
+    "@enhance/styles": "^2.0.2"
   },
   "devDependencies": {
     "@architect/eslint-config": "^2.0.1",
-    "@architect/sandbox": "^5.3.1",
-    "eslint": "^8.20.0",
+    "@architect/sandbox": "^5.3.4",
+    "eslint": "^8.26.0",
     "tap-arc": "^0.3.5",
-    "tape": "^5.5.3",
+    "tape": "^5.6.1",
     "tiny-json-http": "^7.4.2"
@@ -44,0 +48,0 @@ },

README.md

@@ -1,11 +0,15 @@
-# `arc-plugin-styles`
+# `@enhance/arc-plugin-styles`
 
-Plugin for generating Enhance CSS utility classes in an [Architect](https://arc.codes) app.
+Plugin for generating [Enhance CSS utility classes](https://github.com/enhance-dev/enhance-styles) in an [Architect](https://arc.codes) app.
 
 ## Install
 
-`npm i @enhance/arc-plugin-styles`
+```
+npm i @enhance/arc-plugin-styles
+```
 
 ## Usage
 
+### Setup
+
 In your `app.arc` file:
@@ -15,3 +19,3 @@
 @app
-enhnc-styl
+my-arc-app
 
@@ -22,5 +26,5 @@ # Define your plugins pragma and add the enhance-styles plugin
 
-# Define the styles pragma
+# Enable the plugin
 @enhance-styles
-filename utilities.css # defaults to "styles.css"
+# with an optional JSON config:
 config ./enhance-styles.json
@@ -31,6 +35,31 @@ ```
 
-You will now be able to load a utility css file from
+### Utility functions - `getStyles()`
 
-```html
-<link rel="stylesheet" href="/_static/utilities.css">
+A utility function is provided to access your generated stylesheet.
+
+```js
+import getStyles from '@enhance/arc-plugin-styles/get-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
 ```
+
+Furthermore, individual methods can be imported:
+
+```js
+import {
+  getLinkTag,
+  getStyleTag,
+  getPath,
+} from '@enhance/arc-plugin-styles/get-styles'
+
+getLinkTag()   // a <link rel="stylesheet"> tag
+getStyleTag()  // a <style> tag for inline styles
+getPath()      // root-relative path to the .css file
+```
+
+## Roadmap
+
+/_styleguide

src/index.js

@@ -1,90 +0,53 @@
-// eslint-disable-next-line
-require = require('esm')(module)
+const createConfig = require('./_create-config')
+const generateAndSave = require('./_generate')
+const TEMP_DIR_NAME = 'tmp'
 
-const { readFileSync, writeFileSync } = require('fs')
-const path = require('path')
-const enhanceStyles = require('@enhance/styles/index.mjs').default
+const hydrate = {
+  async copy ({ arc, copy, inventory }) {
+    const params = { arc, inventory }
 
-const sandbox = {
-  start (params) {
-    verify(params)
-    generateAndSave(createConfig(params))
-  },
-}
+    const config = createConfig(params)
+    await generateAndSave(config)
 
-const deploy = {
-  start (params) {
-    verify(params)
-    generateAndSave(createConfig(params))
+    console.log('  Enhance Styles: CSS generated.')
 
-    // always return cloudformation
-    return params.cloudformation
+    await copy({
+      source: TEMP_DIR_NAME, // relative to the project root
+      target: '@architect/shared/enhance-styles',
+    })
   },
 }
 
-/**
- * Verify the Arc project is configured for enhance-styles
- * @param {object} params
- * @param {object} params.arc
- * @param {object} params.inventory
- * @returns {boolean} is valid
- */
-function verify ({ arc, inventory }) {
-  // TODO: helpful error if inventory doesn't have static or static.folder
-  // TODO: helpful error if @enhance-styles not set in arc
-  return inventory.inv.static?.folder && arc['enhance-styles']?.length > 0
-}
+const sandbox = {
+  async watcher (params) {
+    const { filename } = params
+    const config = createConfig(params)
 
-/**
- * Create configuration for enhance-styles creation
- * @param {object} params
- * @param {object} params.arc
- * @param {object} params.inventory
- * @returns {{stylesConfig: string, path: string}}
- */
-function createConfig ({ arc, inventory }) {
-  const pluginConfig = Object.fromEntries(arc['enhance-styles'] || [])
-  const filename = pluginConfig?.filename || 'styles.css'
-  const pathToStaticStyles = path.join(
-    inventory.inv._project.cwd,
-    inventory.inv.static.folder,
-    filename,
-  )
+    if (config.configPath && config.configPath === filename) {
+      console.log('  Enhance Styles: config changed, rebuilding.')
+      await generateAndSave(config)
+    }
 
-  let pathToConfig
-  if (pluginConfig.config) {
-    pathToConfig = path.join(
-      inventory.inv._project.cwd,
-      pluginConfig.config,
-    )
-  }
-  else {
-    pathToConfig = path.join(
-      __dirname,
-      '..',
-      '..',
-      'styles',
-      'config.json'
-    )
-  }
-
-  let stylesConfig = readFileSync(pathToConfig, 'utf-8')
-
-  return {
-    stylesConfig,
-    path: pathToStaticStyles,
-  }
+  },
 }
 
-/**
- * Run enhance-styles and save result
- * @param {object} config
- * @param {object} config.stylesConfig
- * @param {string} config.path
- */
-function generateAndSave ({ stylesConfig, path }) {
-  const styles = enhanceStyles(stylesConfig)
-  writeFileSync(path, styles)
+const set = {
+  http () {
+    return [
+      {
+        method: 'get',
+        path: '/enhance-styles.css',
+        src: `${__dirname}/handlers/css`,
+        config: { views: false },
+      },
+      {
+        method: 'get',
+        path: '/_styleguide',
+        src: `${__dirname}/handlers/guide`,
+        config: { views: false },
+      },
+    ]
+  },
 }
 
-module.exports = { sandbox, deploy }
+module.exports = { hydrate, sandbox, set }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25557

increased by62.46%

Number of package files

10

increased by100%

Lines of code

184

increased by106.74%

Number of lines in readme file

63

increased by85.29%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

3

increased byInfinity%

Dependency changes

• + Added@architect/inventory@^3.3.2

• + Added@architect/asap@6.0.6(transitive)

• + Added@architect/inventory@3.6.5(transitive)

• + Added@architect/parser@6.0.3(transitive)

• + Added@architect/utils@3.1.9(transitive)

• + Added@isaacs/cliui@8.0.2(transitive)

• + Added@pkgjs/parseargs@0.11.0(transitive)

• + Addedansi-regex@5.0.16.1.0(transitive)

• + Addedansi-styles@4.3.06.2.1(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbrace-expansion@2.0.1(transitive)

• + Addedchalk@4.1.2(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcross-spawn@7.0.6(transitive)

• + Addedeastasianwidth@0.2.0(transitive)

• + Addedemoji-regex@8.0.09.2.2(transitive)

• + Addedforeground-child@3.3.0(transitive)

• + Addedglob@10.2.7(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addedhas-flag@4.0.0(transitive)

• + Addedis-fullwidth-code-point@3.0.0(transitive)

• + Addedisexe@2.0.0(transitive)

• + Addedjackspeak@2.3.6(transitive)

• + Addedlambda-runtimes@1.1.7(transitive)

• + Addedlru-cache@10.4.3(transitive)

• + Addedmimic-fn@2.1.0(transitive)

• + Addedminimatch@9.0.5(transitive)

• + Addedminipass@6.0.2(transitive)

• + Addedonetime@5.1.2(transitive)

• + Addedpath-key@3.1.1(transitive)

• + Addedpath-scurry@1.11.1(transitive)

• + Addedpath-sort@0.1.0(transitive)

• + Addedrestore-cursor@3.1.0(transitive)

• + Addedrun-series@1.1.9(transitive)

• + Addedsha@3.0.0(transitive)

• + Addedshebang-command@2.0.0(transitive)

• + Addedshebang-regex@3.0.0(transitive)

• + Addedsignal-exit@3.0.74.1.0(transitive)

• + Addedstring-width@4.2.35.1.2(transitive)

• + Addedstrip-ansi@6.0.17.1.0(transitive)

• + Addedsupports-color@7.2.0(transitive)

• + Addedwhich@2.0.2(transitive)

• + Addedwrap-ansi@7.0.08.1.0(transitive)

• - Removedesm@^3.2.25

• - Removedesm@3.2.25(transitive)

• Updated@architect/functions@^5.2.3