babel-plugin-css-to-module - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dev/index.js

@@ -1,2 +0,2 @@
-import { cssModules } from "./css-modules";
+import { cssModules } from "inline-css-modules-react";
 // import "./index-2";
@@ -3,0 +3,0 @@ //

package.json

 {
   "name": "babel-plugin-css-to-module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "src/babel-plugin-css-to-module.js",
@@ -18,5 +18,7 @@ "license": "MIT",
     "html-webpack-plugin": "^5.5.0",
+    "inline-css-modules-react": "^0.0.4",
     "jest": "^29.4.3",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
+    "react": "^18.2.0",
     "sass": "^1.58.3",
@@ -31,4 +33,6 @@ "webpack": "^5.75.0",
   "dependencies": {
+    "postcss-minify": "^1.1.0",
     "postcss-modules": "^6.0.0"
-  }
+  },
+  "packageManager": "yarn@3.6.3"
 }

README.md

@@ -5,17 +5,10 @@ # `babel-plugin-css-to-module`
 
-### Description
+Transform css strings into css-modules using tagged template literals.
 
-A babel plugin that transforms css into css-modules using tagged template literals.
-The output is a raw string of data which is parsed using either
-the react hook [use-inline-css-modules]() or any other custom template literal
-tag.
+### The old way
 
-This plugin is framework-agnostic, but we'll be using React in most of the
-examples.
+You would write css in its own file and import it into your component using a
+module bundler like webpack and the loader `css-loader` to convert it to css
+modules:
 
-### Why
-
-With css modules, you would write css in its own file and import it into your
-component:
-
 ```css
@@ -28,18 +21,15 @@ /* my-styles.css */
 
-```js
-// my-compoennt.jsx
-import styles from "./my-styles.css";
-
-function MyComponent() {
-  return <div className={styles.someStyle}>Hello, world!</div>;
-}
+```jsx
+// my-component.js
+<div className={styles.someStyle}>Hello, world!</div>
 ```
 
-`babel-plugin-css-to-module` allows you to write your css as a string inline:
+### The new way
 
-```js
-function MyComponent() {
-  return <div className={styles.someStyle}>Hello, world!</div>;
-}
+`babel-plugin-css-to-module` allows you to write your css as a template literal
+in your javascript file:
 
+```jsx
+<div className={styles.someStyle}>Hello, world!</div>;
+
 const { styles } = cssModules`
@@ -52,5 +42,2 @@ .someStyle {
 
-This plugin will target the `cssModules` tag (or any other name you want), and
-transform the string into parsable raw data.
-
 ## Install
@@ -64,3 +51,3 @@
 # or
-npm add -D postcss babel-plugin-css-to-module
+npm install -D postcss babel-plugin-css-to-module
 ```
@@ -70,15 +57,22 @@
 
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      "babel-plugin-css-to-module",
+      {
+        // options here
+      },
+    ],
+  ],
+};
 ```
-{
-  "plugins": [
-    ["babel-plugin-css-to-module", {
-      // options here
-    }]
-  ]
-}
-```
 
-## Consume
+## Use
 
-#### Todo: write this out
+While `babel-plugin-css-to-module` transforms your css to modules, we now need a
+way to consume it. This depends highly on your setup and chosen libraries.
+For our use-case we built a library for react:
+[inline-css-modules-react](https://www.npmjs.com/package/inline-css-modules-react).
 
@@ -95,11 +89,16 @@ ## Options
 
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      "babel-plugin-css-to-module",
+      {
+        tagName: "customName",
+        // options here
+      },
+    ],
+  ],
+};
 ```
-{
-  "plugins": [
-    ["babel-plugin-css-to-module", {
-      "tagName": "customName"
-    }]
-  ]
-}
-```
 
@@ -130,14 +129,24 @@ ```js
 
+```shell
+# install sass
+yarn add -D sass
 ```
-{
-  "plugins": [
-    ["babel-plugin-css-to-module", {
-      "sassOptions": {}
-    }]
-  ]
-}
+
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      "babel-plugin-css-to-module",
+      {
+        sassOptions: {
+          additionalData: "",
+          ...restOfSassOptions,
+        },
+      },
+    ],
+  ],
+};
 ```
 
-#### Sass options
-
 The `additionalData` sass option will prepend any sass to the
@@ -147,5 +156,29 @@ beginning of your stylesheets (think variables and mixins).
 The rest of the properties are pass-through options for sass, and can be found
-in their docs: [sass javascript api](https://sass-lang.com/documentation/js-api/).
+in their
+docs: [sass javascript api](https://sass-lang.com/documentation/js-api/).
 
-**Note:** even if you don't need sass options, you still must pass an object for the
-sass compiler to run.
+**Note:** even if you don't need sass options, you still need to include
+the `sassOptions` property for the sass compiler to run.
+
+## MIT License
+
+Copyright (c) 2023 Tony Lefler
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

src/async-child.js

 const { argv } = require("node:process");
 const postcss = require("postcss");
 const postcssModules = require("postcss-modules");
+const postcssMinify = require("postcss-minify");
 
 const cssArg = "css=";
+const nameArg = "name=";
 const pluginArg = "plugins=";
 const optsArg = "opts=";
 let evalString = "";
+let name = "";
 let plugins = [];
@@ -16,2 +19,5 @@ let opts = {};
   }
+  if (arg.startsWith(nameArg)) {
+    name = decodeURIComponent(arg.slice(nameArg.length));
+  }
   if (arg.startsWith(pluginArg)) {
@@ -30,2 +36,3 @@ plugins = JSON.parse(decodeURIComponent(arg.slice(pluginArg.length)));
     postcssModules({
+      generateScopedName: `${name}__[local]--[hash:base64:5]`,
       getJSON(cssFilename, json, outputFilename) {
@@ -36,2 +43,3 @@ classNames = json;
     }),
+    postcssMinify,
   ]).process(evalString, {
@@ -38,0 +46,0 @@ from: undefined,

src/babel-plugin-css-to-module.js

@@ -12,2 +12,4 @@ const child_process = require("child_process");
         let node = path.node;
+        const filenameArray = this.file.opts.filename.split("/");
+        const filename = filenameArray[filenameArray.length - 1].split(".")[0];
 
@@ -18,2 +20,3 @@ const {
           sassOptions,
+          pathToAsyncChild = `${process.cwd()}/node_modules/babel-plugin-css-to-module/src`,
           ...cssModuleOpts
@@ -48,5 +51,6 @@ } = babelOpts;
           );
+          const encodedName = encodeURIComponent(filename);
 
           const bufferResponse = child_process.execSync(
-            `node ${process.cwd()}/node_modules/babel-plugin-css-to-module/src/async-child.js css="${encodedEvalString}" plugins="${encodedPlugins}" opts="${encodedCssModuleOpts}"`
+            `node ${pathToAsyncChild}/async-child.js css="${encodedEvalString}" plugins="${encodedPlugins}" opts="${encodedCssModuleOpts}" name="${encodedName}"`
           );
@@ -53,0 +57,0 @@

New alerts

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

Improved metrics

Total package byte prevSize

2241757

increased by24140.45%

Number of package files

14

increased by16.67%

Lines of code

9268

increased by4727.08%

Number of lines in readme file

177

increased by22.92%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

16

increased by14.29%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedpostcss-minify@^1.1.0

• + Addedpostcss-minify@1.1.0(transitive)