Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Sass -> css -> component in #shadow-root #80

Open
poldee-lgi opened this issue May 29, 2020 · 2 comments
Open

Using Sass -> css -> component in #shadow-root #80

poldee-lgi opened this issue May 29, 2020 · 2 comments

Comments

@poldee-lgi
Copy link

Hello,

I'm trying to configure my webpack config to convert my scss files to css and the insert in into my component's shadow-root context.

I'm starting to think it's not possible :-|

Example :

In my component I import my style like this. Currently, it's a style.js file
import { style, colors } from './style';

style is defined and usable. YEAH!!
colors is defined, but colorLogoGrey, colorBrand and colorGreyActive are all undefined

style.js

import {
  colorLogoGrey,
  colorBrand,
  colorGreyActive,
} from '../../../style/style.scss';

export const colors = {
  colorLogoGrey,
  colorBrand,
  colorGreyActive,
};

export const style = {
  attachment: {
    position: 'relative',
    padding: '16px 75px 16px 54px',
    margin: '0 15px 17px 0',
    border: '1px solid #E2ECEF',
    borderRadius: '4px',
    backgroundColor: '#fff',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  attachmentIcon: {
    position: 'absolute',
    left: '15px',
    paddingRight: '5px',
    marginRight: '25px',
  },
  attachmentInfo: {
    width: '100%',
    padding: '0px 10px',
  },
  action: {
    display: 'flex',
    position: 'absolute',
    right: '15px',
  },
  addedBy: {
    display: 'flex',
    color: colorGreyActive,
    fontSize: '13px',
    paddingTop: '20px',
  },
  addedByLabel: {
    paddingRight: '15px',
    fontWeight: 'bold',
  },
  addedByInfo: {
    padding: '0 3px',
  }
};

As you can see, I'm trying to import colors from style.scss

I've tried many different combinations with the following webpack configuration:

  {
    test: /\.(s)?css$/,
    use: [
      // 'to-string-loader',
      // 'css-to-string-loader',
      // 'style-loader',
      {
        loader: 'style-loader',
        options: {
          insert: 'body',
        },
      }
      'css-loader?sourceMap',
      'postcss-loader?sourceMap',
      // 'resolve-url-loader',
      // {
      //   loader: 'resolve-url-loader',
      //   options: {
      //     root: sourcePath,
      //   },
      // },
      'sass-loader?sourceMap',
    ],
  },

If I simply use style-loader evertything renders properly, but the <style> tag get loaded in the head. Is it possible to set this up so the style gets bundled up inside the shadow-root?

webpack starts and serves my component properly displayed and formated except for the colors and fonts.

Please help :-)
Thanks

@lancesnider
Copy link

I know this is an ooooold issue, but for anyone still trying to figure it out, here's how I did it.

Make sure you have the to-sass-loader and to-string-loader installed.

In my webpack.config:

  module: {
    rules: [
      ...
      {
        // look for .scss files
        test: /\.scss$/,
        use: [
          {
            loader: 'to-string-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },

In your top-level React component. The dangerouslySetInnerHTML is the important bit that you may have been missing.

import React from 'react';

import ReactDOM from 'react-dom';
import root from 'react-shadow';

import App from 'containers/App';

// To work within the shadow dom, we need to import the SASS as a string
import stylesheet from './content.styles.scss';

// attach the sidebar to the page body
const app = document.createElement('div');
app.id = 'your-root';
app.className = 'your-root';
document.body.appendChild(app);

ReactDOM.render(
      <root.div>
        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
        <App />
      </root.div>
  app
);

@evanjmg
Copy link

evanjmg commented Nov 30, 2022

but how does one support icons?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants