esr360

@use "sass:list";
@use "sass:map";

$types: ((
  "box": ("padding", "margin-left"),
  "typography": ("font-size", "color"),
));

@mixin component($name, $type, $styles, $scope: "myScope_") {
    .#{$scope + $name} {

esr360

{
  "name": "accordion",

  "title": {
    "background": "red",

    "panel-is-open": {
      "background": "green"
    },

esr360

{
  ".accordion": {
    ".title": {
      "background": "red",
      
      ".panel.open > &": {
        "background": "green"
      },
      
      "&:hover": {

esr360

import config from './assets/config';
import styles from './assets/styles';

const Accordion = ({ panels, ...props }) => {
  const { name, persist } = useConfig(props);

  const [live, setLive] = useState(
    panels.reduce(($, { active, id }, i) => active ? $.concat(id || i) : $, [])
  );

esr360

import styles from '../';
import config from '../';

const MyModule = ({ title, ...props }) => {
  ...
}
  
MyModule.defaultProps = { styles, config }

esr360

import styles from '../';
import config from '../';

const MyModule = ({ styles = styles, config = config, title, ...props }) => {
  ...
}

esr360

require('@babel/register')();
require('jsdom-global')();

const Sass = require('node-sass');
const fs = require('fs');
const mkdirp = require('mkdirp');
const getDirName = require('path').dirname;

window.matchMedia = window.matchMedia || function() {
  return {

esr360

{
  "name": "Accordion",
  "modifiers": ["keep-open"],
  "components": [
    {
      "name": "panel",
      "modifiers": ["active"]
    },
    {
      "name": "heading",

esr360

@include module('myElement') {
  color: blue;
  display: none;
  
  @include context('someParent', 'active') {
    display: block;
  }
}

esr360

// Sass (Vanilla)
.myElement {
  color: blue;
  display: none;
  
  .someParent.active & {
    display: block;
  }
}