altgifted / babel-plugin-transform-scss Goto Github PK

I am using this plugin in a monorepo where we publish multiple packages. We have a root package.json used for local testing, but each component declares its own dependencies in a child folder:

package.json
components/
  component1/
    package.json
  component2/
    package.json

When I try to use the plugin to build the components, the build fails unless I have the libraries that provide the stylesheets I'm trying to include declared in the root package.json. This works ok as a workaround, but is not desirable. I think the problem may stem from these lines that assume dependencies are available from the process root: https://github.com/altgifted/babel-plugin-transform-scss/blob/master/lib/index.js#L65-L66

If I have the following directory structure:

folder1/
  - styleFile.scss
folder2/
  - styleFile.scss

Both will result in a fileName of styleFile

Only one file will have its CSS rendered in the browser (this is the rendered JavaScript):

var styles = ".error-msg {}";
var fileName = "styleFile";
var element = document.querySelector("style[data-sass-component='styleFile']");

 if (!element) {
    var styleBlock = document.createElement("style");
    styleBlock.innerHTML = styles;
    styleBlock.setAttribute("data-sass-component", fileName);
    document.head.appendChild(styleBlock);
  } else {
    element.innerHTML = styles;
  }

The last one to run overwrites any existing style elements.

The library should either:

1. Append the extra styles
2. Warn the user
3. Find another way - perhaps use a "file name" that includes the folder structure:

folder1__styleFile
folder2__styleFile

Please add License file

I used this babel-plugin-transform-scss package to create a distribution folder for a components library project, which is integrated in other React apps. The transformed CSS worked for static React exports. Now in Next.js with serverside rendering, the CSS is not applied. It may be the topic of CSS-in-JS

Warning: CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React, including concurrent rendering.

Is the transformed CSS expected to be working with serverside rendering, or has it yet to be supported?

If you have a file named:

search-page.styles.scss

The sassFilename is set as:

styles

However, it should be:

search-page.styles

A simple fix would be to add a period to the sassFile regex:

sassFile: /([.A-Za-z0-9]+)\.s[ac]ss/g,

I would expected to install it with :

npm --save-dev install babel-plugin-transform-scss

But the documentation seems to suggest not?

Previously this would have been solved by something like this...
{ loader: 'sass-loader', options: { includePaths: ['node_modules'] } }

I have some paths that worked previously but I cannot figure out how to point this module to look in the right folders.

@import '@salesforce-ux/design-system/design-tokens/dist/ui-force.default'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/DateInput/index.scss 1:9 root stylesheet at Object.wrapException (/project/node_modules/sass/sass.dart.js:1247:17) at _EvaluateVisitor1._evaluate0$_loadStylesheet$4$baseUrl$forImport (/project/node_modules/sass/sass.dart.js:81032:19) at _EvaluateVisitor1._evaluate0$_loadStylesheet$3$forImport (/project/node_modules/sass/sass.dart.js:81065:19) at _EvaluateVisitor__visitDynamicImport_closure1.call$0 (/project/node_modules/sass/sass.dart.js:82838:21) at _EvaluateVisitor1._evaluate0$_withStackFrame$1$3 (/project/node_modules/sass/sass.dart.js:82046:25) at _EvaluateVisitor1._evaluate0$_withStackFrame$3 (/project/node_modules/sass/sass.dart.js:82052:19) at _EvaluateVisitor1._evaluate0$_visitDynamicImport$1 (/project/node_modules/sass/sass.dart.js:80994:19) at _EvaluateVisitor1.visitImportRule$1 (/project/node_modules/sass/sass.dart.js:80968:17) at ImportRule0.accept$1$1 (/project/node_modules/sass/sass.dart.js:86043:22) at ImportRule0.accept$1 (/project/node_modules/sass/sass.dart.js:86046:19) { formatted: "Error: Can't find stylesheet to import.\n"

I tried to add this to my babel config to provide scss file support but I get the following error:

\src\App.js: Cannot read property '0' of null
at PluginPass.ImportDeclaration (C:\app\node_modules\babel-plugin-transform-scss\lib\index.js:33:33)
***MORE***

babel.config.json

{
	"presets":[
		"@babel/preset-env",
		"@babel/preset-react"
	],
	"plugins": [
		["@babel/transform-runtime"],
		[
			"module-resolver", {
				"root": ["./client/src"]
			}
		],
		["@babel/plugin-proposal-class-properties"],
		["inline-react-svg"],
		["css-modules-transform"],
		["file-loader"],
		["babel-plugin-transform-scss"]
	]
}

package.json

{
	"name": "app",
	"version": "0.0.1",
	"description": "App built with the MERN stack",
	"main": "server.js",
	"scripts": {
		"start": "concurrently \"npm run server\" \"npm run client\"",
		"server": "node ./bin/www",
		"client": "npm start --prefix client",
		"dev": "concurrently \"npm run devserver\" \"npm run client\"",
		"devserver": "nodemon ./bin/www --ext js",
		"test": "nyc --reporter=lcov mocha ./tests/tests.js --timeout 10000 --exit",
		"broken-test": "nyc --reporter=lcov mocha -r jsdom-global/register -r @babel/register ./tests/tests.js ./client/src/**/*.test.js --timeout 10000 --exit"
	},
	"license": "MIT",
	"dependencies": {
		...
	},
	"devDependencies": {
		"@babel/cli": "^7.13.10",
		"@babel/core": "^7.13.10",
		"@babel/plugin-proposal-class-properties": "^7.13.0",
		"@babel/plugin-transform-runtime": "^7.13.10",
		"@babel/preset-env": "^7.13.10",
		"@babel/preset-react": "^7.12.13",
		"@babel/register": "^7.13.8",
		"@babel/runtime": "^7.13.10",
		"babel-plugin-css-modules-transform": "^1.6.2",
		"babel-plugin-inline-react-svg": "^2.0.1",
		"babel-plugin-module-resolver": "^4.1.0",
		"babel-plugin-transform-scss": "^1.0.9",
		"chai": "^4.2.0",
		"chai-http": "^4.3.0",
		"eslint-plugin-ndp": "file:eslint",
		"jsdom": "16.5.1",
		"jsdom-global": "3.0.2",
		"mocha": "^8.1.3",
		"nodemon": "^2.0.7",
		"nyc": "^15.1.0",
		"sinon": "^9.2.3",
		"sinon-chai": "^3.5.0"
	}
}

I have Project A which has dependency babel-plugin-transform-scss. And a Project B with has dependency Project A.

Project B fires a postinstall script of Project A, which uses babel-plugin-transform-scss.

Then this error happens.

npm ERR! Error: [BABEL]: Cannot find module 'uuid'
npm ERR! Require stack:
npm ERR! - /home/foo/development/foo/frontend/node_modules/babel-plugin-transform-scss/lib/index.js

Happens on Project B which is a new Next.js React 18 installation, which has no direct or indirect uuid dependency.

Did not happen on a Project B with React 17 which had [email protected], which had an indirect uuid dependency.

Should just uuid be added as dependency in babel-plugin-transform-scss's package.json?

Hello!

Tell me, please, how can i configure this plugin for use scss modules?

also as if with such webpack config:
{
test: /.s[ac]ss$/i,
use: [
'style-loader', {
loader: 'css-loader',
options: {
modules: true, // <-- !
localsConvention: 'camelCase',
},
}, 'sass-loader'],
}