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

Bug when composing a class name that includes a @value variable name #548

Closed
kendrickw opened this issue Jan 23, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@kendrickw
Copy link

commented Jan 23, 2019

Expected Behavior

The css should be processed without error

Current Behavior

CssSyntaxError: modular-css-composition: /1.css:1:11: Invalid composes reference

More detail on the error:

input: 
   { line: 1,
     column: 11,
     source: '@value small: 10px;',
     file: 'spacing.css' },
  postcssNode: 
   Declaration {
     raws: { before: '\n  ', between: ': ' },
     type: 'decl',
     parent: 
      Rule { /* .. omit... */ },
     source: { start: [Object], input: [Object], end: [Object] },
     prop: 'composes',
     value: 'left-10px' },  // seems like incorrect variable substitution

Steps to Reproduce (for bugs)

prefilled modular-css showing syntax error

  1. When using composition, if the classname contains a @value variable name, syntax error results.
@value small from "./1.css";

.left-small { // if I rename this to leftSmall, then it's fine.
  padding-left: small;
}

.my-style {
  composes: left-small;  // if I rename this to leftSmall, then it's fine.
}

Your Environment

Executable Version
modular-css 21.1.1
@tivac

This comment has been minimized.

Copy link
Owner

commented Jan 23, 2019

.map((v) => `\\b${escape(v)}\\b`)

Probably needs to use [^a-z0-9\-\_] around the value name instead of trusting \b, since clearly that matches the -small value and that's silly. I'll think on this a bit more & hopefully can get a fix for you soon.

@tivac tivac self-assigned this Jan 23, 2019

tivac added a commit that referenced this issue Jan 24, 2019

fix: use a safer regex for finding @values
"\bval\b" will match "-val" which is a problem for folks using hyphens to separate classes. Now using "^val$" which when combined with postcss-value-parser should match almost everything the old one did but w/o being too greedy.

Fixes #548

@tivac tivac referenced this issue Jan 24, 2019

Merged

fix: use a safer regex for finding @values #552

5 of 9 tasks complete

@tivac tivac closed this in #552 Jan 24, 2019

tivac added a commit that referenced this issue Jan 24, 2019

fix: use a safer regex for finding @values (#552)
"\bval\b" will match "-val" which is a problem for folks using hyphens to separate classes. Now using "^val$" which when combined with postcss-value-parser should match almost everything the old one did but w/o being too greedy.

Fixes #548
@tivac

This comment has been minimized.

Copy link
Owner

commented Jan 24, 2019

Fix published in v21.2.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.