@modernpoacher/gremlins 0.0.4 → 0.0.6

package/babel.config.cjs

@@ -40,14 +40,6 @@ const presets = [
 
 const plugins = [
   '@babel/syntax-jsx',
-  '@babel/proposal-export-default-from',
-  '@babel/proposal-export-namespace-from',
-  [
-    '@babel/proposal-class-properties',
-    {
-      loose: false
-    }
-  ],
   [
     'module-resolver', {
       alias: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernpoacher/gremlins",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Gremlins",
   "keywords": [
     "Gremlins",
@@ -24,10 +24,9 @@
   },
   "scripts": {
     "prepublishOnly": "cross-env NODE_ENV=production npm run build",
-    "build": "cross-env DEBUG=@modernpoacher/gremlins npm run gulp -- build",
-    "build:watch": "cross-env DEBUG=@modernpoacher/gremlins npm run gulp -- build:watch",
-    "transform": "cross-env DEBUG=@modernpoacher/gremlins npm run gulp -- transform",
-    "transform:watch": "cross-env DEBUG=@modernpoacher/gremlins npm run gulp -- transform:watch",
+    "build": "cross-env DEBUG=@modernpoacher/gremlins webpack",
+    "build:watch": "cross-env DEBUG=@modernpoacher/gremlins webpack --watch",
+    "transform": "cross-env DEBUG=@modernpoacher/gremlins ./transform.sh",
     "pregulp": "npm run nvm",
     "gulp": "gulp --color",
     "prelint": "npm run nvm",
@@ -48,21 +47,11 @@
   "devDependencies": {
     "@babel/core": "^7.22.17",
     "@babel/eslint-parser": "^7.22.15",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-export-default-from": "^7.22.17",
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/register": "^7.22.15",
     "@modernpoacher/design-system": "1.0.72",
     "@modernpoacher/hooks": "^1.0.434",
-    "@sequencemedia/gulp": "^1.1.71",
-    "@sequencemedia/gulp-clean-css": "^1.0.33",
-    "@sequencemedia/gulp-css-purge": "^1.1.26",
-    "@sequencemedia/gulp-debug": "^1.0.37",
-    "@sequencemedia/gulp-postcss": "^1.0.36",
-    "@sequencemedia/gulp-sass": "^1.0.32",
-    "@sequencemedia/gulp-sourcemaps": "^1.0.33",
     "@storybook/addon-actions": "^7.4.0",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-links": "^7.4.0",
@@ -71,39 +60,35 @@
     "@types/react": "^18.2.21",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
-    "autoprefixer": "^10.4.15",
     "babel-plugin-module-resolver": "^5.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.32.2",
     "cross-env": "^7.0.3",
-    "cssnano": "^6.0.1",
-    "del": "^7.1.0",
     "eslint": "^8.49.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-with-typescript": "^39.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-react": "^7.33.2",
-    "glob-all": "^3.3.1",
     "husky": "^8.0.3",
     "jest": "^29.6.4",
+    "mini-css-extract-plugin": "^2.7.6",
     "postcss": "^8.4.29",
-    "postcss-easy-import": "^4.0.0",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.3",
     "postcss-map": "^0.11.0",
-    "postcss-normalize": "^10.0.1",
-    "postcss-scss": "^4.0.8",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "regenerator-runtime": "^0.14.0",
-    "sass": "^1.66.1",
+    "remove-files-webpack-plugin": "^1.5.0",
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
     "storybook": "^7.4.0",
-    "vinyl-paths": "^5.0.0"
+    "vinyl-paths": "^5.0.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   },
   "imports": {
-    "#build/gulp/build/*": "./build/gulp/build/*.mjs",
-    "#build/gulp/build": "./build/gulp/build/index.mjs",
-    "#build/gulp/transform": "./build/gulp/transform/index.mjs",
-    "#build/gulp/*": "./build/gulp/*.mjs",
     "#build/paths": "./build/paths.mjs"
   },
   "exports": {

package/src/components/group/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
   ]
 })
 
@@ -8,7 +8,7 @@ const debug = require('debug')
 
 const log = debug('@modernpoacher/sprockets/components/group')
 
-log('`sprockets` is awake')
+log('`gremlins` is awake')
 
 const {
   default: component

package/src/gremlins/fieldset/group/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
   ]
 })
 
@@ -8,7 +8,7 @@ const debug = require('debug')
 
 const log = debug('@modernpoacher/gremlins/gremlins/fieldset/group')
 
-log('`sprockets` is awake')
+log('`gremlins` is awake')
 
 const {
   default: component

package/src/index.cjs

@@ -18,6 +18,7 @@ const RadioGremlin = require('./gremlins/radio/index.cjs')
 const SelectGremlin = require('./gremlins/select/index.cjs')
 const TextGremlin = require('./gremlins/text/index.cjs')
 const TextareaGremlin = require('./gremlins/textarea/index.cjs')
+const FieldsetGremlin = require('./gremlins/fieldset/index.cjs')
 
 module.exports.CheckboxGremlin = CheckboxGremlin
 module.exports.EmailGremlin = EmailGremlin
@@ -27,3 +28,4 @@ module.exports.RadioGremlin = RadioGremlin
 module.exports.SelectGremlin = SelectGremlin
 module.exports.TextGremlin = TextGremlin
 module.exports.TextareaGremlin = TextareaGremlin
+module.exports.FieldsetGremlin = FieldsetGremlin

package/src/index.mjs

@@ -8,6 +8,7 @@ import RadioGremlin from './gremlins/radio/index.cjs'
 import SelectGremlin from './gremlins/select/index.cjs'
 import TextGremlin from './gremlins/text/index.cjs'
 import TextareaGremlin from './gremlins/textarea/index.cjs'
+import FieldsetGremlin from './gremlins/fieldset/index.cjs'
 
 const log = debug('@modernpoacher/gremlins')
 
@@ -21,6 +22,7 @@ export { default as RadioGremlin } from './gremlins/radio/index.cjs'
 export { default as SelectGremlin } from './gremlins/select/index.cjs'
 export { default as TextGremlin } from './gremlins/text/index.cjs'
 export { default as TextareaGremlin } from './gremlins/textarea/index.cjs'
+export { default as FieldsetGremlin } from './gremlins/fieldset/index.cjs'
 
 export default {
   CheckboxGremlin,
@@ -30,5 +32,6 @@ export default {
   RadioGremlin,
   SelectGremlin,
   TextGremlin,
-  TextareaGremlin
+  TextareaGremlin,
+  FieldsetGremlin
 }

package/transform.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+node -e 'import("./build/transform.mjs").then(({ default: transform }) => transform())'

package/webpack.config.mjs

@@ -0,0 +1,105 @@
+import path from 'node:path'
+import Webpack from 'webpack'
+import {
+  CleanWebpackPlugin
+} from 'clean-webpack-plugin'
+import RemoveFilesPlugin from 'remove-files-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+
+import {
+  sourcePath as SOURCE_PATH,
+  targetPath as TARGET_PATH,
+  modulePath as MODULE_PATH
+} from '#build/paths'
+
+const {
+  SourceMapDevToolPlugin
+} = Webpack
+
+export default {
+  mode: 'production',
+  entry: {
+    'preview-head': path.join(SOURCE_PATH, 'sass/preview-head.scss')
+  },
+  output: {
+    path: path.join(TARGET_PATH, 'css')
+  },
+  stats: {
+    colors: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              sourceMap: false
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: false,
+              postcssOptions: {
+                config: false,
+                plugins: [
+                  'postcss-import',
+                  [
+                    'postcss-map', {
+                      maps: [
+                        path.join(MODULE_PATH, '@modernpoacher/design-system/src/tokens/palette.json')
+                      ]
+                    }
+                  ]
+                ]
+              }
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: false,
+              sassOptions: {
+                includePaths: [
+                  path.join(MODULE_PATH, '@modernpoacher/design-system/src/sass')
+                ]
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      verbose: false,
+      cleanOnceBeforeBuildPatterns: [
+        path.join(TARGET_PATH, 'css/*.css'),
+        path.join(TARGET_PATH, 'css/*.css.map')
+      ]
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
+    new SourceMapDevToolPlugin({
+      test: /\.css$/i,
+      filename: '[name].css.map'
+    }),
+    new RemoveFilesPlugin({
+      after: {
+        test: [
+          {
+            folder: path.join(TARGET_PATH, 'css'),
+            method (filePath) {
+              return /\.js$/m.test(filePath)
+            }
+          }
+        ]
+      }
+    })
+  ]
+}