Skip to content

Sass support #38

@TheJaredWilcurt

Description

@TheJaredWilcurt

We could add in functionality to detect if a style input is .scss or .sass. Or have a type option for data.

redPerfume.atomize({
  tasks: [
    {
      styles: {
        in: [
          './styles/file.scss',
          './styles/style.css',
          './styles/stuff.sass'
        ],
        out: './dist/styles/styles.css'
      }
    },
    {
      styles: {
        data: '$cow: #F00; .moo { color: $cow; }',
        type: 'scss',
        out: './dist/styles/custom.css'
      }
    }

  ]
});

Implementation:

  1. Detect the input type by str.endsWith('.sass') or str.endsWith('.scss').
  2. Run the file through a Sass processor to create CSS (likely sass.js or a dart-sass binary since node-sass is no more)
  3. Atomize the CSS like normal
  4. If we allow strings of Sass to be passed in via data, then there needs to be a type or language or syntax or something that defaults to css, but allows sass and scss to be passed in as options.

Questions:

  1. Should we allow users to pass in sass.js/dart-sass specific options?
  2. What would that look like in the API?
  3. Some options will need to be handled by Red-Perfume anyway, like using indentedSyntax setting for .sass

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions