@chrisauret/styled-jsx-plugin-sass 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Thream
+
+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.

package/README.md

@@ -0,0 +1,94 @@
+<h1 align="center">Thream/styled-jsx-plugin-sass</h1>
+
+<p align="center">
+  <strong>Plugin to add <a href="https://sass-lang.com/">Sass</a> support to <a href="https://github.com/vercel/styled-jsx">styled-jsx</a>.</strong>
+</p>
+
+<p align="center">
+  <strong>⚠️ This project is not maintained anymore, you can still use the code as you wish and fork it to maintain it yourself.</strong>
+</p>
+
+<p align="center">
+  <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a>
+  <a href="./CODE_OF_CONDUCT.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Contributor Covenant" /></a>
+  <br />
+  <a href="https://github.com/Thream/styled-jsx-plugin-sass/actions/workflows/lint.yml"><img src="https://github.com/Thream/styled-jsx-plugin-sass/actions/workflows/lint.yml/badge.svg?branch=develop" /></a>
+  <a href="https://github.com/Thream/styled-jsx-plugin-sass/actions/workflows/test.yml"><img src="https://github.com/Thream/styled-jsx-plugin-sass/actions/workflows/test.yml/badge.svg?branch=develop" /></a>
+  <br />
+  <a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits" /></a>
+  <a href="https://github.com/semantic-release/semantic-release"><img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="semantic-release" /></a>
+  <a href="https://www.npmjs.com/package/@styled-jsx/plugin-sass"><img src="https://img.shields.io/npm/v/@styled-jsx/plugin-sass.svg" alt="npm version"></a>
+</p>
+
+## 📜 About
+
+Use [Sass](https://sass-lang.com/) with [styled-jsx](https://github.com/vercel/styled-jsx) 💥
+
+This repository was originally forked from [giuseppeg/styled-jsx-plugin-sass](https://github.com/giuseppeg/styled-jsx-plugin-sass) & it is not intended to take any credit but to improve the code from now on.
+
+## 💾 Install
+
+Install the package and [sass](https://www.npmjs.com/package/sass) version you need (it is a peer dependency).
+
+```sh
+npm install --save-dev sass @styled-jsx/plugin-sass
+```
+
+## ⚙️ Usage
+
+Add `@styled-jsx/plugin-sass` to the `styled-jsx`'s `plugins` in your babel configuration (e.g. `.babelrc.json`):
+
+```json
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "styled-jsx": {
+          "plugins": ["@styled-jsx/plugin-sass"]
+        }
+      }
+    ]
+  ]
+}
+```
+
+## Sass options
+
+Sass can be configured using `sassOptions`. This is useful for setting options such as `data` or `includePaths`, see all the available options in [Sass README](https://github.com/sass/node-sass#Options).
+
+```json
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "styled-jsx": {
+          "plugins": [
+            [
+              "@styled-jsx/plugin-sass",
+              {
+                "sassOptions": {
+                  "includePaths": ["./styles"],
+                  "data": "$test-color: #ff0000"
+                }
+              }
+            ]
+          ]
+        }
+      }
+    ]
+  ]
+}
+```
+
+## 💡 Contributing
+
+Anyone can help to improve the project, submit a Feature Request, a bug report or even correct a simple spelling mistake.
+
+The steps to contribute can be found in the [CONTRIBUTING.md](./CONTRIBUTING.md) file.
+
+## 📄 License
+
+[MIT](./LICENSE)

package/index.js

@@ -0,0 +1,53 @@
+const sass = require('sass')
+const stripIndent = require('strip-indent')
+
+module.exports = (css, settings) => {
+  const cssWithPlaceholders = css
+    .replace(
+      /%%styled-jsx-placeholder-(\d+)%%%(\w*[ ),;!{])/g,
+      (_, id, p1) => `styled-jsx-percent-placeholder-${id}-${p1}`
+    )
+    .replace(
+      /%%styled-jsx-placeholder-(\d+)%%(\w*[ ),;!{])/g,
+      (_, id, p1) => `styled-jsx-placeholder-${id}-${p1}`
+    )
+    .replace(
+      /%%styled-jsx-placeholder-(\d+)%%%/g,
+      (_, id) => `/*%%styled-jsx-percent-placeholder-${id}%%*/`
+    )
+    .replace(
+      /%%styled-jsx-placeholder-(\d+)%%/g,
+      (_, id) => `/*%%styled-jsx-placeholder-${id}%%*/`
+    )
+
+  const optionData = (settings.sassOptions && settings.sassOptions.data) || ''
+  const data =
+    stripIndent(optionData) + '\n' + stripIndent(cssWithPlaceholders)
+
+  // Map legacy sassOptions to modern API options
+  const { data: _, ...sassOptions } = settings.sassOptions || {}
+  const preprocessed = sass
+    .compileString(data, {
+      ...sassOptions,
+      syntax: sassOptions.indentedSyntax ? 'indented' : 'scss'
+    })
+    .css.toString()
+
+  return preprocessed
+    .replace(
+      /styled-jsx-percent-placeholder-(\d+)-(\w*[ ),;!{])/g,
+      (_, id, p1) => `%%styled-jsx-placeholder-${id}%%%${p1}`
+    )
+    .replace(
+      /styled-jsx-placeholder-(\d+)-(\w*[ ),;!{])/g,
+      (_, id, p1) => `%%styled-jsx-placeholder-${id}%%${p1}`
+    )
+    .replace(
+      /\/\*%%styled-jsx-percent-placeholder-(\d+)%%\*\//g,
+      (_, id) => `%%styled-jsx-placeholder-${id}%%%`
+    )
+    .replace(
+      /\/\*%%styled-jsx-placeholder-(\d+)%%\*\//g,
+      (_, id) => `%%styled-jsx-placeholder-${id}%%`
+    )
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@chrisauret/styled-jsx-plugin-sass",
+  "version": "1.0.0",
+  "description": "Plugin to add Sass support to styled-jsx (fork of @styled-jsx/plugin-sass).",
+  "license": "MIT",
+  "main": "index.js",
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "keywords": [
+    "styled-jsx-plugin",
+    "styled-jsx",
+    "sass",
+    "scss",
+    "css-in-js"
+  ],
+  "author": "Chris Auret",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chrisauret/styled-jsx-plugin-sass.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chrisauret/styled-jsx-plugin-sass/issues"
+  },
+  "homepage": "https://github.com/chrisauret/styled-jsx-plugin-sass#readme",
+  "standard": {
+    "envs": [
+      "node",
+      "mocha"
+    ]
+  },
+  "files": [
+    "index.js"
+  ],
+  "scripts": {
+    "lint:commit": "commitlint",
+    "lint:editorconfig": "editorconfig-checker",
+    "lint:markdown": "markdownlint-cli2",
+    "lint:javascript": "standard",
+    "release": "semantic-release",
+    "test": "mocha test.js",
+    "_postinstall": "husky install",
+    "prepublishOnly": "pinst --disable",
+    "postpublish": "pinst --enable"
+  },
+  "dependencies": {
+    "strip-indent": "3.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "17.6.6",
+    "@commitlint/config-conventional": "17.6.6",
+    "@types/node": "20.3.3",
+    "editorconfig-checker": "5.1.1",
+    "husky": "8.0.3",
+    "markdownlint-cli2": "0.8.1",
+    "markdownlint-rule-relative-links": "2.1.0",
+    "mocha": "10.2.0",
+    "pinst": "3.0.0",
+    "sass": "1.97.3",
+    "semantic-release": "21.0.6",
+    "standard": "17.1.0"
+  },
+  "peerDependencies": {
+    "sass": "*"
+  }
+}