adamgruber / sass-extract-js Goto Github PK

Hello,

I have a problem with Jest, when I run a test I have this error:

Cannot find module 'sass-extract-loader?{"plugins": ["sass-extract-js"]}!./theme/variables.scss' from 'index.tsx'

My code :

const theme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!./theme/variables.scss')

ReactDOM.render(
  <ThemeProvider theme={theme}>
    ...
  </ThemeProvider>
)

Would be useful to have a CLI as follows:

sass-extract-js ./path/to/scss ./path/to/output

Or perhaps a separate project that provided the CLI.

I have this:

import React from "react";
import ReactDOM from "react-dom";
import { renderSync } from 'sass-extract';

const theme = renderSync(
    { file: './theme.scss' },
    { plugins: ['sass-extract-js'] }
).vars;

My theme.scss file exists and just has one variable defined in it. When I try to start my project I get this:

./node_modules/node-sass/lib/binding.js
19:9-37 Critical dependency: the request of a dependency is an expression

./node_modules/sass-extract/lib/pluggable.js
52:17-32 Critical dependency: the request of a dependency is an expression

This seems to happen with sass-extract version 2 and 1.0.1.

Am I missing something? Any help or assistance would be much appreciated!

It may be useful for some to be able to use this package outside the confines of a plugin. Exporting/bundling the transformStyles method separately would allow users to include it like this:

import transformStyles from 'sass-extract-js/transformStyles'

I'm getting the following warning/error when parsing a bootstrap _variable.scss file. My setup is it's based on next.js

 ERROR  Failed to compile with 5 errors

This dependency was not found:

* fs in ./node_modules/mkdirp/index.js, ./node_modules/node-sass/lib/extensions.js and 3 others

To install it, you can run: npm install --save fs
(node:9903) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead

I'm not really whether if is related to this specific module or the sass-extract module, so I raised the same issue there.

I find this plugin great for documentation purposes (used in Storybook pages). Would it be possible to somehow add doc comments found in the preceding lines? Eg:

So object for this variable would also include {... comments: ['Color for emphasized texts']}
This would enable us to keep documentation together with code.

I'm currently using this in this form but its creating a dictionary of camel case keys.
How could I tell it to keep the variables case "as is" the same way they are defined in the sass file (which are mostly kebab case in this case).

const importedVars = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!./../styles/scss/');

Thank you!

I had a use case which called for pulling in SASS variables from a design system to populate the "knob" options in a storybook app for a component library I authored. After trying out sass-extract I started writing a parser for the SASS AST when I stumbled across this library. After trying out the lib a few things jumped out at me.

It seems strange to bundle this as a webpack plugin since it has a hard dependency on sass-extract not sass-extract-loader. If this was bundled to only export transformStyles it might provide more utility to the community.

Also, the remapping of map keys to camelCase is lossy and prevents keys from being used in meaningful way such as populating the dropdown "knob" options for component libraries using storybook.

The default behavior of this plugin is to camelCase variable keys during the transform.

$my-variable-name: 10px //=> myVariableName: '10px'

This may be undesirable for some so an option to skip this part of the transform would be a good idea.